kendo ui asp.net core mvc grid inline editing dropdownlist.

[Chris]

Hello - I have trouble getting an inline dropdownlist to display in my grid. I believe I have followed the examples out there, but I must be missing something. Any help would be a appreciated. When I run the app this is what I "undefined" in the cells that use a dropdownlist editor and when I click on the cell to edit a text box opens up instead of a drop down list. 

Here is my setup. (non relevant elements removed).

                            @(Html.Kendo().Grid<ETModel.Areas.Admin.Models.EventTriggerGridItem>()
                            .Name("TriggerItems")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.TriggerAction).ClientTemplate("#=TriggerAction.TriggerActionName#").Sortable(false).Filterable(false).Width(150);
                                columns.Command(command => command.Custom("Delete").Click("deleteEventTrigger")).Width(95);
                            })
                            .PersistSelection()
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Selectable()
                            .ClientDetailTemplateId("TriggerDetailTemplate")
                            .Scrollable(s => s.Height("auto"))
                            .Resizable(r => r.Columns(true))
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .Events(events => events.Error("error_handler").RequestStart("hide_validation"))
                                .Model(model =>
                                {
                                    model.Id(p => p.EventTriggerID);
                                    model.Field(p => p.TriggerAction).DefaultValue(ViewData["DefaultTriggerAction"] as GridLookupItem).Editable(true);

                                })
                                .Read(read => read.Action("EventTriggerGrid_Read", "ETModelManager", new { emodelid = Model.EModelID }))
                                .Update(update => update.Action("EventTriggerGrid_Update", "ETModelManager"))
                                .Destroy(destroy => destroy.Action("EventTriggerGrid_Delete", "ETModelManager"))
                                )
                            )


Model...

    // ETModel Builder Grid Support Classes 

    public class TriggerAction
    {
        public string TriggerActionID { get; set; }
        [UIHint("TriggerAction")]
        public string TriggerActionName { get; set; }

    }


    public class EventModelView
    {
        public List<TriggerAction> TriggerActionList { get; set; }

        public EventModelView()
        {

            
            TriggerActionList = new ModelSelectList().GridSelectList("[etm].usp_EventModelDB_GetTriggerActionList").Select(x => new TriggerAction
            {
                TriggerActionID = x.ID,
                TriggerActionName = x.Name,
            }).ToList();

        }

    }

Controller... 

            ViewData["TriggerActionList"] = emodelview.TriggerActionList;
            ViewData["DefaultActionList"] = emodelview.TriggerActionList.First();


Editor Template 

@model ETModel.Areas.Admin.Models.EventModelView
@(Html.Kendo().DropDownListFor(m => m)
    .Name("TriggerAction")
    .DataValueField("TriggerActionID")
    .DataTextField("TriggerActionName")
    .BindTo((System.Collections.IEnumerable)ViewData["TriggerActionList"])
    .OptionLabel("Select...")
    .HtmlAttributes(new { @class = "w-100" })
)

[Stoyan]

Hi Chris,

Thank you for sharing your code.

I assume you are following the Grid's Custom Editing Demo and the steps outlined in the documentation. I noticed a difference between the definition of the Model in the Demo and the shared snippet:

The Demo has the Data annotation  [UIHint("ClientCategory")] applied to the Category field of type CategoryViewModel:

        [UIHint("ClientCategory")]
        public CategoryViewModel Category
        {
            get;
            set;
        }

The class CategoryViewModel is defined separately:

    public class CategoryViewModel
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }

    }

In addition please make sure to place the EditorTemplate.cshtml file in the directory Views/Shared. Otherwise the razor engine won't be able to load it. 

 

I have applied the above to the attached sample project. If the suggestions above don't solve the reported issue, please reproduce the experienced behavior there and send it back for me to investigate further.

Regards,
Stoyan
Progress Telerik

[Chris]

Thanks Stoyan - I will take a look at your sample you attached and let you know if I get it to work.

[Chris]

Stoyan - Thanks for your sample. I was able to get my project working. As you suggested, I needed to add the actual drop down item to my grid model with the UI hint so it would bind correctly.

Grid Item Class...

[UIHint("TriggerActionInterval")]
public TriggerActionInterval TriggerActionInterval { get; set; }
[UIHint("TriggerAction")]
public TriggerAction TriggerAction { get; set; }


public class TriggerAction
{
public string TriggerActionID { get; set; }
public string TriggerActionName { get; set; }

}

public class TriggerActionInterval
{
public string TriggerActionIntervalID { get; set; }
public string TriggerActionIntervalName { get; set; }

}



One thing I was not able to get working was one of the options to the dropdownlist was null selection or an empty string. Even though I added this to the dropdownlist as and option, the grid would recognize and empty string as a change and so the selection would not be saved. I ended up working around this by adding a "None" option, but just wondered if there is a way to handle a null or empty selection in the dropdownlist.

Thanks again for your help!

[Stoyan]

Hello Chris,

I am happy I was able to help.

The DropDownList Component provides an OptionLabel configuration method that allows you to define the text of the default empty item. However when the OptionLabel is selected the TriggerAction will be equal to null. Therefore the Templating engine is unable to find a property TriggerAction.TriggerActionName and the cell remains empty.

If you'd like to avoid this you can define a separate Template that handles a scenario where the TriggerAction is null:

<script id="dropdownTemplate" type="text/x-kendo-template">
    # if ( TriggerAction  == null) { #
        "no value"
    # } else { #
        #=TriggerAction.TriggerActionName#
   # } #
</script>

Then pass the Id of the Template above to the ClientTemplateId method:

.ClientTemplateId("dropdownTemplate");

Hopefully the above helps.

Regards,
Stoyan