Sort on Command column

[Brightstar]

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

[Nikolay]

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

[Brightstar]

Nikolay,

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

 

Thank you for the explanation and quick response. 

[Nikolay]

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

[Brightstar]

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.

[Brightstar]

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"

[Nikolay]

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

[Brightstar]

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]

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