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

[Vamsi]

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

[Martin]

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

[Vamsi]

Hi Martin

To test disabling command, I tried applying the class "k-state-disabled" in command line itself as below, but it didn't worked over there itself.

  { command: [{className: "k-state-disabled", name: "Integrate", click: grid_Integrate}], title: 'Actions' }

[Vamsi]

Hi Martin

I managed with hide / show column based on the filter value.