I am trying to achieve a layout in which all of the columns and data are stacked in one line. The data for the columns is dynamic, and each column will not have the same sets of data. Attached is a picture of the layout I am trying to achieve. Please have a look.

I've looked into the groupable functionality to achieve this, but I am still not very sure so any guidance would be greatly appreciated. Thank you so much.

I would like to increase the width of the Field selection DropDownList. When the list drops down, it is expanded enough to show all of the long field names (that is good!), but I would like to also increase the width of the control so that when a long field is selected it will show the whole name. How can I do that?

Thanks!

I have an application that has 2 ListViews.  I have one ListView that lists products and I'm able to drag the products over to the other ListView.  I'm able to drag over the items.  The issue that I'm running into is when I try to resort the items on the second ListView.  The application breaks.  I'm not sure how to fix this.

I've copied over some of my code to see if someone can spot the issue

$("#products-list").kendoListView({
selectable: "single",
dataSource: productsList,
template: kendo.template($('#item-template').html())
});

$("#products-list").kendoDraggable({
filter: ".item",
hint: function (element) {
return element.clone();
},
kendoDropTarget: "#selected-products-list",
});

$("#selected-products-list").kendoListView({
dataSource: selectedProducts,
template: kendo.template($('#selected-item-template').html())
});

$("#selected-products-list").kendoDropTarget({
drop: function (e) { // Apply the changes to the data after an item is dropped.
var draggableElement = e.draggable.currentTarget,
dataItem = productsList.getByUid(draggableElement.data("uid")); // Find the corresponding dataItem by uid.

selectedProducts.add(dataItem); 
}
});

$("#selected-products-list").kendoSortable({
filter: ".item",
cursor: "move",
placeholder: function (element) {
return element.clone().css("opacity", 0.1);
},
hint: function (element) {
return element.clone().removeClass("k-state-selected");
},
change: function (e) {
var oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = selectedProducts.data(),
dataItem = selectedProducts.getByUid(e.item.data("uid"));
selectedProducts.remove(dataItem);
selectedProducts.insert(newIndex, dataItem);
}
});

I have seen multiple articles about clearing a date picker but they don't work.  Multiple posts say this should do it:

jQuery("#datepicker").data("kendoDatePicker").value(null);

This clears the display, but it does not show the placeholder text that's there before a value is selected.  I would expect that to happen automatically when the value is set to null, but since it doesn't, how do I make that happen?

For backend I am using ServiceStack, requests are define as followed:

Code for retrieving data is as follows:

Data during read request is as follows:

Problem is that grid is not showing these data. I can see that data is here if I click on grid cell. In that situation that cell become editable and it is showing current value of data. But as soon as I move editing to some new cell previous hide data. I was inspecting cell and I have found out that when cell is not editing it is described as following:

And when cell is in edding mode it is described in html as following:

I do not know why data is not showing. From what I can tell it should show data, but it is not showing this data.

Does the kendo grid support multi-header , multi-data low layout?

I attached the table layout that I want.

Hello,

I can't seem to find a way to sort my filter values into alpha order when the values are being pulled from JSON. Previously filtername.sort() had worked when I had the JSON data directly on the page but that is not an option with this implementation. 

Live page:

https://www.ccah-alliance.org/Urgent-Visit-Providers.html

