Is there a way to reload the children of a node when it's expanded. Similar to what's shown in the treeview docs? 

http://docs.telerik.com/kendo-ui/controls/navigation/treeview/overview#reload-child-nodes-when-nodes-expand

When I do it the way that's shown in the docs it shows duplicate nodes in the treeview. Here's a dojo showing what happends:

http://dojo.telerik.com/eBAjEg

thank you in advise.

I have a grid, which has a double click, in turn creates a Edit popup, which houses multiple dropdowns.

On edit calls the datasource loaders for each dropdown.

All is well how ever, receiving this on the loading of the dropdowns:

stack "Error: jQuery1123047111043296889754_1506004893382 was not called\n   at error (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:2:1808)\n   at b.converters.script json (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:28737)\n   at Xb (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:19067)\n   at y (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:22513)\n   at c (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:26989)"

with the returning data being:

responseText "[{\"Vendor_Key\":1,\"VendorName\":\"Diebold\"},{\"Vendor_Key\":2,\"VendorName\":\"NCR\"},{\"Vendor_Key\":3,\"VendorName\":\"WINCOR\"}]"

I have used this before in other applications, but not in 2017.3.913.

the code related:

<script id="ModifyInventoryTemplate" type="text/x-kendo-tmpl">
    <form id="modifyinventoryform" >
        <div id="inputWindow" class="responsive-table-line" style="margin:0px 25px 0px; width:650px; height:300px">
            <table class="auto-style2" cellpadding="1" cellspacing="1">
                <tbody>
                    <tr>
                        <td>
                            <div >
                                <label for="serialnumbertext">Serial Number:</label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input id="serialnumbertext" name="serialnumber" data-bind="value:SerialNumber" required />
                                <span class="k-invalid-msg" data-for="serialnumbertext"></span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <label for="terminalnumbertext">Terminal ID:</label>
                            </div>
                        </td>
                        <td>
                            <div >
                                <input id="terminalidtext" name="terminalid" data-bind="value:Terminal_ID" required />
                                <span class="k-invalid-msg" data-for="terminalidtext"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <label for="manufacturertext">Manufacture:</label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input  id="manufacturertext" name="manufacturer" data-bind="value:VendorName" required/>
                                <span class="k-invalid-msg" data-for="manufacturertext" />
                            </div>
                        </td>
                        <td>
                            <div>
                                <label for="modeltext">Model: </label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input id="modeltext" name="model" data-bind="value:ModelName" />
                                <span class="k-invalid-msg" data-for="modeltext" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <label for="acquisitiontext">Ownership:</label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input id="acquisitiontext" name="acquisition" data-bind="value:AcquisitionDescription" />
                                <span class="k-invalid-msg" data-for="acquisitiontext" />
                            </div>
                        </td>
                        <td>
                            <div>
                                <label for="costcentertext">CostCenter:</label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input id="costcentertext" name="costcenter" data-bind="value:CostCenter" />
                                <span class="k-invalid-msg" data-for="costcentertext" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <label for="lifecyclestatustext">Lifecycle Status:</label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input id="lifecyclestatustext" name="lifecyclestatus" data-bind="value:LifecycleDescription" />
                                <span class="k-invalid-msg" data-for="lifecyclestatustext" />
                            </div>
                        </td>
                        <td>
                            <div>
                                <label for="statuscodetext">Status Code:</label>
                            </div>
                        </td>
                        <td>
                            <div>
                                <input id="statuscodetext" name="statuscode" data-bind="value:StatusCode" />
                                <span class="k-invalid-msg" data-for="statuscodetext" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                            <td colspan="2">&nbsp;</td>
                            <td>
                                <label for="onnetworkcheck">On Network:</label>
                            </td>
                            <td>
                                <div>
                                    <input type="checkbox" id="onnetworkcheck" disabled name="onnetwork" #if(OnNetwork) { #checked="checked"#}# data-bind="value:OnNetwork"  />
                                </div>
                            </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="border: solid 1px black; ">
                            <table class="auto-style2" cellpadding="1">
                                <tr>
                                    <td width="95px">
                                        <div>
                                            <label for="sitecodetext2">Site Code:</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div >
                                            <input id="sitecodetext2" name="sitecode" data-bind="value:SiteCode"  />
                                            <span class="k-invalid-msg" data-for="sitecodetext2" />
                                        </div>
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td width="95px">
                                        <div >
                                            <label for="locationtext">Location:</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <input id="locationtext" name="location" data-bind="value:LocationName" />
                                            <span class="k-invalid-msg" data-for="locationtext" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td >
                                        <div>
                                            <label for="addresstext">Address:</label>
                                        </div>
                                    </td>
                                    <td width="175px">
                                        <div >
                                            <input id="addresstext" name="address" data-bind="value:Address" />
                                            <span class="k-invalid-msg" data-for="addresstext" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <table>
                                            <tr>
                                                <td>
                                                    <div >
                                                        <label for="citytext">City:</label>
                                                    </div>
                                                </td>
                                                <td width="150px">
                                                    <div >
                                                        <input id="citytext" name="city" data-bind="value:City" />
                                                        <span class="k-invalid-msg" data-for="citytext" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div >
                                                        <label for="statetext">State:</label>
                                                    </div>
                                                </td>
                                                <td width="40">
                                                    <div>
                                                        <input id="statetext" name="state" data-bind="value:State" />
                                                        <span class="k-invalid-msg" data-for="statetext" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <label for="zipcodetext">ZipCode:</label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <input id="zipcodetext" name="zipcode" data-bind="value:ZipCode" />
                                                        <span class="k-invalid-msg" data-for="zipcodetext" />
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
</form>
</script>
<script>
function dataSource_error(e) {
    alert(e.status); // displays "error"
}
</script>
<script>
    function initDropDownLists() {

        var categories = $("#manufacturertext").kendoDropDownList({
            height:"25px",
            optionLabel: "Select Type...",
            dataTextField: "VendorName",
            dataValueField: "Vendor_Key",
            dataSource: {
                serverFiltering: true,
                type: "odata",
                transport: {
                    read: "/Home/GetVendors",
                    type:"get",
                    dataType:"json"
                },
               
                schema: {
                    data: function (data) {
                        return data.value;
                    },
                    total: function (data) {
                        return data['odata.count'];
                    },
                },
            }
        }).data("kendoDropDownList");
        categories.dataSource.bind("error", dataSource_error);   
       
        var products = $("#modeltext").kendoDropDownList({
            optionLabel: "Select catagory...",
            dataTextField: "ModelName",
            dataValueField: "Model_Key",
            dataSource: {
                serverFiltering: true,
                type: "odata",
                transport: {
                    read: "/Home/GetModels",
                    type: "get",
                    dataType: "json"
                },
                schema: {
                    data: function (data) {
                        return data.value;
                    },
                    total: function (data) {
                        return data['odata.count'];
                    },
                },
            }
        }).data("kendoDropDownList");
        var orders = $("#acquisitiontext").kendoDropDownList({
            optionLabel: "Select answer...",
            dataTextField: "AcquisitionDescription",
            dataValueField: "AcquisitionType_Key",
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: "/Home/GetAcquisitions",
                    type: "get",
                    dataType: "json"
                },
                schema: {
                    data: function (data) {
                        return data.value;
                    },
                    total: function (data) {
                        return data['odata.count'];
                    },
                },
            }
        }).data("kendoDropDownList");
        var orders = $("#costcentertext").kendoDropDownList({
            autoBind: false,
            optionLabel: "Select cost center...",
            dataTextField: "CostCenter",
            dataValueField: "CostCenter_Key",
            dataSource: {
                serverFiltering: true,
                type: "odata",
                transport: {
                    read: "/Home/GetCostCenter",
                    type: "get",
                    dataType: "json"
                },
                schema: {
                    data: function (data) {
                        return data.value;
                    },
                    total: function (data) {
                        return data['odata.count'];
                    },
                },
            }
        }).data("kendoDropDownList");
        var orders = $("#lifecyclestatustext").kendoDropDownList({
            autoBind: false,
            optionLabel: "Select cost center...",
            dataTextField: "LifecycleDescription",
            dataValueField: "LifecycleStatus_Key",
            dataSource: {
                serverFiltering: true,
                type: "odata",
                transport: {
                    read: "/Home/GetLifecycleStatus",
                    type: "get",
                    dataType: "json"
                },
                schema: {
                    data: function (data) {
                        return data.value;
                    },
                    total: function (data) {
                        return data['odata.count'];
                    },
                },
            }
        }).data("kendoDropDownList");
        var orders = $("#statuscodetext").kendoDropDownList({
            autoBind: false,
            optionLabel: "Select cost center...",
            dataTextField: "StatusCode",
            dataValueField: "StatusCode_Key",
            dataSource: {
                serverFiltering: true,
                type: "odata",
                transport: {
                    read: "/Home/GetStatusCodes",
                    type: "get",
                    dataType: "json"
                },
                schema: {
                    data: function (data) {
                        return data.value;
                    },
                    total: function (data) {
                        return data['odata.count'];
                    },
                },
            }
        }).data("kendoDropDownList");
    }
