Conditionally display a textbox or a DDL in grid column

[Kyle]

ASP.NET MVC5, Razor, C# 

 

My grid shows 4 columns, 3 of which are read-only.  The user is required to modify the data in the 4th column.  For some of the rows, free-form text entry is allowed. For other rows, selection from a drop-down list is required.

 Based on the value of Column 1 (AttributeName), I will conditionally provide the user a textbox or ddl.

I have my DDL coded up as a partial view, and am able to display it in the appropriate column.  What I need is the ability to display this DDL, or the textbox control, in the same column in the grid, depending on the value of Column1.

 Grid code below.  Please let me know if you need to see anything else.  Thanks in advance.

 

 
@(Html.Kendo().Grid<EtlDataException>().Name("exceptionsGrid").Columns(c =>
    {
        c.Bound(p => p.AttributeName).Title("Column Name");
        c.Bound(p => p.ExceptionMessage).Title("Message");
        c.Bound(p => p.RawValue).Title("Raw Data");
        c.Bound(p => p.EditedValue).Title("Edited Value-Select").ClientTemplate("#EditedValue#").Width(120);
        
        c.Command(command => { command.Edit().CancelText("Cancel");}).Width(100);
    })
   .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(d => d
        .Ajax()
            .Read(r => r.Action("GetExceptionRecords", "Etl"))
            .PageSize(50)
            //.Model(model => model.Id(p => p.Id))
            .Update(update => update.Action("EditingInline_Update", "Grid"))
            .Model(model =>
                {
                    model.Id(p => p.Id);
                    model.Field(p => p.AttributeName).Editable(false);
                    model.Field(p => p.ExceptionMessage).Editable(false);
                    model.Field(p => p.RawValue).Editable(false);
                    model.Field(p => p.EditedValue).Editable(true).DefaultValue(ViewData["defaultAttribConstraint"]);
                })
        )
        .Pageable()
        .Filterable()
        .Sortable()
      )

[Boyan Dimitrov]

Hello Kyle,

 

The ASP.NET MVC wrappers provide the option to specify a custom editor through the EditorTemplateName method which requires a separate view. Specifying more than one editor template is not supported scenario and some custom JavaScript logic would be required. 

 

What I can suggest you is to: 

 

  1. Define a simple input element as editor template. 

 

  2. In the edit event to access this input element and initialize the DropDownList widget or to leave the text box. As mentioned in the article the model could be access using e.model. Additionally you can take a look at the approach shown in the columns.editor article. 

 

 

Regards,
Boyan Dimitrov
Telerik