Show the Column Sort icon initially

11 posts, 1 answers
  1. Reid
    Reid avatar
    448 posts
    Member since:
    Oct 2008

    Posted 04 Mar 2019 Link to this post

    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); 

     

     

     

  2. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 07 Mar 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Reid
    Reid avatar
    448 posts
    Member since:
    Oct 2008

    Posted 20 Mar 2019 in reply to Tsvetomir Link to this post

    Thank you, that did the trick.  No more is the app making two trips to the controller to read the data.
  4. Daniel Blendea
    Daniel Blendea avatar
    43 posts
    Member since:
    Mar 2010

    Posted 12 Mar 2020 in reply to Tsvetomir Link to this post

    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();
        
    });
  5. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 17 Mar 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  6. Daniel Blendea
    Daniel Blendea avatar
    43 posts
    Member since:
    Mar 2010

    Posted 17 Mar 2020 in reply to Tsvetomir Link to this post

    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.

  7. Reid
    Reid avatar
    448 posts
    Member since:
    Oct 2008

    Posted 19 Mar 2020 in reply to Daniel Blendea Link to this post

    Do you have Sortable() set in the constructor in the markup?
  8. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 20 Mar 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  9. Daniel Blendea
    Daniel Blendea avatar
    43 posts
    Member since:
    Mar 2010

    Posted 20 Mar 2020 in reply to Tsvetomir Link to this post

    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.

  10. Daniel Blendea
    Daniel Blendea avatar
    43 posts
    Member since:
    Mar 2010

    Posted 20 Mar 2020 Link to this post

    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.

  11. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 24 Mar 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top