kendo UI grid enable / disable command column basing on filter value

1 Answer 15 Views
Grid
Vamsi
Top achievements
Rank 1
Vamsi asked on 01 Oct 2021, 02:34 AM

Hi, I need to enable / disable command column basing on the dataOrderFilter value. if filter value is NOTTRANSFER, then the command column in the grid should be enabled. if the filter value is INTRANSIT or TRANSFER, then the command column should be disabled. how to achieve this?

 

var dataOrderFilter = [{ value: "", text: "All Orders" }, { value: "MYORDER", text: "My Orders" }, { value: "NOTTRANSFER", text: "Orders not Transferred", defaultValue: true }, { value: "INTRANSIT", text: "Orders in Transit" }, { value: "TRANSFER", text: "Orders Transferred"}];
var dataOrderSource = [{ value: 0, text: "All Orders" }, { value: 1, text: "Warehouse Orders" }, { value: 2, text: "Online Orders", defaultValue: true}];
var dataSearchType = [{ value: "", text: "Select Search" }, { value: "ORDERNUMBER", text: "Order Number" }, { value: "ORDERDATE", text: "Order Date" }, { value: "CUSTOMERNAME", text: "Customer Name" }, { value: "CUSTOMERID", text: "Customer ID"}];

$(document).ready(function () {
    initPage();
    initKendo();
    initGrid();
});

function initPage() {
    var data = callWebService("GetCountryByUser", { userId: userId }, false);
    var options = $("#ddCountry");
    $.each(data, function (i, v) {
        options.append($("<option />").val(v.value).text(v.text));
    });

    options = $("#ddOrderFilter");
    $.each(dataOrderFilter, function (i, v) {
        options.append($("<option />").val(v.value).text(v.text));

        if (v.defaultValue)
            options.val(v.value);
    });

    options = $("#ddOrderSource");
    $.each(dataOrderSource, function (i, v) {
        options.append($("<option />").val(v.value).text(v.text));

        if (v.defaultValue)
            options.val(v.value);
    });

    // search
    var options = $("#ddSearchType");
    $.each(dataSearchType, function (i, v) {
        options.append($("<option />").val(v.value).text(v.text));
    });
}

function initKendo() {
    $("#txtOrderDate").kendoDatePicker({
        format: "MM/dd/yyyy",
        max: convertStringToDate(""),
        change: txtOrderDate_onChange
    });
}

function initGridData() {
    $("#grid").data("kendoGrid").dataSource.read();
}

