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

Dropdownlist inside Kendo Grid

6 Answers 1328 Views
Grid
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"])
)

 

6 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.
0
Joseph
Top achievements
Rank 1
Iron
answered on 25 Mar 2022, 06:03 PM

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: "&nbsp;", 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.

        
Nikolay
Telerik team
commented on 29 Mar 2022, 09:43 AM

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

Tags
Grid
Asked by
Adarsh
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Adarsh
Top achievements
Rank 1
Neli
Telerik team
Joseph
Top achievements
Rank 1
Iron
Share this question
or