In a previous post on here, I wrote about implementing drag and drop and sorting on 2 listviews.  I've been able to resolve that issue.

The issue I'm having now is, I need to update the listview after the items have been reordered.  I have sub items under the items that are getting dragged over.  When I reorder the items, it messes up the appearance.  See the attached images.

Here are my template for the items:

<script id="selected-item-template" type="text/x-kendo-template">
    <div class="item">
        <div style="float: right;"><i class="fas fa-fw fa-trash" onclick="removeSelected('${Id}')"></i></div>${Name}
    </div>
    #= renderMySlideTemplates(data) #
</script>

<script id="sub-item-my-template" type="text/x-kendo-template">
    # $.each(data.PDFSlides, function(index, item){
    #
    <div class="sub-item">
        <input type="checkbox" name="cbxSlideSelection" value="${item.Id} " /> ${item.Title} 
    </div> #
    });
    #
</script>

Does anyone have any suggestions?

Hi,

I'm using popup editing mode for my grid model and there is one checkbox which is required. I'm encountering an issue that the checkbox doesn't seem to be validated on blur. After I checked the box, the validation message is not getting removed. Other text fields and drop down fields are working fine. How would I resolve this issue?

Hi,

My code : 

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>