Grid with a custom DropDownList as an editor not showing selected values

[Toffer]

Hello,

First let me start by saying thanks for your previous help on these forums...they got me past a blocking issue and everything is working now...so there's the good news.

The bad news is that even though everything is working...there are some visual glitches that I can't figure out.  The worst of those being whenever I add a new row into my grid...on this particular example I have 2 DropDownLists for selecting the values to add in for the new row.  They function perfectly, but once I select a value and move onto the next column...the DropDownList and the selected value for it disappears...the value is still there in the new row, because when I click Save and look at the Controller Action, everything is coming across perfectly and the data is added into the database with no problems...also after I click save...the columns show the values as they should...the DropDownLists are disappearing only when adding a new row.  I've attached some pictures for reference and I'll include code snippets for my grid and dropdownlist.

 In the attached pictures...notice that the columns have the little red triangle in the upper left to note that there's a new value contained...but how when I move onto the next column the DropDownList and it's selected value are hidden...

Grid View:

@using TPOReporting

@{
    ViewBag.Title = "Server Switch Feature Defect Maintenance";
    Layout = null;
}

<script>
    function grid_error(e)
    {
        if (e.errors)
        {
            var message = "There are some errors:\n";

            // Create a message containing all errors.
            $.each(e.errors, function (key, value)
            {
                if ('errors' in value)
                {
                    $.each(value.errors, function ()
                    {
                        message += this + "\n";
                    });
                }
            });

            // Display the message
            alert(message);

            // Cancel the changes
            var grid = $("#ServerSwitchFeatureDefectGrid").data("kendoGrid");
            grid.cancelChanges();
        }
    }
</script>

<div>
    <h2>Server Switch Feature Defects</h2>
    <hr size="3" />
</div>

<div>
    @(Html.Kendo().Grid<ServerSwitchFeatureDefectModel>()
        .Columns(c =>
        {
            c.Bound(ssfd => ssfd.FeatureDefectID)
                .ClientTemplate("#:FeatureDefectName#")
                .EditorTemplateName("FeatureDefectDropDownListTemplate")
                .Title("Feature Defect");
            c.Bound(ssfd => ssfd.ServerSwitchTestStatusID)
                .ClientTemplate("#:ServerSwitchTestStatusName#")
                .EditorTemplateName("ServerSwitchTestStatusDropDownListTemplate")
                .Title("Server Switch Test Status");
            c.Bound(ssfd => ssfd.BugID)
                .Title("Bug ID");
            c.Bound(ssfd => ssfd.LastUpdate)
                .Title("Last Update");
            c.Command(cmd =>
            {
                cmd.Destroy();
            });
        })
        .DataSource(ds => ds
            .Ajax()
            .Create(c => c.Action("AddServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))
            .Destroy(d => d.Action("RemoveServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))
            .Events(e => e.Error("grid_error"))
            .Model(m =>
            {
                m.Id(s => s.ID);
                m.Field(s => s.ID).Editable(false);
            })
            .Read(r => r.Action("GetServerSwitchFeatureDefects", "ServerSwitchFeatureDefect"))
            .Update(u => u.Action("UpdateServerSwitchFeatureDefect", "ServerSwitchFeatureDefect")))
        .Editable(e => e.Mode(GridEditMode.InCell))
        .HtmlAttributes(new { style = "height:300px;" })
        .Name("ServerSwitchFeatureDefectGrid")
        .Scrollable()
        .Selectable()
        .Sortable()
        .ToolBar(t =>
        {
            t.Create();
            t.Save();
        }))
</div>

FeatureDefectDropDownListTemplate:

@using TPOReporting

@(Html.Kendo().DropDownListFor(m => m)
    .DataSource(ds =>
    {
        ds.Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t =>
            {
                t.Read("GetFeatureDefects", "FeatureDefect");
            })
            .Schema(s =>
            {
                s.Data("Data")
                    .Total("Total");
            });
    })
    .DataTextField("Name")
    .DataValueField("ID")
    .Name("FeatureDefectID")
    .OptionLabel("Select Feature Defect..."))

 

ServerSwitchTestStatusDropDownListTemplate:

@using TPOReporting

@(Html.Kendo().DropDownListFor(m => m)
    .DataSource(ds =>
    {
        ds.Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t =>
            {
                t.Read("GetServerSwitchTestStatus", "ServerSwitchTestStatus");
            })
            .Schema(s =>
            {
                s.Data("Data")
                    .Total("Total");
            });
    })
    .DataTextField("DisplayName")
    .DataValueField("ID")
    .Name("ServerSwitchTestStatusID")
    .OptionLabel("Select Server Switch Test Status..."))

 

The controllers are all working perfectly so I don't think I need to include those source files, but I will gladly do it if requested. They all pass back Model objects as Json via ActionResults. Pretty standard stuff.

[Toffer]

Any thoughts on this?  It's one of the last issues I have to resolve...even though it's usable in it's current state, it looks ugly when trying to add a new row.

[Boyan Dimitrov]

Hello Toffer,

 

What I noticed in the provided code is that even if you use DropDownListFor view helper a Name is defined as well. Please note that when using the DropDownListFor view helper Name property should not be defined. 

 

By default the DropDownListFor takes the name of the model field and generated the id value for the DOM element and configure the binding. 

 

 

Please remove the following .Name("ServerSwitchTestStatusID") and .Name("FeatureDefectID") from the editor template definition. 

 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Toffer]

Thanks for your response.  I did as you suggested and removed the .Name properties from both of my DropDownListFor templates...however I'm still getting the same end result.  In the attached picture see how the Feature Defect column has the red marker, but no displayed value...and the Server Switch Test Status column shows the drow down list when the column is highlighted.

I'll attach what the current code looks like (as I've made some minor changes).  I'll also include the Model code in case that's relevant.