</script>

Thank you

I have a grid with a custom filter on one column 

    @(Html.Kendo().Grid<Model>()

          .Name("grid")

         .Events(e => e.FilterMenuInit("FilterMenuInit"))

          .Columns(columns =>

          {

…

              columns.Bound(e => e.DocumentType).Title("Title").Filterable(x => x.UI("SomeFunction")

                  .Extra(false)

                  .Operators(k => k

                      .ForString(str => str.Clear()

                          .IsEqualTo("Is equal to")

                          .IsNotEqualTo("Is not equal to")

                      ))

                  );

              columns.Bound(e => e.Something).Title("Title").Filterable(false);

              columns.Bound(e => e.SomethingElse).Title("AnotherTitle").Width(50);

…

          })

          .Filterable()

          .Sortable()

          .Pageable(x =>

          {

          ...

          })

          .DataSource(dataSource => dataSource

            ...

          )

    )

the dropdownllist of the filter has all the distinct values that are in the column

    function SomeFunction (element) {

        const distinctDocTypes = GetDistinctDocTypes();

        element.kendoDropDownList({

            dataSource: distinctDocTypes,

            optionLabel: "Select Doc Type",

            dataTextField: "Title",

            dataValueField: "Title",

            open: AdjustDropDownWidth

        });

    }

        private getDistinctDocTypes() {

            const data = $("#grid").data("kendoGrid").dataSource.data();

            const docTypes = (a => {

                var seen = {};

                return a.filter(e => seen[e.DocumentType] ? false : (seen[e.DocumentType] = true)).map(e => ({

                    Title: e.DocumentType

                }));

            })(data);

            return docTypes.sort((a, b) => a.Title.localeCompare(b.Title));

        }

