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

1 Answer 2103 Views
Grid
Toffer
Top achievements
Rank 2
Toffer asked on 23 Oct 2015, 04:49 PM

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
Top achievements
Rank 2
commented on 26 Oct 2015, 10:12 PM

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
Telerik team
commented on 27 Oct 2015, 09:07 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Toffer
Top achievements
Rank 2
commented on 27 Oct 2015, 03:29 PM

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
Top achievements
Rank 2
commented on 27 Oct 2015, 03:36 PM

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; }
    }
}

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 29 Oct 2015, 09:58 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Toffer
Top achievements
Rank 2
commented on 02 Nov 2015, 06:22 PM

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
Top achievements
Rank 1
commented on 02 May 2017, 09:14 PM

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
Telerik team
commented on 04 May 2017, 01:24 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
neil fennessey
Top achievements
Rank 1
commented on 26 Aug 2019, 05:48 PM

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
Telerik team
commented on 28 Aug 2019, 02:26 PM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rouse
Top achievements
Rank 1
commented on 26 Mar 2020, 07:43 PM

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
Top achievements
Rank 1
commented on 26 Mar 2020, 07:48 PM

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
Telerik team
commented on 30 Mar 2020, 03:39 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Toffer
Top achievements
Rank 2
Answers by
Boyan Dimitrov
Telerik team
Share this question
or