KendoGrid

function InitProductServicesGrid() {
    var prodServiceDataSource = new kendo.data.DataSource({
        transport: {
            type: "json",
            read:
                {
                    url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
                    type: "POST",
                    contentType: 'application/json',
                    data: GetAdditonalData,
                    datatype: "json"
                },
            create:
            {
                url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
                type: "POST",
                contentType: 'application/json',
                datatype: "json"
            },
            update:
            {
                url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
                type: "POST",
                contentType: 'application/json',
                datatype: "json"
            },
            destroy:
            {
                url: SERVER_PATH + "/LTSService/ProductsService.asmx/DeleteProductService",
                type: "POST",
                contentType: 'application/json',
                datatype: "json"
            },
            parameterMap: function (options, operations) {
                if (operations !== "read" && options !== null && options !== undefined) {
                    var productService = {};
                    if (operations === "destroy") {
                        productService = { "productService": options, "serviceIdToReplaceWith": null };
                    } else {
                        productService = { "productService": options };
                    }
                    return JSON.stringify(productService);
                }
                else {
                    // fix length to page size
                    options.pageSize = 500;
                    if (options.sort !== null && options.sort !== undefined && options.sort !== "" && options.sort.length > 0) {
                        options.sortColumn = options.sort[0].field;
                        options.direction = options.sort[0].dir;
                    }
                    else {
                        options.sortColumn = "";
                        options.direction = "";
                    }
                    return JSON.stringify(options);
                }
            }
        },
        schema: {
            data: function (result) {
                return JSON.parse(result.d);
            },
            total: function (result) {
                if (result !== undefined && result !== '' && result !== null && result.d != "[]" && result.d !== "null") {
                    return JSON.parse(result.d)[0].RowCount;
                }
                else {
                    return 0;
                }
            },
            model: {
                id: "Id",
                fields: {
                    Id: { type: "int" },
                    CategoryId: { type: "string" },
                    ServiceTypeId: { type: "string" },
                    ServiceName: { type: "string" },
                    ServiceCode: { type: "string" },
                    ShowInMemberLeft: { type: "boolean" },
                    ShowInWrapUp: { type: "boolean" },
                    ShowInPhoneCenter: { type: "boolean" },
                    ShowInKiosk: { type: "boolean" },
                    ServiceTime: { type: "string" },
                    CategoryName: { type: "string" },
                    ServiceTypeName: { type: "string" },
                    IsActive: { type: "boolean"}
                }
            }
        },
        requestEnd: function (e) {
            if (e.type === "destroy") {
                var grid = $("#productServicesGrid").data("kendoGrid");
                grid.dataSource.read();
            }
        },
        error: function (e) {
            e.preventDefault();
            if (e.xhr !== undefined && e.xhr !== null) {
                var messageBody = e.xhr.responseJSON.Message;
                ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
                var grid = $("#productServicesGrid").data("kendoGrid");
                grid.cancelChanges();
            }
        },
        pageSize: 20,
    });

    $("#productServicesGrid").kendoGrid({
        dataSource: prodServiceDataSource,
        sortable: true,
        filterable: false,
        pageable: true,
        dataBound: gridDataBound,
        editable: {
            mode: "inline",
            confirmation: false
        },
        columns: [
            { field: "Id", title: "", hidden: true },
            {
                field: "ServiceName",
                title: "Product/Service",
                sortable: true,
                editor: function (container) {
                    var serviceTxtBox = RnderProductService();
                    $(serviceTxtBox).appendTo(container);
                },
                headerTemplate: '<a class="k-link" href="#" title="Product/Service">Product/Service</a>',
                width: '25%'
            },
            {
                field: "ServiceCode",
                title: "Code",
                sortable: true,
                editor: function (container) {
                    var serviceCode = RenderServiceCode();
                    $(serviceCode).appendTo(container);
                }
            },
            {
                field: "CategoryName",
                title: "Category",
                sortable: true,
                template: "#=RenderCategoryTemplate(CategoryId,CategoryName)#",
                editor: function (container, options) {
                    var categoryDropDown = RenderCategoryName(options.model.CategoryId);
                    $(categoryDropDown).appendTo(container);
                }
            },
            {
                field: "ServiceTypeName",
                title: "Type",
                sortable: true,
                template: "#=RenderServiceTypesTemplate(ServiceTypeId, ServiceTypeName)#",
                editor: function (container, options) {
                    var typeDropDown = RenderServiceTypes(options.model.ServiceTypeId);
                    $(typeDropDown).appendTo(container);
                }
            },
            {
                field: "ShowInKiosk",
                title: "Show In Kiosk",
                sortable: false,
                template: "#=RenderYesNoTemplate(ShowInKiosk)#",
                editor: function (container, options) {
                    var kioskChkBox = RenderCheckBox(options.field);
                    $(kioskChkBox).appendTo(container);
                },
                headerTemplate: '<a class="k-link" href="#" title="Show In Kiosk">Show In Kiosk</a>'
            },
            {
                field: "ShowInMemberLeft",
                title: "Show In Left W/O Service",
                sortable: false,
                template: "#=RenderYesNoTemplate(ShowInMemberLeft)#",
                editor: function (container, options) {
                    var showMemberChkBox = RenderCheckBox(options.field);
                    $(showMemberChkBox).appendTo(container);
                },
                headerTemplate: '<a class="k-link" href="#" title="Show In Left W/O Service">Show In Left W/O Service</a>'
            },
            {
                field: "ShowInWrapUp",
                title: "Show In Wrap-Up",
                sortable: false,
                template: "#=RenderYesNoTemplate(ShowInWrapUp)#",
                editor: function (container, options) {
                    var showInWrapUpChkBox = RenderCheckBox(options.field);
                    $(showInWrapUpChkBox).appendTo(container);
                },
                headerTemplate: '<a class="k-link" href="#" title="Show In Wrap-Up">Show In Wrap-Up</a>'
            },
            {
                field: "ServiceTime",
                title: "Time Standard",
                sortable: false,
                editor: function (container, options) {
                    var serviceTimeTxtBox = RenderServiceTime();
                    $(serviceTimeTxtBox).appendTo(container);

                },
                headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
            },
            {
                title: "Action", command: [
                    {
                        name: 'startEdit',
                        click: startEdit,
                        template: "<a title='Edit' class='k-grid-startEdit k-button'><span class='k-icon k-i-edit'></span></a><a title='Update' class='k-button k-button-icontext k-primary k-grid-update' style='display:none;'><span class='k-icon k-i-check'></span></a>"
                    },
                    {
                        name: "deleteRow",
                        click: deleteRow,
                        template: "<a title='Delete' class='k-grid-deleteRow k-button'><span class='k-icon k-i-delete'></span></a><a title='Cancel' class='k-button k-button-icontext k-grid-cancel' style='display:none;'><span class='k-icon k-i-cancel'></span></a>"
                    }
                    ,
                    {
                        name: "hideRow",
                        click: hideRow,
                        template: function (dataItem) {
                            const isActive = dataItem.isActive;
                            console.log('Value: ',isActive);
                            return `<a title=${isActive ? "Hide" : "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
                        }
                    }
                    ],
                width: "120px"
            }
        ],
        save: function (e) {
            var errors = ValidateProductService(e.model);
            if (errors.length > 0) {
                e.preventDefault();
                var messageBody = GenerateMsgBody(errors);
                ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
            }
        },
        edit: function (e) {
            $(e.container).find('.k-grid-update').show().end().find('.k-grid-startEdit').hide().end().find('.k-grid-cancel').show().end().find('.k-grid-deleteRow').hide();
        },
        cancel: function (e) {
            setTimeout(function () {
                if (LOWEST_GROUP_LEVEL > 0) {
                    // though this is a redundant grid initialization,
                    // there's a limitation on the kendo grid with respect to the behavior of hidden buttons when cancelling a record.
                    // this solution was suggested here by the Telerik team
                    // https://www.telerik.com/forums/hide-edit-and-delete-button-based-on-the-status-of-each-record
                    $("#productServicesGrid").data("kendoGrid").trigger("dataBound");
                }
            });
        }
    });

    var grid = $("#productServicesGrid").data("kendoGrid");
    $("button#addProductServicesTop, button#addProductServicesBottom").click(function () {
        grid.addRow();
    });
}


function gridDataBound(e) {
    var rows = e.sender.tbody.children();
    var ss = e.sender.tbody.find(".k-grid-hideRow");
    var currentPage = e.sender.dataSource.page();
    if (rows.length == 0) {
        if (currentPage > 1) {
            this.dataSource.page(currentPage - 1);
        }
    }

    e.sender.tbody.find(".k-grid-hideRow").click(function (evt) {
        const row = $(evt.target).closest("tr");
        const dataItem = e.sender.dataItem(row);
        dataItem.set("isActive", !dataItem.isActive);
    });

}