[Solved] Dropdown Edit Template with label Option

[Frank Michael]

When I use a Grid with Client Binding and Client Editing, and I have a Edit Template for a string field, and I want
a) The actual field value to be selected in the dropdown as soon as the field is editable and
b) a lable option "<-- none -->" that allows to not select a value
this does not work, because always the lable option is preselected.
I need the label option, because it is a valid use case to not have a value.
I need the preselected field value, because otherwise the usability is very much hampered.

[Frank Michael]

Even if I do not have the label Option the right value is not selected.

I know, that the example sais:

"Editor templates are supported in client binding scenarios provided that there is an HTML element whose name attribute is the same as the property name of the bound field."

I have that. See attached screenshots.

This is my EditView:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<%= Html.DropDownList(null, new SelectList((IEnumerable<Sprint>)ViewData["sprints"], "RowKey", "Title", Model)) %>

And the grid:

Html.Telerik().Grid<WorkitemGridRow>()
        //.BindTo(Model.gridRows)
        .Name("WorkitemGrid")
        .Localizable("de-DE") //ToDo Culture allgemein ersetzen
        .ToolBar(tb =>
        {
            tb.Insert();
        })
        .DataBinding(b => b.Ajax()
            .Select<WorkitemController>(sc => sc.AjaxGridSelect(Model.fatherKey??String.Empty))
            .Delete<WorkitemController>(sc => sc.AjaxGridDelete(String.Empty)) // Parameter is added by Grid engine
            .Insert<WorkitemController>(sc => sc.AjaxGridInsert(Model.fatherKey ?? String.Empty))
            .Update<WorkitemController>(sc => sc.AjaxGridUpdate(String.Empty)) // Parameter is added by Grid engine
        )
        .DataKeys(k => k.Add(r => r.RowKey))
        .Columns(c =>
        {
            c.Command(s =>
            {
                s.Select();
                s.Edit();
                s.Delete();
            }).Width(300);
            c.Bound(r => r.Title);
            if (Model.viewSprints) c.Bound(s => s.SprintTitle).ReadOnly(false).HtmlAttributes(new {name="SprintTitle"});
            c.Bound(r => r.RemainingDays).Format("{0}").Width(15).Title("Days");
            c.Bound(r => r.RemainingHours).Format("{0}").Width(15).Title("Hours");
            c.Bound(r => r.FreeRemainingDays).Format("{0}").ReadOnly(true).Width(15).Title("Free\nDays");
            c.Bound(r => r.FreeRemainingHours).Format("{0}").ReadOnly(true).Width(15).Title("Free\nHours");
            c.Bound(r => r.chartlet)
                .ClientTemplate("<img src='<#= chartlet #>' alt=''>")
                .Title("Chart").ReadOnly(true);
            c.Bound(r => r.Urgent).ReadOnly(false)
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Urgent' <#= Urgent? checked='checked' : '' #> />");
            c.Bound(r => r.Important).ReadOnly(false)
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Important' <#= Important? checked='checked' : '' #> />");
            c.Bound(r => r.Status).ReadOnly(false);
        })
        .Sortable()
        .Pageable()
        .Groupable()
        .Filterable()
        .Render();

[Frank Michael]

I assume, that the property field name means the name of the property of the model object, not the dropdown listbox (i.e. not "Title" but "SprintTitle" in my case.

[Atanas Korchev]

Hi Frank Michael ,

I created a sample application showing how to do this. Check Employee.ascx for the implementation.

All the best,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

Hello Atanas,

thank you for the example.

However what I do not understand, what about this code:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Sprint>" %>
<%= Html.DropDownList(null,
    new SelectList((IEnumerable<Sprint>)ViewData["sprints"], "RowKey", "Title", Model.RowKey),
    new {Width = "145px" })%>

This is very similar to the example. Can this ever work in a Client Binding Scenario? Or is this limited to Server Binding like the Example?

As a matter of fact I am getting a Null Exception with the Model. What glue am I missing?
What I did is:

Editable Model (Row):

    public class WorkitemGridRow : Workitem
    {
        [UIHint("SprintGridCell")]
        public Sprint SprintModel { get; set; }

Model:

    [TypeConverter(typeof(SprintConverter))]
    public class Sprint : TableServiceEntity, IComparable<Sprint>, IPatternModel, IFastSearchable<Sprint>
    {

public class SprintConverter : TypeConverter
    {
        public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
        {
            return (sourceType == typeof(string)) ? true : base.CanConvertFrom(context, sourceType);
        }
    }

I am not exactly sure what for the converter is, but if it works like magic, I'll be satisfied.
Grid:

        .DataBinding(b => b.Ajax()
            // ...
            .Update<WorkitemController>(sc => sc.AjaxGridUpdate(String.Empty, String.Empty)) // Parameter is added by Grid engine
        )

            if (Model.viewSprints) c.Bound(s => s.SprintModel)
                .ReadOnly(false).HtmlAttributes(new { name = "SprintModel" }).Width(150);

Controller:

public ActionResult AjaxGridUpdate(string id, string sprint)
        {

[Frank Michael]

Hold on for a moment. I just saw, that your Example is Ajax Binding. I have to try that before I conclude, that it does not work.

[Frank Michael]

This is an excellent example. All works now!!
I would not have know it on my own, because the Client Template Syntax is still foreign to me, but yes, it makes sense.
And I would not have known, that I need this script snippet. Now that I see it, it fills the gap in my mind. I did not know where the connection is. Sometimes you think, that this might be built in already, but you are not sure.
So - great example - it makes a lot of things clear. I suggest you put it on the demo site.

[Frank Michael]

Since version 527 this code did not work any more:

var $dropdown = $('#SprintModel');

I used this code instead:

var $dropdown = $('select[name$=SprintModel]');

It does find the correct dropdown and prepends <none>.
But as I find now, the current select option is not selected any more.

?!?!?!

For a detailed explanation see:

Problem on Stackoverflow

[Frank Michael]

As far as I can tell from the debugging.
If I am within the javaScript Funktion stepping over the statements, I see that in the grid the row in question is not visible.
It disappears when I stop at the breakpoint and appears again after f8(continue).
!?!?
Also is appears very strange to me that ... watching the DOM all is fine. The correct option is set to .selected=true in the DOM!!!!
But it does not render in firefox.
Is this a problem with the Telerik version?
I have 2010.02.825.0.
Is there a more stable version? Which one is recommended?