Sorting a Grid

[rossaddison]

Code:

echo GridView::widget()
    // unpack the contents within the array using the three dot splat operator
    ->rowAttributes(['class' => 'align-left'])
    ->tableAttributes(['class' => 'table table-striped h-75', 'id' => 'table-invoice'])
    ->columns(...$columns)
    ->dataReader($paginator)
    ->headerTableEnabled(true)        
    ->headerRowAttributes(['class' => 'card-header bg-info text-black'])
    ->footerEnabled(true)    
    ->footerRowAttributes(['id' => 'this is for id'])
    ->emptyCell($translator->translate('i.not_set'))
    ->emptyCellAttributes(['style' => 'color:red'])        
    ->sortableHeaderPrepend('<div class="float-end text-secondary text-opacity-50">⭥</div>')        
    ->sortableHeaderDescAppend(A::tag()
        ->content('⬆')
        ->href($urlGenerator->generate('inv/index', [], ['sort' => 'id']))
        ->id('btn-id-desc-append')
        ->render())
    ->sortableHeaderDescPrepend(A::tag()
        ->content('⬇')
        ->href($urlGenerator->generate('inv/index', [], ['sort' => '-id']))
        ->id('btn-id-desc-prepend')
        ->render())
    ->sortableHeaderAscAppend(A::tag()
        ->content('⬆')
        ->href($urlGenerator->generate('inv/index', [], ['sort' => 'id']))
        ->render())                
    ->sortableHeaderAscPrepend(A::tag()
        ->content('⬇')
        ->href($urlGenerator->generate('inv/index', [], ['sort' => '-id']))
        ->id('btn-id-asc-prepend')
        ->render())        
    ->header($gridComponents->header(' ' . $translator->translate('i.invoice')))
    ->id('w3-grid') 
    ->pagination(
        $gridComponents->offsetPaginationWidget($defaultPageSizeOffsetPaginator, $paginator)
    )
    ->summaryAttributes(['class' => 'mt-3 me-3 summary text-end'])    
    ->summaryTemplate($pageSizeLimiter::buttons($currentRoute, $s, $urlGenerator, 'inv').' '.$grid_summary)
    ->emptyTextAttributes(['class' => 'card-header bg-warning text-black'])
    ->emptyText($translator->translate('invoice.invoice.no.records'))
    ->toolbar($toolbarString);     

How can the above code be improved?
Weakness: It only allows for one sorting column namely the 'id'. I want to move the


buttons into their own header and ideally there should be some configuration file/array that I can adjust.

[vjik]

GridView gets sort information from data reader. Set Sort object to your data reader. For example:

$sort = Sort::only([
	'status_id',
	'phone_id',
	'sales_manager_id',
	'creation_date',
	'modified_date',
])->withOrder(['creation_date' => 'desc']);
$dataReader = $dataReader->withSort($sort);

[rossaddison]

InvController.php

$sortString = $querySort ?? '-id';
            $order =  OrderHelper::stringToArray($sortString);
            $sort = Sort::only(['id', 'status_id', 'number', 'date_created', 'date_due', 'client_id'])
                    // (@see vendor\yiisoft\data\src\Reader\Sort
                    // - => 'desc'  so -id => default descending on id
                    // Show the latest quotes first => -id
                    ->withOrder($order);

How do you get the ascending and descending arrows to appear in each header? I can see if you remove

new DataColumn(
            'id',
            header:     <--------------------------------------------------- remove
            content: static fn(Inv $model) => $model->getId(),
            withSorting: true
        ), 

the header from the DataColumn you then get a hyperlinked id appearing . i.e.

But I want to be able to click on the header arrows enclosed in a query string i.e. something like