Code:

  <div id="grid"></div>

            <script>



                $(document).ready(function () {

                    var myDataSource =
                        new kendo.data.DataSource({
                            data: JSON,
                            schema: {
                                model: {
                                    fields: {
                                        "ProviderName": { type: "string" },
                                        "OfficeName": { type: "string" },
                                        "OfficeAddress": { type: "string" },
                                        "OfficeCityStateZip": { type: "string" },
                                        "PrimarySpecialty": { type: "string" },
                                        "ProviderLanguages": { type: "string" },
                                        "Hospitals": { type: "string" }
                                    }
                                }
                            },
                            transport: {
                                read: "/aspnetforms/UrgentVisitProviders.ashx"
                            },
                            pageSize: 15,
                            sort: [
                                { field: "OfficeCityStateZip", dir: "asc" },
                            ]
                        });

                    myDataSource.read();


                    $("#grid").kendoGrid({
                        dataSource: myDataSource,
                        dataBound:
                            function (e) {
                                var data = $("#grid").data("kendoGrid").dataSource._data;
                                for (i = 0; i < data.length; i++) {

                                    if (myCities.indexOf(data[i].OfficeCityStateZip) === -1) {
                                        myCities.push(data[i].OfficeCityStateZip);
                                    }

                                    if (mySpecialty.indexOf(data[i].PrimarySpecialty) === -1) {
                                        mySpecialty.push(data[i].PrimarySpecialty);
                                    }

                                    if (myLanguages.indexOf(data[i].ProviderLanguages) === -1) {
                                        myLanguages.push(data[i].ProviderLanguages);
                                    }

                                    if (myHospitals.indexOf(data[i].Hospitals) === -1) {
                                        myHospitals.push(data[i].Hospitals);
                                    }

                                }
                            },
                        columns: [{
                            field: "ProviderName",
                            title: "Provider",
                            width: 80,
                            filterable: false
                        },
                        {
                            field: "OfficeName",
                            title: "Office",
                            width: 110,
                            filterable: false

                        },
                        {
                            field: "OfficeAddress",
                            title: "Address",
                            width: 100,
                            filterable: false
                        },
                        {
                            field: "OfficeCityStateZip",
                            title: "City/State/Zip",
                            width: 105,
                            filterable: {
                                ui: cityFilter
                            }
                        },
                        {
                            field: "PrimarySpecialty",
                            title: "Specialty",
                            width: 80,
                            filterable: {
                                ui: specialtyFilter
                            }
                        },
                        {
                            field: "ProviderLanguages",
                            title: "Languages Spoken",
                            width: 85,
                            filterable: {
                                ui: languagesFilter
                            }
                        },
                        {
                            field: "Hospitals",
                            title: "Hospital",
                            width: 100,
                            filterable: {
                                ui: hospitalFilter
                            }
                        }],

                        sortable: true,
                        height: 900,
                        navigatable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    eq: "Only show"
                                }
                            }
                        },
                        pageable: {
                            alwaysVisible: true,
                            pageSizes: [5, 10, 20, 100]
                        }
                    });






                    var myCities = [];
                    var mySpecialty = [];
                    var myLanguages = [];
                    var myHospitals = [];




                    myCities.sort();
                    mySpecialty.sort();
                    myLanguages.sort();
                    myHospitals.sort();





                    function languagesFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myLanguages,
                            optionLabel: "--Select Language--"
                        });
                    }


                    function cityFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myCities,
                            optionLabel: "--Select City--"
                        });
                    }

                    function specialtyFilter(element) {
                        element.kendoDropDownList({
                            dataSource: mySpecialty,
                            optionLabel: "--Select Specialty--"
                        });
                    }

                    function hospitalFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myHospitals,
                            optionLabel: "--Select Hospital--"
                        });
                    }






                });


            </script>

Hello, I am referring to the Filters section of https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/end-user/user-guide

that describes the Sort fields spreadsheet function ("Sort range A to Z" and "Sort range Z to A" options appears when you click the filter button on the top of a column.

I would like to know how to change the javascript sorting function used for each of these options (it seems to be described on page https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.sortable in the "EXAMPLE - DEFINE CUSTOM COMPARE FUNCTION" section, but I am having difficulty getting this to work).

Thank you!

I have a grid populating local data with endless scrolling. I have a custom column with ng-repeat in template. Here the grid is duplicating values for that custom column against each data item whenever the loading of new items happens.  

Please refer attached files. 

Please check below link. In that there is Order Detail Grid and then look for custom column.

https://dojo.telerik.com/EWisALuH