Sort on Command column

7 Answers 25 Views
Grid
Brightstar
Top achievements
Rank 1
Iron
Brightstar asked on 24 Jun 2022, 02:24 PM

Problem I'm having is first column with commands does not sort. Is this not supported?

 

    $("#statusGrid").kendoGrid({
        dataSource: {
            transport: {
                read: async function (options) {
                    KendoData_Read(
                        options,
                        BaseAbs3ApiUrl + "api/CustomerDetail/GetCustomerStatusDetail",
                        { customerId: customerId }
                    );
                }
            },
            sort: [{ field: "CreatedDate", dir: "desc" }]
        },
        dataBound: function (e) {
            $(".k-grid-addDischarge").attr("title", "Add");
            $(".k-grid-editDischarge").attr("title", "Edit");
            $(".k-grid-viewDischarge").attr("title", "View");
        },
        toolbar: kendo.template($("#statusGridToolbarTemplate").html()),
        scrollable: false,
        excel: {
            allPages: true,
            fileName: "CustomerStatus.xlsx",
            proxyURL: "/save",
            filterable: true
        },
        excelExport: absKendoAutoWidthExcelExport,
        sortable: true,
        pageable: absKendoGridPageableDefault,
        noRecords: { template: "No records to display." },
        columns: [
            {
                command: [
                    {
                        name: "addDischarge",
                        text: "",
                        title: "Add",
                        visible: function (item) { return item.CanCreateDischargeDocument },
                        iconClass: "fas fa-plus fa-border",
                        click: function (e) {
                            e.preventDefault(); // prevent page scroll position change
                            var tr = $(e.target).closest("tr");
                            var data = this.dataItem(tr);
                            var url = "/Customer/Discharge/Create/" + data.CustomerStatusChangeId;
                            window.open(url, "_blank");
                        }
                    },
                    {
                        name: "editDischarge",
                        text: "",
                        title: "Edit",
                        visible: function (item) { return item.CanEditDischargeDocument },
                        iconClass: "fa fa-pencil-alt fa-border",
                        click: function (e) {
                            e.preventDefault(); // prevent page scroll position change
                            var tr = $(e.target).closest("tr");
                            var data = this.dataItem(tr);
                            var url = "/Customer/Discharge/EditByStatusChangeId/" + data.CustomerStatusChangeId;
                            window.open(url, "_blank");
                        }
                    },
                    {
                        name: "viewDischarge",
                        text: "",
                        title: "View",
                        visible: function (item) { return item.CanViewDischargeDocument },
                        iconClass: "fas fa-eye fa-border",
                        click: function (e) {
                            e.preventDefault(); // prevent page scroll position change
                            var tr = $(e.target).closest("tr");
                            var data = this.dataItem(tr);
                            var url = BaseAbs2Url + "SSRSReports/Report.aspx?report=DischargeandTransferSummary&cuCustomerStatusChangeId=" + data.CustomerStatusChangeId;
                            window.open(url, "_blank");
                        }
                    }
                ]
                , headerTemplate: "Document<br />Actions", title: "Document Actions", width: "10em", sortable: true, field: "DocumentActions"
            },
            { field: "Id", hidden: true },
            { title: "Status", field: "CurrentStatusTypeName", width: "20em", sortable: true },
            { headerTemplate: "Status Change<br />Reason", title: "Status Change Reason", field: "CustomerStatusChangeReasonName", width: "20em", sortable: true },
            { headerTemplate: "Admit/Start<br />of Care Date", title: "Admit/Start of Care Date", field: "AdmitStartCareDateText", width: "12em", sortable: true, template: function (item) { return formatKDate(item.AdmitStartCareDate); } },
            { title: "Service Hold/End of Care Date", field: "ServiceHoldEndCareDateText", width: "12em", sortable: true, template: function (item) { return formatKDate(item.ServiceHoldEndCareDate); } },
            { headerTemplate: "Resumption of<br />Care Date", title: "Resumption of Care Date", field: "ResumptionCareDateText", width: "12em", sortable: true, template: function (item) { return formatKDate(item.ResumptionCareDate); } },
            { headerTemplate: "Discharged<br />Closed Date", title: "Discharged Closed Date", field: "DischaredClosedDateText", width: "12em", sortable: true, template: function (item) { return formatKDate(item.DischaredClosedDate); } },
            { headerTemplate: "Status<br />Comments", title: "Status Comments", field: "StatusChangeComment", width: "20em", sortable: true },
            { headerTemplate: "Status<br />Change Date", title: "Status Change Date", field: "CreatedDateText", width: "12em", sortable: true, template: function (item) { return formatKDate(item.CreatedDate); } },
            { headerTemplate: "Status<br />Changed By", title: "Status Changed By", field: "CreatedByName", width: "15em", sortable: true },
            { title: "Discharge/Transfer Document Status", field: "DischargeDocumentStatus", width: "12em", sortable: true }
        ]
    });

7 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 27 Jun 2022, 08:25 AM

Hi,

By design, the sorting is not enabled for command columns. COmmand columns contain buttons for editing: Edit button, Delete button or custom ones but they are the same for all rows and do not represent data that can be sorted.

What do you expect to happen if the user clicks the command column header to sort it? If there is a valid scenario we could consider it to implement it in the future.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Brightstar
Top achievements
Rank 1
Iron
answered on 27 Jun 2022, 02:21 PM

Nikolay,

I would expect to sort on field: "DocumentActions".

 

Thank you for the explanation and quick response. 

