There is a problem with the horizontal scrolling of a hierarchical grid. I'm actually using kendo for ASP MVC  but the problem is with the underlying UI product rather than the MVC wrappers.

Scenario

A hierarchical grid in which the child grid is wider than the parent grid. Page (or container) of the widget made narrow enough to produce the horizontal scrollbar.

Problem

When scrolling to the right, the parent grid headers stop scrolling when they are all visible. Scrolling past this point leaves the parent columns misaligned with their headers. (There is also a vertical line representing the right hand edge of the parent grid which shows through on the child grid.)

I have edited one of the Telerik demos to illustrate, see here.

I'm currently try to figure out a workaround for this but would welcome any help.

Hello,
            I have that has a function save. and 2 external templates files

The PricingViewModel is bind to template . there is another template in which the data source is not part of this . have ajax function that calls data and binds to    template has a button which want  bind to  () or how can do that?
          also tried kendo.bind() that worked. It gets bind to normal javascript function outside  but in that  get e.data !!

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