Custom sort compare function for single column in grid with many columns

6 posts, 0 answers
  1. bruce
    bruce avatar
    14 posts
    Member since:
    Sep 2010

    Posted 01 Mar Link to this post

    Hello,

    I have a grid with a column that has template to displays a label based on a key ( ie: "#= getLabel(key) #").  The issue is that the sorting for this column is incorrect since the column is being sorted by the key and not the label ( which the user sees).

    I implemented a custom sort for the grid but now every column clicked goes thru my custom compare function.  I put this at the column item level in the columns array in the configuration.

    Is it possible to have a custom compare for 1 column but not all ( ie: alphanumeric, date columns would go to default sorting)?

    If only 1 sort function is allowed,  how can I tell what column is clicked in that 1 sort function?

    Thanks,

    Bruce Radtke

     

  2. Preslav
    Admin
    Preslav avatar
    353 posts

    Posted 02 Mar Link to this post

    Hello Bruce,

    Based on your post, I am not sure where did you implement the custom compare function. Could you please elaborate? Sending the code of the page will definitely help me a lot in fully understanding the case.

    Further, the columns.sortable.compare configuration is a JavaScript function which is used to compare the values for a specific column:
    Please, let me know if configuring columns.sortable.compare function helps in achieving the desired results.

    I look forward to hearing from you.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. bruce
    bruce avatar
    14 posts
    Member since:
    Sep 2010

    Posted 02 Mar in reply to Preslav Link to this post

    Hi Preslav,

    Thanks for the reply. I should clarify that my applications grid is using 'multiple' sort mode.

    The single sort mode works as expected. Only when the column is clicked, then the custom sort function is called.

    However in multiple sort mode,  the custom function is called for every column sort, even thought it is only specified for the first column. 

    To recreate load the attached file. 

    Open devtools. 

    Place breakpoint in myColMultipleSort.

    Click on the 2nd column of the bottom (multiple mode) grid. No breakpoint expected or hit.   

    Click on the 1st column that has the compare function.  The breakpoint is hit and expected.   

    Click on the third column.  The breakpoint is hit even thought the compare function is declared for the 1st column.

    I expect the compare function to NOT be called on any other column but the 1st.

    If it is the case that because it is 'multiple' mode that it is called for every column,  how do I determine which column was actually clicked?

    Please find sorting.html attached.

    Best regards,

    bruce

     

     

     

  4. bruce
    bruce avatar
    14 posts
    Member since:
    Sep 2010

    Posted 02 Mar in reply to Preslav Link to this post

    Hi Preslav,

    My previous email was flagged as suspicious. I'm not sure why.  I will add the html to the end of this email.

    Here goes again---

    My grid is 'multiple' mode.   The custom compare function is declare for the 1st column.  But if another column is clicked, the custom function is again called.  I have modified the sorting.html example to include custom compare function for the 1st column only.

    You can run the file and open Dev Tools.

    Put a breakpoint on the myColMultipleSort function.

    Click the 2nd column.  No breakpoint hit or expected.

    Click the 1st column.  Breakpoint hit and expected.

    Click the 3rd column.  Breakpoint hit but not expected.  

    At this point ( after the 3rd column click),  am I sorting for the 1st column or for the 3rd column?  How can I determine which column cause the click?

    Thanks,

    bruce

    Here is my sorting.html file:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sorting</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>

    </script>


    </head>
    <body>

    <a class="offline-button" href="../index.html">Back</a>

    <script src="../content/shared/js/orders.js"></script>

    <div id="example">

    <div class="demo-section k-content wide">
    <h4>Grid with single column sorting enabled</h4>
    <div id="singleSort"></div>
    </div>

    <div class="demo-section k-content wide">
    <h4>Grid with multiple column sorting enabled</h4>
    <div id="multipleSort"></div>
    </div>

    <script>
    $(document).ready(function () {
    $("#singleSort").kendoGrid({
    dataSource: {
    data: orders,
    pageSize: 6
    },
    sortable: {
    mode: "single",
    allowUnsort: false
    },
    pageable: {
    buttonCount: 5
    },
    scrollable: false,
    columns: [
    {
    field: "ShipCountry",
    title: "Ship Country",
    sortable: {
    initialDirection: "desc",
    compare: myColSingleSort
    },
    width: 300
    },
    {
    field: "Freight",
    width: 300
    },
    {
    field: "OrderDate",
    title: "Order Date",
    format: "{0:dd/MM/yyyy}"
    }
    ]
    });

    $("#multipleSort").kendoGrid({
    dataSource: {
    data: orders,
    pageSize: 6
    },
    sortable: {
    mode: "multiple",
    allowUnsort: true,
    showIndexes: true
    },
    pageable: {
    buttonCount: 5
    },
    scrollable: false,
    columns: [
    {
    field: "ShipCountry",
    title: "Ship Country",
    width: 300,
    sortable: {
    compare: myColMultipleSort,
    },
    },
    {
    field: "Freight",
    width: 300
    },
    {
    field: "OrderDate",
    title: "Order Date",
    format: "{0:d}"
    }
    ]
    });
    });
    </script>
    <style>
    .demo-section h3 {
    margin: 5px 0 15px 0;
    }
    </style>
    </div>



    </body>
    <script>
    function myColMultipleSort(a,b,c){
    console.log('myColMultipleSort called');
    return 0;
    }

    function myColSingleSort(a,b,c){
    console.log('myColSingleSort called');
    return 0;
    }
    </script>
    </html>

     

     

     

  5. bruce
    bruce avatar
    14 posts
    Member since:
    Sep 2010

    Posted 02 Mar in reply to Preslav Link to this post

    I tried to put the contents of settings.html in a explaination of the issue.

    I got a server 500 error when I submitted.

    How can I send you the contents of my html file which recreates this issue?

  6. Preslav
    Admin
    Preslav avatar
    353 posts

    Posted 06 Mar Link to this post

    Hi Bruce,

    I was able to successfully open the HTML file from the first reply. Thank you for the runnable example, I was able to understand the issue.

    The described is expected behavior due to the current implementation of the dataSource. When a new column is sorted, the dataSource is re-sorting the data for every sort expression.

    If this behavior is slowing the performance of your project, a possible approach might be enabling server operations of the dataSource and sort the data on the server:
    I hope this information is useful.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top