(A::tag()
        ->content('⬆')
        ->href($urlGenerator->generate('inv/index', [], ['sort' => 'id']))
        ->id('btn-id-desc-append')
        ->render()

...with the query parameter. In the above case the 'id' is not '-id' because it is ascending. I can get full functionality with the two id buttons outside the grid but I want to incorporate them inside the grid header above the id column.

If a incorporate the A::tag() in the header I get this effect:

.

[vjik]

Currently, header format is %SortPrepend% %Label% %SortAppend%.

If avaliable sort by column, then %Label% will be link, that change sort.

To generate URL grid view use url creator that you can set via method urlCreator(). Try to use Yiisoft\Yii\DataView\YiiRouter\UrlCreator.

Also you can set options:

• sortableHeaderClass
• sortableHeaderPrepend
• sortableHeaderAppend
• sortableHeaderAscClass
• sortableHeaderAscPrepend
• sortableHeaderAscAppend
• sortableHeaderDescClass
• sortableHeaderDescPrepend
• sortableHeaderDescAppend
• sortableLinkAttributes
• sortableLinkAscClass
• sortableLinkDescClass

[rossaddison]

Ok thanks Vjik. I have moved the status_id, and the date due into the grid. I left the client_id in as a button. There appears to be a conflict when sorting and filtering are available on the column simultaneously.

Additional code: InvController.php

            $urlCreator = new UrlCreator($this->url_generator);
            $order =  OrderHelper::stringToArray($sortString);
            $urlCreator->__invoke([], $order);
            $sort = Sort::only(['id', 'status_id', 'number', 'date_created', 'date_due', 'client_id'])
                    // (@see vendor\yiisoft\data\src\Reader\Sort
                    // - => 'desc'  so -id => default descending on id
                    // Show the latest quotes first => -id
                    ->withOrder($order);
            $invs = $this->invs_status_with_sort($invRepo, $status, $sort);

             The  $urlCreater appears in the parameters to the index as well.

Additional code: inv/index

->urlCreator($urlCreator)
    // the up and down symbol will appear at first indicating that the column can be sorted 
    // It also appears in this state if another column has been sorted        
    ->sortableHeaderPrepend('<div class="float-end text-secondary text-opacity-50">⭥</div>')
    
    // the up arrow will appear if column values are ascending in value         
    ->sortableHeaderAscPrepend('<div class="float-end fw-bold">⭡</div>')
   
    // the down arrow will appear if column values are descending in value       
    ->sortableHeaderDescPrepend('<div class="float-end fw-bold">⭣</div>') 


      

Full code:

inv/index.php

InvController function index

[vjik]

It should work well with filter and sort at the same time. What error is appearing?

[rossaddison]

Ok here is my DataColumn:

new DataColumn(
            field: 'client_id',
            property: 'filterClient',
            header: $translator->translate('i.client'),
            content: static fn(Inv $model): string => (string)$model->getClient()?->getClient_full_name(),
            filter: $optionsDataClientsDropdownFilter,
            withSorting: true
        ),

It sorts on first click but on second click it does not reverse the sort order and 'filterClient' appears in the query parameter on the first click and on the second click.

[rossaddison]

I have put in a pull request. Hopefully might help. . The originalProperty value e.g. 'filterClient', is replacing the property value e.g 'client_id' by means of the code:

function getLinkSortValue

return OrderHelper::arrayToString(
            ArrayHelper::renameKey($resultOrder, $property, $originalProperty)
        );

which is why the sort link is changing to 'filterClient' which is incorrect. The fix is working fine.

[vjik]

Field property is used in sort parameter of URL. It replaced to field before pass it to data reader. We don't use field in URL because it's not safe. Field may contains sensible data, for example, table name: my_db_table.field_name.

GridView process sort parameter of URL itself. You not need process it in your controller.

All filters and sort should be processed by GridView, not need extra code for it.

For example, here you should set default order. GridView itself change order, if it passed by URL.

[rossaddison]

Ok Vjik, I have pulled my sorting code from the Controllers. I still have some filtering code in the Controllers. Do you perhaps have a working example of a grid with the code somewhere? Would be really useful on the demo.