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

Hi,

I did update project ExampleCSVS2010 to new version of Kendo Windows ver. 2021.3.914 
After update I got error for class "ExamplesForm":
The type or namespace name  "ExamplesForm" could not 
be found (are you missing a using directive or an assembly ....)

Thanks,

Leonid

Hi, I just came into contact with Kendo UI. I think it is very powerful, especially the function of MVVM is very easy to use.

I have a question that I haven't understood. After setting the data of the datasource, you can operate on it, but the schema.model property can set the information of the data field. Is this unnecessary?

I never know the relationship between datasource and schema. Model. It seems that I don't set schema. Model and datasource works normally.

Can any engineer explain their specific links and functions? Thank you for your help.

 

Hi,

I found RadChart has been discontinued as of Q3 2014, so can I build a chart like RadChart with kendo Chart? 

Thanks,

An

I have a horizontal kendo menu (6 items across) with varying sizes of dropdowns (submenus) associated with each item. My question is how do I control the appearance of the scrollbar on those items? They're all created in a similar fashion, but a couple will display only 1 item with a scrollbar for the rest of the items, and the others will display the full list in its entirety. I'm not certain what to look for in the code that would trigger such a behavior, or if I can override in the css...   

Does Kendo support any sort of per-client throttling when it comes to SignalR?

We have a situation where there are 100s of data sources on a page attached to list views. Because these all attempt to read at once we get 414 errors and others and I suspect the easiest fix will be to prevent too many requests from happening at once.

Any ideas? I haven't been able to find a solution at the SignalR layer.

I have a kendoGrid and one of columns perform MultiColumnComboBox  when edit. I have handler the event that when press arrow key, the select cell and edited cell will move and navigate. But when move to MultiColumnComboBox field column the event arrow keyup of input also fired. How can i prevent this when popup of  MultiColumnComboBox is closed and fire normally when pop is opened. How can i resolve this?

Hi team,

A customer which uses Kendo grids has asked us to improve the default string column filter which has two fields and one boolean operand and now they want three fields (with their usual "eq", "contains"...) and two boolean operands ("and" and "or" are fine) in the same column.

I am having a bit of a hard time finding an example that manipulates the same column with three fields because everything I stumble upon uses two or three fields, either in different columns or in a templatized one.

My starting point is this code I found here and adapted to work in my local environment:

I have tried to figure out a way to use the third set of properties within the other two, to no avail.

Is there any way to achieve what I am trying to do?

Thank you very much in advance, best wishes.

Hi Team,

Autocomplete textbox should have type=search to comply with the accessibility guideline [1.3.5 identify input purpose], but i do not see any way to do so.

any help is appreciated.

I've been searching for a while now and I can't find any resources on this. Enabling or disabling a button initially can be done through the button config: https://docs.telerik.com/kendo-ui/api/javascript/ui/wizard/configuration/steps.buttons.enabled

But there seems to be no documentation on how to programmatically enable or disable these buttons. What's the best way of doing so?