I use a DropDownList as an EditorTemplate in a Grid.

The problem is, that the DDL has to display several thousand entries (products).

I tried to set the PageSize of the DataSource and handle the Filter-Event. This works fine so far.  The DDL opens very fast and I can search (filter) and then select an entry, that is not visible in the list at the beginning.

This works fine for adding a new record.

But when I want to edit an existing record in the grid I get problems. When the editor opens and the value is not in the select list of the DDL, it is not selected (also not displayed) and the value of the DDL is set to null.

This behavior makes sense to me.

When I remove the PageSize from the DataSource everythings works fine. But it takes to long to open the DDL. That's why I need another solution.

I also tried the virtualization. But the problem stays the same.

Does anyone have an idea how I can solve this?

Maybe another control? Finally the user should be able to search and select a product on an easy way.

I am grateful for any idea.

How to cascade DropDownList in Grid?

I've tried a lot of stuff using JavaScript, JQuery and Ajax but I can't get this to work. I wasn't able to find an example on how to do this.

This is my code for grid and editor templates...

@(Html.Kendo().Grid<ToDestination>(Model.ToDestinations)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.ForeignKey(c => c.TravelTypeId,
                    (System.Collections.IList)ViewData["TravelTypes"], "TravelTypeId", "TravelTypeName").Title("Travel Type");

                    columns.ForeignKey(c => c.CountryId,
                    (System.Collections.IList)ViewData["Countries"], "CountryId", "CountryName").Title("Country")
                    .EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.

                    columns.ForeignKey(c => c.PlaceId,
                    (System.Collections.IList)ViewData["Places"], "PlaceId", "PlaceName").Title("Place")
                    .EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.

                    columns.Bound(c => c.PlaceName);
                    columns.Bound(c => c.CenterName);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
                })
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .DataSource(ds => ds.Ajax()
                .Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
                .Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
                .Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
                .Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
                .Model(m =>
                {
                    m.Id(id => id.ToDestinationId);
                    m.Field(tt => tt.TravelTypeId).DefaultValue(1);
                    m.Field(c => c.CountryId).DefaultValue(1);
                })
                )
                )

@model int? // Assuming CountryId is nullable

@(Html.Kendo().DropDownList()
    .Name("CountriesList")
    .DataTextField("CountryName")
    .DataValueField("CountryId")
    .BindTo((System.Collections.IEnumerable)ViewData["Countries"])
    .OptionLabel("Select a country")
    .Events(e => e.Change("onCountryChange"))
)

@model int? // Assuming PlaceId is nullable

@(Html.Kendo().DropDownList()
    .Name("PlacesList")
    .DataTextField("PlaceName")
    .DataValueField("PlaceId")
    .BindTo((System.Collections.IEnumerable)ViewData["Places"])
    .OptionLabel("Select a place")
)

This is partial view:

@model DMDPace.DataAccess.DomainModels.Department

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("Id")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetDepartments", "Home");
        });
    })
    )

That's how I reference it:

<div><partial model="@Model.Department" name="Selectors/Department"/></div>

I am using a drop down list in column template inside a grid..I could save sucessfully but when i click on edit the dropdown losses its bind.Can any one help  with what i am missing

   <kendo-dropdownlist name="Team"
                                        datatextfield="Team"
                                        datavaluefield="TeamID" data-bind="value:Team">
                        <datasource>
                            <transport>
                                <read url="@Url.Action("Teams_Read", "Grid")" />
                            </transport>
                        </datasource>
                    </kendo-dropdownlist>

i chnaged name of the dropdown to the value of what i wante dto bind but it didnt work.

I have come across scenario that I will have to hide a dropdownlist but need to send the selected value on postback.

Could some one help me with this.

Below is the sample code I am using to load the dropdownlist

Hello,

I have a DropDownList that I would like to cache based on a radio button 

@(
                    Html.Kendo().DropDownList()
                        .Name("orders")
                        .DataTextField("Companies_name")
                        .DataValueField("CompaniesId")
                        .MinLength(3)
                    .HtmlAttributes(new { style = "width:25%" })
                        .Template("#= CompaniesId # |  #= Companies_name #")
                        .Height(520)
                        .Filter(FilterType.Contains)
                        .DataSource(source =>
                        {
                            source
                            .Ajax()
                            .PageSize(80)
                            .Read("Virtualization_Read", "NewUploadAccount");
                        })
                        .Events(e =>
                        {
                            e.Change("onChange");
                    })
                        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
                        )

I have a grid that is inline editable

My problem is when the drop down appears it looks like this

Some of the items wrap around to two rows.  I would like the drop down to expand to fit the width of the text.

I looked in Chrome and I see the item is in an unnamed div that starts with this

<div class="k-animation-container"

I have tried the following in my .css to override the width of the container

.k-animation-container {
	width: auto;
}

and that doesn't seem to have any effect.

Is there a way to change the width of the drop down when it appears without changing the width of the containing column in the grid?

I can't seem to get the Cascading DropdownList functionality to return the selected value from the parent.  I will list what I have and if someone can point out my problem I would appreciate it.  The parent loads the selected items correctly, and it calls the child dropdownlist event when a new select is made, but the parameter that should have the selected id is always null.

.cshtml page

<table><tr>
        <td>CLIN:</td>
        <td>

                <kendo-dropdownlist name="ddlCLIN"  datatextfield="Title" datavaluefield="ProjectID" >
                    <datasource type="DataSourceTagHelperType.Custom">
                        <transport>
                            <read url="/LogEditor?handler=CLINS" />
                        </transport>
                    </datasource>

                </kendo-dropdownlist>
            </td>
    </tr>
    <tr>
        <td>CLIN Task Type:</td>
        <td>
            <kendo-dropdownlist name="ddlCLINTaskType" cascade-from="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID">
                <datasource type="DataSourceTagHelperType.Custom">
                    <transport>

                        <read url="/LogEditor?handler=CLINTaskTypes" />

                    </transport>
                </datasource>

            </kendo-dropdownlist>
        </td>
    </tr></table>

html.cs

Have a similar scenario as below (taken from example)
https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/faq

However, in my case, the "additionalData" method is trying to read the values from a Kendo DropDownlist, that has its own .Read method and it appears the Grid is trying to load via its Read method before the dropdown has finished loading via the controller method it calls.  How can I ensure the grids .Data method has all its vallues available before its .Read method is called.  The Dropdown's read method doesnt return in time before it returns its JSON object with one of its values is null and this causes the grid .Read method to take way too long.  

// Omitted for brevity.
    .DataSource(dataSource => dataSource.Ajax()
        .Read(read => read
            .Action("Read", "Home")
            .Data("additionalData")
        )
    )
    // Omitted for brevity.
    <script>
        function additionalData() {
            return {
                userID: 42,
                search: $("#search").val()
            };
        }
    </script>

Hello,

How do I disable popup if no DropDownList/Multiselect contains no data or filtering does not find any items using html helpers:

    @(
        Html.Kendo().DropDownList()
                  .Name("Testi")
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .BindTo(Source)
     )

If I instantate controls using jQuery I would get this done setting noDataTemplate to false:
$("#Testi").kendoDropDownList({ noDataTemplate: false, ..

On html helpers there is no option to set NoDataTemplate boolean value and setting string value empty or null does not work.

Mikko