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

7 posts, 1 answers
  1. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 23 Oct 2015 Link to this post

    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.

  2. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 26 Oct 2015 in reply to Toffer Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 27 Oct 2015 Link to this post

    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!
     
  5. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 27 Oct 2015 Link to this post

    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. :)
  6. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 27 Oct 2015 Link to this post

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

     
  7. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Oct 2015 Link to this post

    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!
     
  8. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 02 Nov 2015 in reply to Boyan Dimitrov Link to this post

    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.  :)
Back to Top
Kendo UI is VS 2017 Ready