This is a migrated thread and some comments may be shown as answers.

Dropdownlist inside Kendo Grid

5 Answers 641 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Adarsh
Top achievements
Rank 1
Adarsh asked on 12 Feb 2018, 09:24 AM

 

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"])
)

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Nencho
Telerik team
answered on 14 Feb 2018, 08:17 AM
Hello Adarash,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Adarsh
Top achievements
Rank 1
answered on 14 Feb 2018, 09:19 AM

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"))

0
Neli
Telerik team
answered on 16 Feb 2018, 09:35 AM
Hi Adarsh,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Adarsh
Top achievements
Rank 1
answered on 20 Feb 2018, 11:32 AM
Thanks Neli. I am not seeing virtualization in this demo. Am I missing something?
0
Neli
Telerik team
answered on 22 Feb 2018, 11:21 AM
Hello Adarsh,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Adarsh
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Adarsh
Top achievements
Rank 1
Neli
Telerik team
Share this question
or