Kendo Grid - How to disable cascaded dropdownlistfor when in edit mode and enable it when add mode?

Question

I would like to disable the DropDownListFor which is cascading from another dropdownlist in editor while editing a record and keep it enable while in adding a record. I am using Kendo Grid in my MVC project.

Here I would like to disable Country Dropdownlist and location dropdownlist when in edit mode and keep enable when in add(insert new record) mode

The code is as below:

Grid:

@(Html.Kendo().Grid<Webapplication1.Models.mainViewModel>()
    .Name("mainGrid")
    .Columns(c =>
    {
        c.Bound(m => m.Id).Hidden();
        c.Bound(m => m.CountryViewModel.CountryName)
            .Title("Country").HeaderHtmlAttributes(new { @title = "Countries" });
        c.Bound(m => m.LocationViewModel.LocationName)
            .Title("Location").HeaderHtmlAttributes(new { @title = "Locations" });
        c.Command(p =>
        {p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit" });});
    })
    .ToolBar(toolbar => { toolbar.Create().Text("").HtmlAttributes(new { @title = "Add"}); })
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("gridEditor"))
    .DataSource(dataSource => dataSource
.Ajax()
        .PageSize(10)
        .Read(read => read.Action("mainGrid_Read", "abc"))
    .Update(update => update.Action("mainGrid_Update", "abc"))
    .Create(create => create.Action("mainGrid_Create", "abc"))
        .Model(m => { m.Id(p => p.Id);
          m.Field(p => p.CountryViewModel).DefaultValue(ViewData["DefaultCountry"] as Webapplication1.Models.CountryViewModel);      
        })
    )
)

Country DropDownList:

@model Webapplication1.Models.CountryViewModel

@(Html.Kendo().DropDownListFor(m => m)
    .AutoBind(false)
    .OptionLabel("Select")
    .DataValueField("CountryId")
    .DataTextField("CountryName") 
    .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetCountries", "abc").Type(HttpVerbs.Post))
                                .ServerFiltering(true);
                  })
)
@Html.ValidationMessageFor(m => m)

Location DropDownList:

@model Webapplication1.Models.LocationViewModel

@(Html.Kendo().DropDownListFor(m => m)
    .OptionLabel("Select")
    .DataValueField("LocationId")
    .DataTextField("LocationName")
    .AutoBind(false)
    .DataSource(d =>
    {
        d.Read(read =>
        {
            read.Action("GetLocationsByCountryId", "abc").Type(HttpVerbs.Post).Data("getCountryId");
        }).ServerFiltering(true);
    })
    .CascadeFrom("CountryViewModel")
)
@Html.ValidationMessageFor(m => m)

Popup editor:

@model Webapplication1.Models.mainViewModel
<table>
    @Html.HiddenFor(m => m.Id)
    <tr>
        <td>@Html.Label("Country:")</td>
        <td>@Html.EditorFor(m => m.CountryViewModel)</td>
    </tr>
    <tr>
        <td>@Html.Label("Location:")</td>
        <td>@Html.EditorFor(m => m.LocationViewModel)</td>
    </tr>
</table>

By the way, your code looks so strange. Where's the other drop-down list? What else is in your ViewModel? How come you are using the drop-down list like DropDownListFor(m => m)? Is this inside and EditorTemplate? — ataravati
@ataravati: yes dropdownlists are inside popup editor. I think if I change the edit mode to InLine, it should not make any difference. I have editied the code here and posted grid, dropdownlist editors and popup editor code now. — giparekh
I never said change the edit mode to InLine. What seems so unnecessary is having EditorTemplates for Country and Location. — ataravati

ataravati ataravati · Accepted Answer · 2015-03-20T13:58:59

Add an Edit event to your grid like this:

@(Html.Kendo().Grid<Webapplication1.Models.mainViewModel>()
    .Name("mainGrid")
    .Columns(c =>
    {
        c.Bound(m => m.Id).Hidden();
        c.Bound(m => m.CountryViewModel.CountryName)
            .Title("Country").HeaderHtmlAttributes(new { @title = "Countries" });
        c.Bound(m => m.LocationViewModel.LocationName)
            .Title("Location").HeaderHtmlAttributes(new { @title = "Locations" });
        c.Command(p =>
        {p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit" });});
    })
    .ToolBar(toolbar => { toolbar.Create().Text("").HtmlAttributes(new { @title = "Add"}); })
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("gridEditor"))
    .DataSource(dataSource => dataSource
.Ajax()
        .PageSize(10)
        .Read(read => read.Action("mainGrid_Read", "abc"))
    .Update(update => update.Action("mainGrid_Update", "abc"))
    .Create(create => create.Action("mainGrid_Create", "abc"))
        .Model(m => { m.Id(p => p.Id);
          m.Field(p => p.CountryViewModel).DefaultValue(ViewData["DefaultCountry"] as Webapplication1.Models.CountryViewModel);      
        })
    )
    .Events(events => events.Edit("onEdit"))
)

And, add this script to your view:

<script type="text/javascript">
    function onEdit(e) {
        //if current model is new (add)...
        if (e.model.isNew()) {            
            e.container.find("#CountryViewModel").data("kendoDropDownList").enable();            
        }
        else
        {
            e.container.find("#CountryViewModel").data("kendoDropDownList").enable(false);            
        }

        e.preventDefault();
    }
</script>

By the way, you don't have to create ViewModels for Country and Location. You can use IEnumerable<SelectListItem> to create your drop-down lists. Also, no need to create EditorTemplates. Put your drop-down lists directly in your View.

UPDATE:

Make sure your Location drop-down list is disabled by default. Then, you'll have to enable/disable the Country drop-down list.

@(Html.Kendo().DropDownListFor(m => m)
    .OptionLabel("Select")
    .DataValueField("LocationId")
    .DataTextField("LocationName")
    .AutoBind(false)
    .DataSource(d =>
    {
        d.Read(read =>
        {
            read.Action("GetLocationsByCountryId", "abc").Type(HttpVerbs.Post).Data("getCountryId");
        }).ServerFiltering(true);
    })
    .CascadeFrom("CountryViewModel")
    .Enable(false)
)

Kendo Grid - How to disable cascaded dropdownlistfor when in edit mode and enable it when add mode?

1 Answers