Grid View:

@using PhynetReporting

@{
    ViewBag.Title = "Server Switch Feature Defect Maintenance";
    Layout = null;
}

<script>
    function grid_error(e)
    {
        if (e.errors)
        {
            var message = "There are some errors:\n";

            // Create a message containing all errors.
            $.each(e.errors, function (key, value)
            {
                if ('errors' in value)
                {
                    $.each(value.errors, function ()
                    {
                        message += this + "\n";
                    });
                }
            });

            // Display the message
            alert(message);

            // Cancel the changes
            var grid = $("#ServerSwitchFeatureDefectGrid").data("kendoGrid");
            grid.cancelChanges();
        }
    }
</script>

<div>
    <h2>Server Switch Feature Defects</h2>
    <hr size="3" />
</div>

<div>
    @(Html.Kendo().Grid<ServerSwitchFeatureDefectModel>()
        .Columns(c =>
        {
            c.Bound(ssfd => ssfd.FeatureDefectID)
                .ClientTemplate("#:FeatureDefectName#")
                .EditorTemplateName("FeatureDefectDropDownListTemplate")
                .Title("Feature Defect");
            c.Bound(ssfd => ssfd.ServerSwitchTestStatusID)
                .ClientTemplate("#:ServerSwitchTestStatusName#")
                .EditorTemplateName("ServerSwitchTestStatusDropDownListTemplate")
                .Title("Server Switch Test Status");
            c.Bound(ssfd => ssfd.BugID)
                .Title("Bug ID");
            c.Bound(ssfd => ssfd.LastUpdate)
                .Title("Last Update");
            c.Command(cmd =>
            {
                cmd.Destroy();
            });
        })
        .DataSource(ds => ds
            .Ajax()
            .Create(c => c.Action("AddServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))
            .Destroy(d => d.Action("RemoveServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))
            .Events(e => e.Error("grid_error"))
            .Model(m =>
            {
                m.Id(s => s.ID);
                m.Field(s => s.ID).Editable(false);
            })
            .Read(r => r.Action("GetServerSwitchFeatureDefects", "ServerSwitchFeatureDefect"))
            .Update(u => u.Action("UpdateServerSwitchFeatureDefect", "ServerSwitchFeatureDefect")))
        .Editable(e => e.Mode(GridEditMode.InCell))
        .HtmlAttributes(new { style = "height:300px;" })
        .Name("ServerSwitchFeatureDefectGrid")
        .Navigatable()
        .Scrollable()
        .Selectable(s => s.Type(GridSelectionType.Cell))
        .Sortable()
        .ToolBar(t =>
        {
            t.Create();
            t.Save();
        }))
</div>

FeatureDefectDropDownListTemplate:

@using PhynetReporting

@(Html.Kendo().DropDownListFor(m => m)
    .DataSource(ds =>
    {
        ds.Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t =>
            {
                t.Read("GetFeatureDefects", "FeatureDefect");
            })
            .Schema(s =>
            {
                s.Data("Data")
                    .Total("Total");
            });
    })
    .DataTextField("Name")
    .DataValueField("ID")
    .OptionLabel("Select Feature Defect..."))

ServerSwitchTestStatusDropDownListTemplate:

@using PhynetReporting

@(Html.Kendo().DropDownListFor(m => m)
    .DataSource(ds =>
    {
        ds.Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t =>
            {
                t.Read("GetServerSwitchTestStatus", "ServerSwitchTestStatus");
            })
            .Schema(s =>
            {
                s.Data("Data")
                    .Total("Total");
            });
    })
    .DataTextField("DisplayName")
    .DataValueField("ID")
    .OptionLabel("Select Server Switch Test Status..."))

 ServerSwitchFeatureDefectModel:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PhynetReporting
{
    public class ServerSwitchFeatureDefectModel
    {
        [DefaultValue(0)]
        public int ID { get; set; }

        [DefaultValue(0)]
        public int FeatureDefectID { get; set; }

        [DefaultValue("")]
        public string FeatureDefectName { get; set; }

        [DefaultValue(0)]
        public int ServerSwitchTestStatusID { get; set; }

        [DefaultValue("")]
        public string ServerSwitchTestStatusName { get; set; }

        [DefaultValue("")]
        public string BugID { get; set; }

        [DefaultValue(typeof(DateTime), "1-1-1900")]
        public DateTime LastUpdate { get; set; }
    }
}

Thanks again for the help. :)

[Toffer]

Hey Boyan,

 

Thanks for your response.  I did as you suggested and removed the .Name properties from my DropDownListFor templates, however in the attached graphic you can see that I'm still having the same problem.  Any other thoughts as to what I could be missing?  I'm going to put my code snippets up again as I've made some minor changes and I'll include the Model this time in case that's relevant.

 

Grid View:

@using PhynetReporting

@{
    ViewBag.Title = "Server Switch Feature Defect Maintenance";
    Layout = null;
}

<script>
    function grid_error(e)
    {
        if (e.errors)
        {
            var message = "There are some errors:\n";

            // Create a message containing all errors.
            $.each(e.errors, function (key, value)
            {
                if ('errors' in value)
                {
                    $.each(value.errors, function ()
                    {
                        message += this + "\n";
                    });
                }
            });

            // Display the message
            alert(message);

            // Cancel the changes
            var grid = $("#ServerSwitchFeatureDefectGrid").data("kendoGrid");
            grid.cancelChanges();
        }
    }
</script>

<div>
    <h2>Server Switch Feature Defects</h2>
    <hr size="3" />
</div>

<div>
    @(Html.Kendo().Grid<ServerSwitchFeatureDefectModel>()
        .Columns(c =>
        {
            c.Bound(ssfd => ssfd.FeatureDefectID)
                .ClientTemplate("#:FeatureDefectName#")
                .EditorTemplateName("FeatureDefectDropDownListTemplate")
                .Title("Feature Defect");
            c.Bound(ssfd => ssfd.ServerSwitchTestStatusID)
                .ClientTemplate("#:ServerSwitchTestStatusName#")
                .EditorTemplateName("ServerSwitchTestStatusDropDownListTemplate")
                .Title("Server Switch Test Status");
            c.Bound(ssfd => ssfd.BugID)
                .Title("Bug ID");
            c.Bound(ssfd => ssfd.LastUpdate)
                .Title("Last Update");
            c.Command(cmd =>
            {
                cmd.Destroy();
            });
        })
        .DataSource(ds => ds
            .Ajax()
            .Create(c => c.Action("AddServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))
            .Destroy(d => d.Action("RemoveServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))
            .Events(e => e.Error("grid_error"))
            .Model(m =>
            {
                m.Id(s => s.ID);
                m.Field(s => s.ID).Editable(false);
            })
            .Read(r => r.Action("GetServerSwitchFeatureDefects", "ServerSwitchFeatureDefect"))
            .Update(u => u.Action("UpdateServerSwitchFeatureDefect", "ServerSwitchFeatureDefect")))
        .Editable(e => e.Mode(GridEditMode.InCell))
        .HtmlAttributes(new { style = "height:300px;" })
        .Name("ServerSwitchFeatureDefectGrid")
        .Navigatable()
        .Scrollable()
        .Selectable(s => s.Type(GridSelectionType.Cell))
        .Sortable()
        .ToolBar(t =>
        {
            t.Create();
            t.Save();
        }))
</div>

FeatureDefectDropDownListTemplate:

@using PhynetReporting

@(Html.Kendo().DropDownListFor(m => m)
    .DataSource(ds =>
    {
        ds.Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t =>
            {
                t.Read("GetFeatureDefects", "FeatureDefect");
            })
            .Schema(s =>
            {
                s.Data("Data")
                    .Total("Total");
            });
    })
    .DataTextField("Name")
    .DataValueField("ID")
    .OptionLabel("Select Feature Defect..."))

ServerSwitchTestStatusDropDownListTemplate:

@using PhynetReporting

@(Html.Kendo().DropDownListFor(m => m)
    .DataSource(ds =>
    {
        ds.Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t =>
            {
                t.Read("GetServerSwitchTestStatus", "ServerSwitchTestStatus");
            })
            .Schema(s =>
            {
                s.Data("Data")
                    .Total("Total");
            });
    })
    .DataTextField("DisplayName")
    .DataValueField("ID")
    .OptionLabel("Select Server Switch Test Status..."))

ServerSwitchFeatureDefectModel:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PhynetReporting
{
    public class ServerSwitchFeatureDefectModel
    {
        [DefaultValue(0)]
        public int ID { get; set; }

        [DefaultValue(0)]
        public int FeatureDefectID { get; set; }

        [DefaultValue("")]
        public string FeatureDefectName { get; set; }

        [DefaultValue(0)]
        public int ServerSwitchTestStatusID { get; set; }

        [DefaultValue("")]
        public string ServerSwitchTestStatusName { get; set; }

        [DefaultValue("")]
        public string BugID { get; set; }

        [DefaultValue(typeof(DateTime), "1-1-1900")]
        public DateTime LastUpdate { get; set; }
    }
}

 

[Boyan Dimitrov]

Hello Toffer,

 

Actually I found what is causing the problem. In the model definition you have two separate properties: FeatureDefectID  and FeatureDefectName. In the current configuration the editor template will update the FeatureDefectID  field of the model (the column is bound to the FeatureDefectID  and the editor template is defined for this column). So basically the FeatureDefectName will not be updated in any way using this editor template, but it is displayed in the cell (.ClientTemplate("#:FeatureDefectName#")). 

 

My suggestion is to modify the model configuration to have custom object (this object to have two properties : name and value). We have an example of this approach that uses Category object in order to hold the CategoryName and CategoryID. It shows the CategoryName using the template definition.   

 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Toffer]

Yeah...that's what the problem was.  I changed my model to only use the name instead of the ID and had to change some of my logic in the LINQ to SQL classes, but overall I made it work just fine.  Thanks for your help in digging out what the problem was.  :)

[Thomas]

Hey your example doesnt have all the cs specifically the Views/Shared/EditorTemplate   I cant get the demos to run locally from the control panel how else do we get access to this code?

[Boyan Dimitrov]

Hello,

Please refer to the editor template code below: 

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

Regards,
Boyan Dimitrov
Telerik by Progress

[neil fennessey]

Hello,

 

I am also facing issue for editing in Kendo grid with ASP.Net Core.

I used same technique and when I click on edit button in grid drop down comes with bind value but when I click on update button it's not giving me the other selected item in drop down and only giving me already selected item , while in text box values giving me latest updated item.

 

Please help.

[Boyan Dimitrov]

Hello,

As far as I understand after switching a specific row to edit mode you are able to select an item from the DropDownList editor, but after clicking on the update button the text for the item remains the same as the one before selecting the new item from the DropDownList? 

Either way we would need to investigate the specific case and we would need a runnable sample project where the issue can be replicated. 

Regards,
Boyan Dimitrov
Progress Telerik

[Rouse]

Hello Team,

I am kind of having same issues. I followed all the steps listed in

https://demos.telerik.com/aspnet-mvc/grid/editing-custom.

Firstly i was getting error that when ever i click on the grid it never open the drop down instead it will show only [object Object]. then after going through multiple google research found some thing like need to add the nullable load

 

@using Kendo.Mvc.UI
@model abcd.efg.hijmodel


@(Html.Kendo().DropDownListFor(m=>m)
                .DataValueField("Id")
                .DataTextField("Desc")
                .HtmlAttributes(new { data_bind = "nullableValue: Id" })
                .BindTo((System.Collections.IEnumerable)ViewData["DDLSource"])                
);

Grid

 @(Html.Kendo().Grid(Model.data).Name("datagrid")
                        .Columns(columns =>
                        {
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
                            columns.Bound(c => c.Col1).Title("Col1").Width(100);
                            columns.Bound(c => c.Col2).Title("Col2").Width(100);
                           
                            columns.Bound(c =>c.ddl).ClientTemplate("#=ddl.Desc#").Sortable(false).Width(100);
                        }
                        )
                        .ToolBar(toolbar =>
                        {
                            toolbar.Create();
                        })
                        .HtmlAttributes(new { style = "height: 350px; width:100%;" })
                        .Editable(editable=>editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
                        .Sortable()
                        .Scrollable()
                        .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true))
                        .DataSource(ds => ds.Ajax()
                        .Events(events =>
                        {
                            events.Error("Error");
                        }
                            )
                        .PageSize(10)
                        .ServerOperation(false)
                        .Read(read => read.Action("GridGet", "Example"))
                        .Model(model =>
                        {
                            model.Id(pp => pp.Col1);
                            model.Id(pp => pp.Col2);
                            model.Field(y => y.ddl).DefaultValue(ViewData["defaultDDLSource"] as
                                   abcd.efg.hijmodel);
                        }
                            )
                        .Update(update => update.Action("GridUpdate", "Example"))
                        .Create(create => create.Action("GridAdd", "Example"))
                        .Destroy(destroy => destroy.Action("GridDelete", "Example"))

                  )
                        )

Model

public class

{

  [UIHint("customtemplate")]
        public hijmodel ddl
        {

{get;set;}
        }

}

[Rouse]

I did press the post  by mistake. please find below the remaining.

Controller 

Index()

{

ViewData[DDLSource] = this.datasource -- list<hijmodel>()

ViewData[defaultDDLSource]  = this.datasource.firstordefault();

 

 

}

 

Now the issue is. When i click add row 

the drop down in the grid is showing default value, but after selecting any values from the drop down its not returning back to the initial label like the selectied value is not showing in the grid when in the non edit model.

 

Any help is appreciated. Thanks

[Alex Hajigeorgieva]

Hi, Rouse,

Thank you for the provided code snippets.

The reason for the described behaviour which I expect would also occur in edit mode, not just create is the custom attribute that is added, namely:

.HtmlAttributes(new { data_bind = "nullableValue: Id" })

What this is going to do is tell the model to bind its value to that field - nullableValue. And it appears that you wish to bind it to the ddl field and that the nullableValue field does not exist from what I can tell.

If you get "[Object object]" while editing, then that means the editor is not generated.

For further information, you can check this article which features step by step implementation of a custom editor:

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/editor-templates

Finally, it appears that the grid and data source are misconfigured. On one hand, the grid is configured for InCell/Batch editing in its editable configuration, however the columns have an edit command. On the other hand, the Data SOurce is not configured for Batch operations. You can take a look at the two options here:

https://demos.telerik.com/aspnet-mvc/grid/editing

https://demos.telerik.com/aspnet-mvc/grid/editing-inline

Kind Regards,
Alex Hajigeorgieva
Progress Telerik