I am having a dropdownlist inside a kendo grid. The dropdownlist is bound to the grid using template editor. The grid has got around 20K rows, and the dropdownlist has around 20K data. I am having issues in
1) displaying the data in the dropdownlist. When I click on the dropdownlist, the dropdownlist is taking time to display.
2) click on 'Add New' in the grid is taking time to add new record in the grid.
Could you please let me know the options by which we can improve the performance here?
The below code is used for binding the data to the dropdown.
@using Kendo.Mvc.UI
@{
Layout = null;
}
@(Html.Kendo().DropDownList()
.Name("Segment")
.DataValueField("SegmentID")
.DataTextField("SegmentName")
.BindTo((System.Collections.IEnumerable)ViewData["Segment"])
)
6 Answers, 1 is accepted
Having in mind the large amount of data that needs to be rendered - the slow performance or even scripting error are expected.
Our suggestion for such scenarios is to use the virtualization of both widgets. In the following online demos you can observe these implementations for the Grid and DropDownList:
Grid - https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
DropDownList - https://demos.telerik.com/kendo-ui/dropdownlist/virtualization
Hope this would help.
Regards,
Nencho
Progress Telerik
Rank 1
Thanks Nencho. I have an issue as mentioned below.
We are using the below code for loading data in a Kendo dropdown inside a grid. The data is getting loaded, but after applying filter and selecting an item in the filter only the filter data is displayed in the dropdown. The dropdown is not getting refreshed to load the entire data. Please help
@(Html.Kendo().DropDownList()
.Name("VehicleSegment") // The name of the widget should be the same as the name of the property.
.DataValueField("VehicleSegmentID") // The value of the dropdown is taken from the ID property.
.DataTextField("VehicleSegmentName") // The text of the items is taken from the EmployeeName property.
.MinLength(3)
//.OptionLabel("---Select Vehicle Segment ---")
.HtmlAttributes(new { style = "width:100%" })
.Template("#= VehicleSegmentID # | For: #= VehicleSegmentName #")
.Height(290)
//.Filter(FilterType.Contains)
.Filter("contains")
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(80)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{
transport.Read("Virtualization_Read", "Program");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
.Virtual(v => v.ItemHeight(20).ValueMapper("valueMapper"))
I have tested a DropDownList in Grid popup template and DropDownList, that is not in a Grid template. Both are working as expected on my end.
Attached you will find two sample projects. In both sample projects the DropDownList configuration is based on the provided code in this thread.
The first project (DropDownListVirtualization) contains only a DropDownList. The second sample project (Grid-DropDown-V) has a Grid and the DropDownList appears in Popop editor.
Could you please try to modify one of the sample projects in order to replicate the issue the way it is at your end? This way we could take a look locally and provide further assistance.
Regards,
Neli
Progress Telerik
Rank 1
Attached you will find a sample project of a Grid. You can edit the categories within each Grid row with inline editing. The DropDownlist configuration is in Views -> Shared -> EditorTemplates -> OrderCategory.cshtml. As you can see in the linked scrеencast, when scrolling the DropDownList items, there is additional request for every 80 elements, as it is configured in the pagesize.
I hope that the provided information will help.
Regards,
Neli
Progress Telerik
Rank 1
Iron
I am having trouble to edit kendo grid with dropdown in the grid. Can someone from Telerik help?
<div class="row">
<div class="col-md-12 mt-3">
<div id="grid"></div>
<br />
</div>
</div>
<script>
$(document).ready(function () {
});
var ddlDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: "/Home/fetchStates"
}
});
$("#grid").kendoGrid({
columns: ["name", "age", {
field: "value",
template: columnTemplateFunction
},
{ command: ["edit", "destroy"], title: " ", width: "200px" },
],
dataSource: [{
name: "Joe", age: 33, value: 1
},
{
name: "Jose", age: 36, value: 2
},
{
name: "Jack", age: 29, value: 3
}
],
toolbar: ["create"],
dataBound: function(e) {
var grid = e.sender;
var items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: ddlDataSource,
dataTextField: "displayValue",
dataValueField: "value",
change: onDDLChange
});
});
}
});
function columnTemplateFunction(dataItem) {
var input = '<input class="dropDownTemplate"/>'
return input
};
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
</script>
Without using Edit button, the value column can be changed. But what we need is to click Edit button, we should be able to edit name, age, and value column.
Hi Joseph,
Thank you for sharing the project with me.
I examined the code and noticed the following:
- The Grid data source is not configured for CRUD operations. Please check out the following article:
https://docs.telerik.com/kendo-ui/framework/datasource/crud
- The editable configuration is missing from the Grid settings:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable
- When you want to utilize the Grid to use Inline editing mode the value field (with DropDownList editor) and all other fields shall enter editing only when the Edit button is hit. Thus, you do not need the logic for the DropDownList in the dataBound event handler but in the columns.editor. For example:
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },You can find an example of setting a custom DropDownList editor in the following official demo:
You can run and edit this by clicking on Edit in Dojo:
Hope this helps.
Regards,
Nikolay