THis works fine.

The thing is, if there is a refresh of the page and the number of distinct values is greater, i just want to add, not take, it does not change in the dropdown.

How can I reflect that change? Is there a event I can capture or so?

I am using Kendo JSP upload tag to upload files in my page. When i use Kendo upload button without any styles, it is not coming next to my file to upload label and it is displayed in the bottom of file to upload label. I want both file to upload and select file button align in the same line (please check the attachment). when i add the styles to kendo upload button, which changes the display of other input fields in my page. One more thing, when i use this button i am not able to see the file i selected, which comes default when their is no styles (please see uploadPage.PNG file). But when i add 

.k-upload{
    display: inline-block;
    min-width: 26em;
    max-width: 26em;
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}    

this css class, it is not showing the file i selected. I want both file to upload and select file in the same line and show the file i selected inside the select file box by restricting user to upload 1 file at a time. Please help me on this, as i am newbie to kendo.

Please specify is their any reference which we can use to align kendo upload button properly with other buttons and labels by changing its default width/height.

Thanks,

Srujana

I have an AutoComplete being populated when I select a value from a dropdownlist. Its fine the first time I select a value from a dropdownlist, but when I change my mind and select a different value the AutoComplete overlaps itself, and then gets a blue border..How do I stop the Autocomplete from overlapping itself, when I select a different value from the dropdownlist?

Here is the code

Hi team,

How do I change a spreadsheet's options after it's initialized? E.g. I want to change columns width every time I change data fetch. I tried: 

This doesn't seems to work at all.

