Show the Column Sort icon initially

[Reid]

I am using the code below which works to show that icon but at a cost of causing another read action on the controller.  How can we show the sort icon in a column by default, indicating to the user what the current sort is?

 

var kendoGrid = $("#grid").data('kendoGrid');
var dsSort = [];
dsSort.push({ field: "ProductRoot.Name", dir: "asc" });        
kendoGrid.dataSource.sort(dsSort); 

 

 

 

[Tsvetomir]

Hi Reid,

When the grid is initially loaded, it makes a request for the data. When the sorting is applied, for instance, in the document.ready() event, then a second request is sent to fetch the relevant data. There are two approaches which might be undertaken in order to prevent sending two requests.

1. Set the sorting via the data source's configuration. More information can be obtained here:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/sort

And for the ASP.NET Core wrappers this would look similar to the following:

.Sort(sort=>sort.Add(field=>field.OrderDate).Ascending())

2. Set the AutoBind of the grid to false. This would prevent the initial request for data. When the code snippet you have provided executes, it would send a request to fetch the data. 

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/autobind

Give the suggestions above a try and let me know in case you encounter any issues.


Kind regards,
Tsvetomir
Progress Telerik

[Reid]

Thank you, that did the trick.  No more is the app making two trips to the controller to read the data.

[Daniel Blendea]

Hi,

 

This seems to not work anymore in the latest Telerik for ASP.NET ore 

 

.AutoBind(false)
.DataSource(dataSource =>
       dataSource
           .Ajax()
           .Filter(f => f.Add(ex => ex.State)
                         .IsEqualTo(State.Coding)
               )
           .Sort(s => s.Add(m => m.Updated).Descending())
           .ServerOperation(true)

 

$(function () {

    $.fn.kendoWindow.widget.prototype.options.animation = false;

    let grid = $("#Grid").data("kendoGrid");

   grid.dataSource.read();

});

[Tsvetomir]

Hi Daniel, 

The approach that was provided in my previous response should be working with the latest version of the suite. Could you provide more information on what is not working? Is the request not sent or the parameters that are set in the data source are not sent to the server? 

What I can suggest is that you open the console of the browser, navigate to the Network tab and examine the request that is sent. Within the headers of the request, the sort and filter expressions should be applied. Meanwhile, examine the console for any potential JavaScript errors that might have been thrown.

Let me know in case the issue persists.

 

Regards,
Tsvetomir
Progress Telerik

[Daniel Blendea]

What I meant is that even though I'm setting a default, initial Sort, when the page with the grid loads, there is no sort arrow indicator on that column.

So in my case, the users do not know the data is by default sorted by Updated date, descending.

[Reid]

Do you have Sortable() set in the constructor in the markup?

[Tsvetomir]

Hi Daniel,

I suspect that the grid that is utilized has the AutoBind option set to false, is that correct? If so, in order to correctly apply all of the pre-set options of the data source, you should call the fetch() method instead of read():

$(gridID).getKendoGrid().dataSource.fetch()

Regards,
Tsvetomir
Progress Telerik

[Daniel Blendea]

Thanks, this solved the problem.

What amazes me is that used to work until recently, with .read().

I also opened a support ticked regarding another bug, related to not rendering select checkboxes in a grid.

[Daniel Blendea]

So:

 

fetch
Reads the data items from a remote service (if the transport option is set) or from a JavaScript array (if the data option is set).

The fetch method makes a request to the remote service only the first time it is called if the dataSource is not configured for server operations.

PARAMETERS

callback Function (optional)
The optional function which is executed when the remote request is finished. The function context (available via the this keyword) will be set to the data source instance.
RETURNS
Promise—A promise that will be resolved when the data has been loaded, or rejected if an HTTP error occurs.

------------------------------

read
Reads data items from a remote/custom transport (if the transport option is set) or from a JavaScript array (if the data option is set).

The read method always makes a request to the remote service unless the Data Source is offline.

PARAMETERS

data Object (optional)
Optional data to pass to the remote service. If you need to filter, it is better to use the filter() method or the query() method with a filter parameter.
RETURNS
Promise—A promise that will be resolved when the data has been loaded or rejected if an HTTP error occurs.

[Tsvetomir]

Hi Daniel,

Thank you for sharing the relevant documentation segments for the differences between the fetch and read methods of the data source.

As per the ticket that you have submitted in our private ticketing system, I have provided a response, already. I can assure you that it will be handled in a very timely manner. 

In case additional information regarding the fetch/read methods is needed, let me know.

 

Regards,
Tsvetomir
Progress Telerik