We have defined a new data source which executes a $.ajax to retrieve some data from a remote server.

Now lets consider the following scenario:

The read function is triggered and the call is made to the server but the server is being slow. In the meantime a new read request needs to be made and we want to abort the current read request and issue a new one. 

Using vanilla Jquery we just do something like 

However, I can not seem to find a similar method to abort a read request (or any request) in the Kendo Data Source Object.

Are you able to offer a solution?

 

Hello: 

I'm newer for Kendo UI for jquery. I want to use drawer widget to get remoting data.
But I found that after getting the remoting data and show on drawer content.
The drawer show/hide function will be not work (Below toggleDrawer() function is work if not performing get data).Can somebody help me?

Below is my code.

 

 <div id="toolbar"></div>

     <div id="drawer">
         <div id="drawerContainer" style="margin-left: 5px;">
         </div>
     </div>
    <script type="text/x-kendo-template" id="drawerTemplate">
        <ul>
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-icon k-i-inbox'></span>
                <span class='k-item-text' data-id='Inbox' data-url='test2.html'>
                    Inbox
                </span>
            </li>
            <li data-role='drawer-separator'></li>
            <li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li>
            <li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li>
            <li data-role='drawer-separator'></li>
            <li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li>
            <li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li>
        </ul>
    </script>
    <script>
        $(document).ready(function () {
            var drawerInstance = $("#drawer").kendoDrawer({
                mode: "push",
                template: $("#drawerTemplate").html(),
                autoCollapse: false,
                itemClick: onItemClick,
                mini: true
            }).data("kendoDrawer");

            drawerInstance.show();
        });

        function onItemClick(e) {
            var drawerName = e.item.find(".k-item-text").attr("data-id");
            //alert(drawerName);
            var nextUrl = '/api/test/inbox'
            if (drawerName == 'Inbox') {
                nextUrl = 'grid1.html'
            }
            $.ajax({
                url: nextUrl,
                method: 'GET',
                success: function (result) {
                    $('#drawerContainer').html(result);
                }
            });
        }

        function toggleDrawer() {
            var drawerInstance = $("#drawer").data().kendoDrawer;
            var drawerContainer = drawerInstance.drawerContainer;

            if (drawerContainer.hasClass("k-drawer-expanded")) {
                drawerInstance.hide();
            } else {
                drawerInstance.show();
            }
        }

        $("#toolbar").kendoToolBar({
            items: [
                { type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer },
                {
                    template: "<h3 style='margin-left: 25px;'>RA Web</h3>" },
                { type: "spacer" },
                { type: "button", icon: "information", attributes: { "class": "k-flat" } },
                { type: "button", icon: "gear", attributes: { "class": "k-flat" } }
            ]
        });
    </script>

 

Thanks.

 

I need to use two MultiSelect widgets side by side and only one will render. The second <select> element just gets completely omitted from the DOM. There are no javascript errors and both widgets are getting initialized. The second one just doesn't show up. I was unable to replicate the issue with a simple working example but I have included my HTML, the HTML that gets rendered, and my javascript for initializing the widgets. Thanks in advance for any help.

My HTML:

HTML in the DOM:

Javascript (get's called when the page loads):

 

 

Support,

I am pulling my hair out here.

I have created a Chart, all the options are correct (i have done a notepad++ compare to a exmple in this Dojo - https://dojo.telerik.com/UdezARot)

Yet for some reason, it shows the wrong values in the output. The total amount (Count) is correct, but the years are wrong and I cannot even figure out how its getting the values

For 2021 it shows 17, the total of 2020 and 2021 for example is 19....

I have attached some screen shots, as well as a DevTools rightclick copy Object from the kendoChart.options 

I cannot for the life of me, figure out what I have done wrong.

ANY HELP would be greatly appreciated.

Thanks in advance.

 

How do you display text in a grid cell that has embedded HTML so that formatting is applied to the text. Here is an example of some text:

<b>GREASE PUMP REGULATOR</b> Hand - Slowly adjust the inlet air pressure regulator to 15psi by turning the knob CW. <font color="red"><u><b>Do not exceed 15psi</b></u></font> The max rate for purging the grease is 1/2 ounce/second

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...