Best,

Anna

Hello,

     I just noticed with Kendo UI 2017.3.913 that app.showLoading(); now hides on its own.  Is this correct, and what is the default timeout?

Thank you.

I want the calendar to display 3 months instead of 1. 

Also, the user should be able to multi select the dates in these 3 months.

What is the way to implement this?

Thanks.

Hi I have a grid in a panel that is collapsible , After collapsing it once and expanding it back again the Grid pager keeps on breaking , it either completely disappears or shows few icons or color . I only get this issue on IE . Its like the color and icons don't load even if the elements are present and appears right after i hover on them.

<div class="panel-collapse collapse in" aria-expanded="true">
                <div class="panel-body">
  
<div class="row">
    <div class="col-md-12">
        <div class="k-grid k-widget k-display-block k-reorderable" style="touch-action: none;" data-role="grid"><div class="k-grid-header" style="padding-right: 17px;">

        <div class="k-grid-header-wrap k-auto-scrollable" style="touch-action: none;" data-role="resizable"><table role="grid"><colgroup><col style="width: 171px;"><col style="width: 866px;"></colgroup><thead role="rowgroup"><tr role="row"><th class="k-header k-with-icon" role="columnheader" aria-haspopup="true" style="display: none;" rowspan="1" scope="col" data-role="columnsorter" data-index="0" data-groupable="false" ><a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#"><span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">supplier Key</a></th>

        <th class="k-header k-with-icon" id="eee9c67b-6b9f-406b-a7bb-0eff143ce03f" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-index="1" data-groupable="false" data-title="Number" ><a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#">

        <span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">Number</a></th>
        <th class="k-header k-with-icon" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-role="columnsorter" data-index="2" data-groupable="false" data-title="Name">
        <a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#">
        <span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">Name</a></th></tr></thead></table></div></div>


        <div class="k-grid-content k-auto-scrollable"><table class="k-selectable" role="grid" style="touch-action: none;" data-role="selectable"><tbody role="rowgroup">
        <tr role="row" data-uid="4ed3b8d6-6a84-4b24-a282-a06855c2c8be"><td role="gridcell" style="display: none;"></td><td role="gridcell">901176</td><td role="gridcell">Albert</td><td role="gridcell" style="display: none;">1155 Commerce Blvd</td></tr></tbody></table></div>


        <div class="k-pager-wrap k-grid-pager k-widget k-floatwrap" data-role="pager"><a tabindex="-1" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" aria-label="Go to the first page" href="#" data-page="1">
        <span class="k-icon k-i-seek-w"></span></a><a tabindex="-1" title="Go to the previous page" class="k-link k-pager-nav  k-state-disabled" aria-label="Go to the previous page" href="#" data-page="1"><span class="k-icon k-i-arrow-w"></span></a><ul class="k-pager-numbers k-reset"><li class="k-current-page"><span class="k-link k-pager-nav">1</span></li><li><span class="k-state-selected">1</span></li></ul><a tabindex="-1" title="Go to the next page" class="k-link k-pager-nav  k-state-disabled" aria-label="Go to the next page" href="#" data-page="1"><span class="k-icon k-i-arrow-e"></span></a><a tabindex="-1" title="Go to the last page" class="k-link k-pager-nav k-pager-last k-state-disabled" aria-label="Go to the last page" href="#" data-page="1"><span class="k-icon k-i-seek-e"></span></a><span class="k-pager-sizes k-label"><span tabindex="0" title="" class="k-widget k-dropdown k-header" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-activedescendant="5f49d1c3-a6fa-40d8-b943-42d71e570d1a" aria-owns="" unselectable="on"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">20</span><span class="k-select" aria-label="select" unselectable="on"><span class="k-icon k-i-arrow-60-down"></span></span></span><select style="display: none;" aria-label="20" data-role="dropdownlist"><option value="10">10</option><option selected="selected" value="20">20</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select></span>items per page</span><a title="Refresh" class="k-pager-refresh k-link" aria-label="Refresh" href="#"><span class="k-icon k-i-reload"></span></a><span class="k-pager-info k-label">1 - 3 of 3 items</span></div></div>
    </div>
</div>
</div>
</div>