This is a migrated thread and some comments may be shown as answers.
Grid Add/Edit popup not defaulting dropdown
13 Answers 265 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 27 Apr 2015, 10:30 PM

I have a simple grid with Add/Edit functionality enabled and it's using the popup grid edit mode.  When in that mode, a drop down is not setting the selected value as it should.  If I use inline, everything works like a charm. 

 

When the add/edit form is rendered, the selected value for the record is not being set in the drop down.  When you submit the form, the value is always correct.  The default value is sent when the selected value drop down list was not changed.  The same goes for editing (value being the previously saved value).

 

This behavior seems to only happen on combo boxes and drop down lists and it's limited to the popup form.  Below is my view, editor template, and the model.  The field in question is Chaperone.

Thank You!

View:

<%= Html.Kendo().Grid<ChaperoneLogViewModel>()
        .Name("ChaperoneLog")
        .DataSource(datasource => datasource.Ajax()
            .Read("Select", "ChaperoneLogList")
            .Update("Update", "ChaperoneLogList")
            .Create("Create", "ChaperoneLogList")
            .Destroy("Delete", "ChaperoneLogList")
            .Model(model => {
                model.Id(field => field.Id);
                model.Field(field => field.Name);
                model.Field(field => field.Chaperone)
                    .DefaultValue(HttpContext.Current.User.Identity.Name);
            })
            .Filter(filter =>
            {
                filter.Add(field => field.Date)
                    .IsLessThanOrEqualTo(DateTime.Now)
                    .And()
                    .IsGreaterThanOrEqualTo(DateTime.Now.AddDays(-7));
                filter.Add(field => field.Chaperone)
                    .IsEqualTo(HttpContext.Current.User.Identity.Name);
            })
            .PageSize(20)
        )
        .EnableCustomBinding(true)
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Excel();
        })
        .Excel(excel =>
        {
            excel.AllPages(true);
            excel.FileName("ChaperoneList_" + DateTime.Now.ToShortDateString()+".xlsx");
            excel.Filterable(true);
        })
        .Events(events => events.Edit("loadResearch"))
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                commands.Destroy().Text(" ");
                commands.Edit().Text(" ").CancelText(" ").UpdateText(" ");
            }).Width(80);
            columns.Bound(column => column.Date).AsDate().Width(90);
            columns.Bound(column => column.Name).Title("Topic");
            columns.Bound(column => column.Symbol).Title("S").Width(60);
            columns.Bound(column => column.BankerListDisp);
            columns.Bound(column => column.ResearchListDisp);
            columns.Bound(column => column.Other);
            columns.Bound(column => column.Chaperone).ClientTemplate("#= ChaperoneDisplay #").Title("C").Width(60);
        })
        .Pageable()
        .Sortable(sort => sort.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn))
        .Filterable(filter => filter.Mode(GridFilterMode.Menu))
        .Scrollable(scroll => scroll.Height("auto"))
        .Editable(edit => edit.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
        .Selectable()
        .Resizable(resizing => resizing.Columns(true))
 
%>

 

EditorTemplate:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
    var users = Roles.GetUsersInRole("StandardUser");
    var profs = users.Select(WebProfile.GetProfile).ToList();
 
    var list = new List<SelectListItem>();
    list.AddRange(profs.Select(
        x => new SelectListItem
        {
            Text = String.Format("{1}, {0}", x.FirstName, x.LastName),
            Value = Html.Encode(x.UserName)
        })
    );
 
    list = list.OrderBy(x => x.Text).ToList();
%>
 
<%=Html.Kendo().DropDownList()
    .Name("Chaperone")
    .DataValueField("Value")
    .DataTextField("Text")
    .HtmlAttributes(new {style = "width: 160px; "})
    .BindTo(list) 
    .OptionLabel("Select a Chaperone...")  
    .Value(Model.ToString())
%>

 

Model:

namespace CyfPortal.ApplicationServices.ViewModels
{
    [DisplayName("Chaperone Log")]
    public class ChaperoneLogViewModel : ViewModel<ChaperoneLog>
    {
        public ChaperoneLogViewModel()
        {
            Chaperone = HttpContext.Current.User.Identity.Name;
        }
 
        [ScaffoldColumn(false)]
        [Map("Id", ReadOnly = true)]
        public int Id { get; set; }
 
        [DataType(DataType.Date)]
        public DateTime Date { get; set; }
 
        [UIHint("Symbols")]
        public string Symbol { get; set; }
 
        [Display(Name = "Topic")]
        public string Name { get; set; }
 
        [UIHint("SeniorBankers")]
        public string Banker { get; set; }
 
        public string AddBanker { get; set; }
 
        [UIHint("Analysts")]
        public string Research { get; set; }
 
        public string AddResearch { get; set; }
 
        [DataType(DataType.MultilineText)]
        public string Other { get; set; }
 
        [UIHint("Chaperone")]
        public string Chaperone { get; set; }
 
        public string ChaperoneDisplay
        {
            get
            {
                var prof = WebProfile.GetProfile(Chaperone);
                var fi = "";
                var li = "";
                if (!String.IsNullOrEmpty(prof.FirstName)) fi = prof.FirstName.Substring(0, 1);
                if (!String.IsNullOrEmpty(prof.LastName)) li = prof.LastName.Substring(0, 1);
                return fi+li;
            }
        }
 
        public string[] ResearchList
        {
            get
            {
                if (String.IsNullOrEmpty(Research))
                {
                    return new string[] { };
                }
                return Research.Split(',');
            }
        }
 
        [Display(Name = "Research")]
        public string ResearchListDisp
        {
            get
            {
                if (String.IsNullOrEmpty(AddResearch)) return Research;
                return Research + ", " + AddResearch;
            }
        }
 
        public string[] BankerList
        {
            get
            {
                if (String.IsNullOrEmpty(Banker))
                {
                    return new string[] { };
                }
                return Banker.Split(',');
            }
        }
 
        [Display(Name = "Banker")]
        public string BankerListDisp
        {
            get
            {
                if (String.IsNullOrEmpty(AddBanker)) return Banker;
                return Banker + ", " + AddBanker;
            }
        }
    }
}

13 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 29 Apr 2015, 03:12 PM
Hi Michael,

Could you please try to use the strongly-typed editor and remove the "Value" option from the editor? Please check the updated editor below:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<object>" %>
 
<%=Html.Kendo().DropDownListFor(m => m)
    //Name option is set automatically to the field name
    //.Name("Chaperone") => do not set it
    .DataValueField("Value")
    .DataTextField("Text")
    .HtmlAttributes(new {style = "width: 160px; "})
    .BindTo(list)
    .OptionLabel("Select a Chaperone...")
    //Value is set by the Grid on the client side
    //.Value(Model.ToString()) => do not set it

Regards,
Vladimir Iliev
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Michael
Top achievements
Rank 1
answered on 29 Apr 2015, 05:34 PM

Unfortunately, strongly-typing the editor doesn't change the behavior.  It's still doesn't default the value.  Attached is a screenshot.

 

I should have mentioned I'm using MVC4 with aspx views.  I created test projects for MVC4 and MVC5  and the problem seems limited to MVC4.  I can provide an example project.

0
Vladimir Iliev
Telerik team
answered on 30 Apr 2015, 05:49 AM
Hi Michael,

Could you please provide the runable example which you created - this way we will be able to pinpoint the exact reason for current behavior. 

Regards,
Vladimir Iliev
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Dongfen
Top achievements
Rank 1
answered on 15 Nov 2016, 12:16 AM

Hello, 

I have the same problem. My popup edit template is working fine.  But I want to have a default value for a dropdown grid when add a new record.

Did the issue get solved?  What is the fix?

 

Thanks

Dongfen

 

0
Vladimir Iliev
Telerik team
answered on 15 Nov 2016, 08:36 AM
Hi Dongfen,

As the Michael does not respond to the last reply I would assume that the issue is resolved on his side. That why I would suggest to open a new support ticket or forum post and provide runable example where the issue is reproduced. This would help us pinpoint the exact reason for this behavior. 

Regards,
Vladimir Iliev
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Emil
Top achievements
Rank 1
answered on 01 Dec 2016, 12:57 PM

Hello,

I have the same issue. When the popup edit window shows dropdown list does not show their value. It happens for new records only. I tried to set index and value.

var index = 0;<br>var default_value = dataSource.length > 0 ? dataSource[index][options.field] : '';<br><br>var input = $('<input/>');<br>input.attr('name', options.field);<br>input.appendTo(container);<br>input.kendoDropDownList( {<br>    dataTextField: options.field,<br>    dataValueField: options.field,<br>    dataSource: dataSource,<br>    value: default_value,<br>    index: index<br>});

 

If dropdown list expanded I can see that the desired value is selected with thin frame and when I collapse ddl the value begins to be displayed.

0
Emil
Top achievements
Rank 1
answered on 01 Dec 2016, 01:34 PM
Example for this issue in attachment. It can be used on dojo.telerik.com
0
Konstantin Dikov
Telerik team
answered on 05 Dec 2016, 08:08 AM
Hi Emil,

The default value should be set in the model, as demonstrated in the following demo:
And below is a link to the modified example that you have attached:
Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
0
Emil
Top achievements
Rank 1
answered on 13 Dec 2016, 10:05 AM

Hi Konstantin,

Thak you for your answer.

What should I do if I don't know any values that can appears in ddl? It can happens if data binding for ddl is remote. I just want to set any value as default (first) if at least one value exists.

0
Konstantin Dikov
Telerik team
answered on 15 Dec 2016, 07:01 AM
Hello Emil,

The main idea is that you need to define the complex object as defaultValue and if you do not know any existing item, you can assign an object with some null values for example:
Category: { defaultValue: { CategoryID: 0, CategoryName: ""} },

You can then handle the dataBound event of the DropDownList and select the first item if the initial value matches the default value that you are defining:
dataBound: function(e){
    if(e.sender.value() == "0"){
    e.sender.select(0)
  }
}

However, you need to ensure that the initial value does not exist in the data bound to the DropDownList.


Regards,
Konstantin Dikov
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.
0
Emil
Top achievements
Rank 1
answered on 21 Dec 2016, 09:01 AM

Hello Konstantin,

I tried to write this example but failed. http://dojo.telerik.com/AZUbU/3

Can you say what's wrong?

0
Viktor Tachev
Telerik team
answered on 23 Dec 2016, 10:18 AM
Hi Emil,

Please examine the example below that illustrates how you can implement Grid with custom popup editing.


Moreover, check out the following thread that discusses using a dropdown component with popup editing of the Grid.



Regards,
Viktor Tachev
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.
0
Sivaramakrishna Reddy
Top achievements
Rank 1
answered on 30 May 2020, 03:06 PM

You can try like below.

<div class="k-edit-field">
            @(Html.Kendo()
            .DropDownListFor(model => model.ParentProcessID)
            //use the data-skip attribute to prevent adding the default value binding and add the data-bind attribute for the custom binding.
            //.HtmlAttributes(new { data_skip = "true", data_bind = "nullableValue: ParentProcessID" })
            .ValuePrimitive(true)
            .AutoBind(false)
            .DataValueField("ProcessID")
            .DataTextField("ProcessName")
            .DataSource(source => { source
                            .Ajax()
                            .Read(read =>
                            {
                               read.Action("DDL_MasterParentProcessNames_Read", "MasterProcess");
                            });//.ServerOperation(true);
            })
            .HtmlAttributes(new { required = "required", validationmessage = "The Parent Process Name field is required." })

             )
            <span class="k-invalid-msg" data-for="ParentProcessID"></span>
        </div>

As per my table design, ParentProcessID is nullable field.

 

Thanks.

Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Michael
Top achievements
Rank 1
Dongfen
Top achievements
Rank 1
Emil
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Viktor Tachev
Telerik team
Sivaramakrishna Reddy
Top achievements
Rank 1
Share this question
or