Geek asks and answers

Telerik MVC Grid Master Detail Cascading Dropdowns

I use the master-detail Telerik MVC Grid on two levels.

  • The first level contains a drop-down list of customers and some different data.
  • The second level contains a drop-down list of cars that are associated with the customer at the first level and some different data.

Now I use the foreign key column to show dropdown lists of cars and customers. How can I separate the second drop-down list from the client at the first level?

the code:

@(Html.Telerik().Grid<Models.ClientsModel>()
        .Name("Grid")
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
        .DataKeys(keys => keys.Add(c => c.ClientLineID))
        .Columns(columns =>
        {
            columns.ForeignKey(o => o.ClientID, (System.Collections.IEnumerable)ViewBag.Client, "ClientID", "Name")
                                                   .Width(330)
                                                   .Title("Client");
            columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.ImageAndText);
                    commands.Delete().ButtonType(GridButtonType.ImageAndText);
                }).Width(250);
        })
        .DetailView(car => car.ClientTemplate(

            Html.Telerik().Grid<Delta.Models.CarModel>()
                        .Name("Car_<#= ClientID #>")
                        .DataKeys(keys => keys.Add(c => c.LineID))
                        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
                        .DataBinding(dataBinding =>
                        {
                            dataBinding.Ajax()
                                .Select("_CarLineIndex", "Client", new { id = "<#= ClientID #>" })
                                .Insert("_CarLineCreate", "Client", new { id = "<#= ClientID #>" })
                                .Update("_CarLineUpdate", "Client")
                                .Delete("_CarLineDelete", "Client");
                        })
                        .Columns(columns =>
                                {
                                    columns.ForeignKey(o => o.CarID, (System.Collections.IEnumerable)ViewBag.Cars,
                                    "CarID", "No")
                                                   .Width(500)
                                                   .Title("Car");
                                    columns.Command(commands =>
                                    {
                                        commands.Edit().ButtonType(GridButtonType.ImageAndText);
                                        commands.Delete().ButtonType(GridButtonType.ImageAndText);
                                    }).Width(200);
                                })
                        .Editable(editing => editing => editing.Mode(GridEditMode.InLine))
                        .Scrollable(c => c.Height("auto"))
                        .Resizable(resizing => resizing.Columns(true))
                        .Reorderable(reorder => reorder.Columns(true))
                        .KeyboardNavigation()
                        .Footer(false)
                        .ToHtmlString()
            ))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_ClientIndex", "Client")
                .Insert("_ClientCreate", "Client")
                .Update("_ClientUpdate", "Client")
                .Delete("_ClientDelete", "Client");
        })
        .Scrollable(c => c.Height("auto"))
        .Editable(editing => editing.Mode(GridEditMode.InLine))
        .Pageable(o => o.PageSize(50))
        .Filterable()
        .KeyboardNavigation()
        .Groupable())

I think the code may include some javascript in the event OnDetailViewExpand, but I cannot figure that out. The only solution I have now is to divide the grid into separate views and create a cascasing combo box there.

+5
source
3

, , . , . ClientsModel CarModel. CarModel () ClientsModel ().

(< = ClientID = > ) . ClientsModel , ClientID.

:

dataBinding.Ajax().Select("_CarLineIndex", "Client", new { id = "<#= ClientID #>", city = "<#= City #>" })

, :

public class Client
{
    public int ClientId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string City { get; set; }
}


public class Car
{
    public string Make { get; set; }
    public string Model { get; set; }
    public int Year { get; set; }
    public string Color { get; set; }
}

HomeController

[GridAction]
public ActionResult _Index()
{
    Client c1 = new Client() { ClientId = 1, City = "Boston", FirstName = "Ted", LastName = "Boder" };
    Client c2 = new Client() { ClientId = 2, City = "New York", FirstName = "Chris", LastName = "Tobb" };
    Client[] clients = {c1, c2};
    return View(new GridModel(clients));
}

[GridAction]
public ActionResult _Cars(int ClientId, string City)
{
    Car c1 = new Car() { Color = "Yellow", Make = "Ford", Model = "Mustang", Year = 2012 };
    Car c2 = new Car() { Color = "Black", Make = "Toyota", Model = "Camry", Year = 2010 };
    Car[] cars = { c1, c2 };
    return View(new GridModel(cars));
}


@(Html.Telerik().Grid<Client>()
    .Name("Clients")
    .Columns(columns =>
    {
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.City);
    })
    .DetailView(clientDetailView => clientDetailView.ClientTemplate(
         Html.Telerik().Grid<Car>()
         .Name("ClientDetails_<#= ClientId #>")
         .Columns(columns =>
         {
             columns.Bound(c => c.Make);
             columns.Bound(c => c.Model);
             columns.Bound(c => c.Year);
             columns.Bound(c => c.Color);
          })
          .DataBinding(db2 => db2.Ajax().Select("_Cars", "Home", new { ClientID = "<#= ClientId #>", City = "<#= City #>" }))
          .Pageable()
          .Sortable()
          .ToHtmlString()
    ))
    .DataBinding(db1 => db1.Ajax().Select("_Index", "Home"))
    .Pageable()
    .Sortable()
    .Filterable()
)

, City, ClientId .

, - .

+1

, javascript, . Telerik , "e.data" . , , CSHTML :

<td valign="top">
        @(Html.Telerik().DropDownListFor(m => m.State)
        .Name("State")
        .ClientEvents(events => events.OnChange("State_Change"))
        .BindTo(new SelectList(Model.GetStates()))
         .HtmlAttributes(new { style = string.Format("width:{0}px", 160) })
     )
 </td>

 <td valign="top">
     @(Html.Telerik().AutoCompleteFor(m => m.City)
         .Name("City")
         .Encode(false)
         .ClientEvents(events => {
             events.OnDataBinding("City_AutoComplete");
     })
     .DataBinding(a => a.Ajax().Select("CityList", "Location"))
     .AutoFill(true)
     .HighlightFirstMatch(true)
     .HtmlAttributes(new { style = string.Format("height: 17px; width:{0}px", 250) })
     )
 </td>

javascript :

function City_AutoComplete(e) {
    //pass state as an additional parameter here to filter
    //this would be your customer for cars list
    e.data = $.extend({}, e.data, { state: $("#State").val() });
}

function State_Change(e) {
    //reset when the parent list selection changes
    $('#City').data('tAutoComplete').text('');
    $('#City').data('tAutoComplete').value('');
}
+1

, onEdit, telerik, , dropedown select change event code, . ajax HTml . , , . , ... ...

0
source

More articles:


All Articles