function initGrid() {
    var pageSize = 200;
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: function (e) {
                e.success(grid_Read(e));
            },
            destroy: function (e) {
                e.success(grid_Integrate(e));
            },
            Integrate: function (e) {
                e.success(grid_Integrate(e));
            }
        },
        error: function (e) { recordTheError(e); },
        batch: false,
        pageSize: pageSize,
        serverPaging: true,
        serverSorting: true,
        sort: { field: "orderDate", dir: "desc" },
        schema: {
            data: function (data) {
                if (data.list == undefined)
                    return data;
                else
                    return data.list;
            },
            total: function (data) {
                return data.total;
            },
            model: {
                id: "guid",
                fields: {
                    guid: { type: "string" },
                    orderNum: { type: "string" },
                    orderDate: { type: "string" },
                    custName: { type: "string" },
                    custNum: { type: "string" },
                    orderStatus: { type: "string" },
                    ppStatus: { type: "string" },
                    Transfer: { type: "boolean" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: {
            pageSize: pageSize, pageSizes: [25, 50, 200]
        },
        columns: [
            { field: "orderNum", title: "Order Number", width: "160px" },
            { field: "orderDate", title: "Order Date", width: "110px" },
            { field: "custName", title: "Customer Name" },
            { field: "custNum", title: "Customer ID", width: "120px" },
            { field: "orderStatus", title: "Order Status", width: "160px", sortable: false },
            { field: "ppStatus", title: "PickPro Status", width: "130px", sortable: false },
            { title: "Transferred<br>to AX", width: "110px", sortable: false,
                template: "<input type='checkbox' #=Transfer?'checked':'' # disabled />"
            },
            { command: [{ name: "Integrate", click: grid_Integrate}], title: 'Actions' }
            ],
        editable: "inline",
        sortable: true
    });
}

function grid_Read(e) {
    var orderFilter = $("#ddOrderFilter").val();
    var orderSource = $("#ddOrderSource").val();
    var countryId = $("#ddCountry").val();

    //search
    var searchValue = "";
    var searchType = $("#ddSearchType").val();

    switch (searchType) {
        case "ORDERDATE":
            searchValue = convertDateToString($("#txtOrderDate").data("kendoDatePicker").value());
            break;
        case "ORDERNUMBER":
            searchValue = $("#txtOrderNum").val();
            break;
        case "CUSTOMERNAME":
            searchValue = $("#txtCustomerName").val();
            break;
        case "CUSTOMERID":
            searchValue = $("#txtCustomerId").val();
            break;
    }

    //sorting
    var sortField = "";
    var sortDir = "";

    if (e.data.sort != undefined)
        $.each(e.data.sort, function (i, v) {
            sortField = v.field;
            sortDir = v.dir;
        });

    var params = { userId: userId, countryId: countryId, orderFilter: orderFilter, orderSource: orderSource,
        sortField: sortField, sortDir: sortDir, searchType: searchType, searchValue: searchValue, page: e.data.page, pageSize: e.data.pageSize
    };

    return callWebService("GetD365OrderSummaryList", params, false);
}

function grid_Delete(e) {
    var params = { orderGuid: e.data.guid, archType: "D365", userId: userId };
    callWebService("submitOrderToD365", params, false);
}

function grid_Integrate(e) {
    if (confirm('Are you sure you want to Integrate Order')) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var params = { orderNumber: dataItem.orderNum, userId: userId };
        callWebService("submitOrderToD365", params, false);
    }
    else {
        alert("Confirmed false");
    }
    initGridData();
}

function btnFilter_clicked() {
    initGridData();
    //$("#grid").data("kendoGrid").dataSource.filter({});
}

function initGridData() {
    $("#grid").data("kendoGrid").dataSource.read();
}

function btnSearch_clicked() {
    initGridData();
}

function ddSearchType_changed() {

    $(".nested-option").hide();
    //$("#btnSearch").show();

    var ddSearchType = $("#ddSearchType").val();

    switch (ddSearchType) {
        case "":
            //$("#btnSearch").hide();
            btnSearch_clicked();
            break;
        case "ORDERNUMBER":
            $("#divSearchOrderNum").show(); $("#txtOrderNum").val(""); $("#txtOrderNum").focus();
            break;
        case "ORDERDATE":
            $("#divSearchOrderDate").show(); $("#txtOrderDate").data("kendoDatePicker").value(convertStringToDate("")); $("#txtOrderDate").focus();
            break;
        case "CUSTOMERNAME":
            $("#divSearchCustName").show(); $("#txtCustomerName").val(""); $("#txtCustomerName").focus();
            break;
        case "CUSTOMERID":
            $("#divSearchCustID").show(); $("#txtCustomerId").val(""); $("#txtCustomerId").focus();
            break;
    }
}

function txtOrderDate_onChange(e) {
    var dt = e.sender;
    var value = dt.value();

    if (value === null) {
        value = kendo.parseDate(dt.element.val(), dt.options.parseFormats);
    }

    if (value < dt.min()) {
        dt.value(dt.min());
    } else if (value > dt.max()) {
        dt.value(dt.max());
    }
}

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 05 Oct 2021, 12:06 PM

Hello, Vamsi,

Based on the filter value, you can add/remove k-state-disabled class to the Grid buttons.

Let me know how that works for you.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Vamsi
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or