Trying to get filter working in DropDownListFor

[Robert]

Hi All,

We have a table for managing a business process that needs to display an item from the inventory tables. Therefore we need the column showing what Item a record will use to be a ForeignKey column. We have had various problems getting this to work, and our best solution so far is still not functional. The DropDownList just closes as soon as you click into it. It is bound with server filtering.

The column definition:

columns.ForeignKey(p => p.ItemMasterId, ds => ds.Read(r => r.Action("ItemMasters", "MasterMix")), "ItemId", "ItemName", true)
                                    .Title("Item Name").Width(500).EditorTemplateName("ItemMasterDropDownEditor");

The editor template:

@model object

@(Html.Kendo().DropDownListFor(model => model)
        .DataSource(source =>
        {
            source.Read("ItemMasters", "MasterMix").ServerFiltering();
        })
        .Filter(FilterType.Contains)
        .DataValueField("ItemId")
        .DataTextField("ItemName")
)

The server-side call:

public ActionResult ItemMasters(string text)
        {
            var itemMasters = string.IsNullOrEmpty(text) ? db.ItemMasters.OrderBy(o => o.ItemName).Select(p => new ItemMasterVM(p.Id, p.ItemName)).ToList()
                : db.ItemMasters.OrderBy(o => o.ItemName).Where(e => e.ItemName.ToLower().Contains(text.ToLower())).Select(p => new ItemMasterVM(p.Id, p.ItemName)).ToList();
            return Json(itemMasters);
        }

 

The list is working correctly showing all we need. We just can't get the dropdown to stay open and have the cursor in the filter search text box.

Thanks in advance... Bob Graham

 

[Anton Mironov]

Hello Robert,

Thank you for the details provided.

As this is a copy of a support ticket opened in our system, I am pasting the response here as well. Please keep the communication in one place.

I invested time in order to achieve the desired result. I used your code with a little change - using a normal column bound to a complex object. I would recommend using this approach instead of a ForeignKey column. Here is the needed code:

The Model:

    public class ItemMaster
    {
        public int ItemId { get; set; }

        public string ItemName { get; set; }
    }

In the ViewModel:

public ItemMaster ItemMaster { get; set; }

In the Grid:

columns.Bound(p => p.ItemMaster).ClientTemplate("#=ItemMaster.ItemName#").EditorTemplateName("ItemMasterDropDownEditor");

The EditorTemplate:

@model TelerikAspNetCoreApp6.Models.ItemMaster

@(Html.Kendo().DropDownListFor(model => model)
        .DataSource(source =>
        {
            source.Read("ItemMasters", "Grid").ServerFiltering();
        })
        .Filter(FilterType.Contains)
        .DataValueField("ItemId")
        .DataTextField("ItemName")
)

The Action Method for populating the DropDownList EditorTemplate:

public List<ItemMaster> ItemMasters(string text)
        {
            List<ItemMaster> itemMasters = new List<ItemMaster>();

            for (int i = 1; i < 6; i++)
            {
                ItemMaster item= new ItemMaster() { ItemId = i, ItemName = "ItemName " + i};
                itemMasters.Add(item);
            }

            if(text != null)
            {
                itemMasters = itemMasters.Where(item => item.ItemName.Contains(text)).ToList();
            }

            return itemMasters;
        }

Give a try to the approach above and let me know if this achieves the desired result.

Kind Regards,
Anton Mironov
Progress Telerik