0
Nikolay
Telerik team
answered on 28 Jun 2022, 09:33 AM

Hello,

Thank you for clarifying the case.

I am afraid soring over command columns is not enabled, however, you can implement a custom one in the header click handler using the dataSource sort() method. For example:

{ headerTemplate: "<div onclick='sort()'>Actions</div>", sortable: true, command: ["edit", "destroy"], width: "250px" }
...
      function sort() {
        var ds = $("#grid").data("kendoGrid").dataSource;
        ds.sort({ field: "ProductName", dir: "desc" });
      }

Dojo demo: https://dojo.telerik.com/aToBIsoG

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Brightstar
Top achievements
Rank 1
Iron
answered on 28 Jun 2022, 03:00 PM

That works, but I need to add directional arrow for up/down and remove when another column is sorted. 

React documentation shows there is even "onSortChange", but I need similar for Kendo for jQuery - is there working example you can provide on how to add/remove the sort arrows? Thanks in advance Nikolay.

0
Brightstar
Top achievements
Rank 1
Iron
answered on 28 Jun 2022, 04:32 PM

Based on your suggestion, I got an idea... Is this the cleanest way? onSortChange removes arrows when that column is not selected. onSortChange is called from dataBound event.


function sortCommandActions() { var ds = $("#statusGrid").data("kendoGrid").dataSource; var spanArrow = $("#statusGrid .js-document-actions-arrow"); var d = spanArrow.hasClass("k-i-sort-asc-sm") ? "desc" : "asc"; ds.sort({ field: "DocumentActions", dir: d }); } function onSortChange(e) { var ds = $("#statusGrid").data("kendoGrid").dataSource; var sort = ds.sort(); var spanArrow = $("#statusGrid .js-document-actions-arrow"); var d = null; if (sort && sort.length && sort[0].field == "DocumentActions") { d = sort[0].dir; } spanArrow.toggleClass("k-icon", d != null).toggleClass("k-i-sort-asc-sm", (d == "asc")).toggleClass("k-i-sort-desc-sm", (d == "desc")); }

dataBound: function (e) {
            $(".k-grid-addDischarge").attr("title", "Add");
            $(".k-grid-editDischarge").attr("title", "Edit");
            $(".k-grid-viewDischarge").attr("title", "View");
            onSortChange(e);
        },

 

Header template is like this


, headerTemplate: "<div onclick='sortCommandActions()' class='k-link k-link-custom '>Document<br />Actions<span class='k-icon js-document-actions-arrow'></span></div>", title: "Document Actions", width: "10em", sortable: true, field: "DocumentActions"

0
Nikolay
Telerik team
answered on 29 Jun 2022, 12:53 PM

Hello,

Thank you for the follow-up.

This looks like a valid and clean approach to me and I cannot think of any better way to achieve the command column sorting.

Can I convert this thread to a public forum? This might be useful to others facing the same scenario.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Brightstar
Top achievements
Rank 1
Iron
answered on 29 Jun 2022, 02:02 PM

Hi Nikolay,

Yes, you can make this public. I made a final tweak to allow for ascending/descending/unsort (default sort).


// move to global.js - Kendo Action column sort
function kendoActionColumnSortClickEvent(grid, spanArrow, fieldName) {
    var ds = grid.data("kendoGrid").dataSource;
    var d = spanArrow.hasClass("k-i-sort-desc-sm") ? "" : spanArrow.hasClass("k-i-sort-asc-sm") ? "desc" : "asc";
    ds.sort(d == "" ? { field: "CreatedDate", dir: "desc" } : { field: fieldName, dir: d });
}

function kendoActionColumnSortChangeEvent(grid, spanArrow, fieldName) {
    var ds = grid.data("kendoGrid").dataSource;
    var sort = ds.sort(); // get sort options
    var d = null;
    if (sort && sort.length && sort[0].field == fieldName) {
        d = sort[0].dir;
    }

    spanArrow.toggleClass("k-icon", d != null).toggleClass("k-i-sort-asc-sm", (d == "asc")).toggleClass("k-i-sort-desc-sm", (d == "desc"));
}

//#endregion

function sortCommandActions() {
    kendoActionColumnSortClickEvent($("#statusGrid"), $("#statusGrid .js-document-actions-arrow"), "DocumentActions");
}

function onSortChange(e) {
    kendoActionColumnSortChangeEvent($("#statusGrid"), $("#statusGrid .js-document-actions-arrow"), "DocumentActions");
}
        dataBound: function (e) {
            $(".k-grid-addDischarge").attr("title", "Add");
            $(".k-grid-editDischarge").attr("title", "Edit");
            $(".k-grid-viewDischarge").attr("title", "View");
            onSortChange(e);
        },

Command action column 


                , headerTemplate: "<div onclick='sortCommandActions()' class='k-link'>Document<br />Actions<span class='k-icon js-document-actions-arrow'></span></div>", title: "Document Actions", width: "10em", sortable: true, field: "DocumentActions"

Nikolay
Telerik team
commented on 30 Jun 2022, 08:15 AM

Hello,

Thank you for sharing your implementation. This thread is now public and can be found in the official Telerik for Kendo UI for jQuery forum:

https://www.telerik.com/forums/sort-on-command-column

Regards,

Nikolay

Tags
Grid
Asked by
Brightstar
Top achievements
Rank 1
Iron
Answers by
Nikolay
Telerik team
Brightstar
Top achievements
Rank 1
Iron
Share this question
or