Note that there are some explanatory texts on larger screens.

plurals
  1. POTelerik MVC Grid Master Detail Cascading Dropdowns
    text
    copied!<p>I am using a master-detail Telerik MVC Grid on two levels. </p> <ul> <li>The first level contains a drop-down of Customers and some misc data. </li> <li>The second level contains a drop-down of Cars that are linked to the customer on the first level and some misc data.</li> </ul> <p>I am now using a foreign key column to show the dropdowns of cars and clients. How can the second dropdown be filtered by the customer on the first level?</p> <p>Code:</p> <pre><code>@(Html.Telerik().Grid&lt;Models.ClientsModel&gt;() .Name("Grid") .ToolBar(commands =&gt; commands.Insert().ButtonType(GridButtonType.ImageAndText)) .DataKeys(keys =&gt; keys.Add(c =&gt; c.ClientLineID)) .Columns(columns =&gt; { columns.ForeignKey(o =&gt; o.ClientID, (System.Collections.IEnumerable)ViewBag.Client, "ClientID", "Name") .Width(330) .Title("Client"); columns.Command(commands =&gt; { commands.Edit().ButtonType(GridButtonType.ImageAndText); commands.Delete().ButtonType(GridButtonType.ImageAndText); }).Width(250); }) .DetailView(car =&gt; car.ClientTemplate( Html.Telerik().Grid&lt;Delta.Models.CarModel&gt;() .Name("Car_&lt;#= ClientID #&gt;") .DataKeys(keys =&gt; keys.Add(c =&gt; c.LineID)) .ToolBar(commands =&gt; commands.Insert().ButtonType(GridButtonType.ImageAndText)) .DataBinding(dataBinding =&gt; { dataBinding.Ajax() .Select("_CarLineIndex", "Client", new { id = "&lt;#= ClientID #&gt;" }) .Insert("_CarLineCreate", "Client", new { id = "&lt;#= ClientID #&gt;" }) .Update("_CarLineUpdate", "Client") .Delete("_CarLineDelete", "Client"); }) .Columns(columns =&gt; { columns.ForeignKey(o =&gt; o.CarID, (System.Collections.IEnumerable)ViewBag.Cars, "CarID", "No") .Width(500) .Title("Car"); columns.Command(commands =&gt; { commands.Edit().ButtonType(GridButtonType.ImageAndText); commands.Delete().ButtonType(GridButtonType.ImageAndText); }).Width(200); }) .Editable(editing =&gt; editing =&gt; editing.Mode(GridEditMode.InLine)) .Scrollable(c =&gt; c.Height("auto")) .Resizable(resizing =&gt; resizing.Columns(true)) .Reorderable(reorder =&gt; reorder.Columns(true)) .KeyboardNavigation() .Footer(false) .ToHtmlString() )) .DataBinding(dataBinding =&gt; { dataBinding.Ajax() .Select("_ClientIndex", "Client") .Insert("_ClientCreate", "Client") .Update("_ClientUpdate", "Client") .Delete("_ClientDelete", "Client"); }) .Scrollable(c =&gt; c.Height("auto")) .Editable(editing =&gt; editing.Mode(GridEditMode.InLine)) .Pageable(o =&gt; o.PageSize(50)) .Filterable() .KeyboardNavigation() .Groupable()) </code></pre> <p>I am thinking that the code might involve some javascript on the <code>OnDetailViewExpand</code> event, but I can't figure out what. The only solution I have now is to split the grid into separate views and build cascasing comboboxes there.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload