Two grids on single page, one grid filtering other

2 posts, 1 answers
  1. David
    David avatar
    1 posts
    Member since:
    Sep 2012

    Posted 05 Sep 2012 Link to this post

    Hello, I am trying to use two grids on single page, first one is loaded usingkendo wrapper this way
    @(Html.Kendo().Grid<CPSkla.Models.WindScreen>()   
        .Name("GridWinds")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Hidden();
            columns.Bound(p => p.Brand);
            columns.Bound(p => p.Model);
            columns.Bound(p => p.Year);
            columns.Bound(p => p.Specification);
            columns.Bound(p => p.Type);
            columns.Bound(p => p.Size);
            columns.Bound(p => p.EuroCode);
            columns.Bound(p => p.Price);
            columns.Bound(p => p.Source);
        })   
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("WindscreenRead", "Calculation").Type(HttpVerbs.Post))
            .Model(model => model.Id(p => p.Id))      
        )
        .Pageable()
        .Sortable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row).Enabled(true))
        .Events(events=>events.Change("AccessoriesBind"))
    )
    This works fine, but the other grid is supposed to be empty until user selects row from this first grid, so I am declaring just columns
    @(
     Html.Kendo().Grid<CPSkla.Models.Accessory>().Name("GridAccessories").Columns(columns =>
      {
          columns.Bound(p => p.Id).Hidden();
          columns.Bound(p => p.Brand);
          columns.Bound(p => p.Model);
          columns.Bound(p => p.Year);
          columns.Bound(p => p.Specification);
          columns.Bound(p => p.Type);
          columns.Bound(p => p.Size);
          columns.Bound(p => p.EuroCode);
          columns.Bound(p => p.Price);
          columns.Bound(p => p.Source);
      })
      .Pageable()
      .Sortable()
      .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
      .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.Id))
        )
    )

    Now I need to fill up the second grid according to selected row in first one, I am using jquery function declared on change event of first grid
    <script>
        function AccessoriesBind() {
            var eucode = "";
            var grid = this;               
             
            grid.select().each(function() {
                var dataItem = grid.dataItem($(this));
                eucode += dataItem.EuroCode;
                 
            });
            alert(eucode);
            var gridAcc = $("#GridAccessories").data("kendoGrid");
            gridAcc.DataSource = new kendo.data.DataSource({
                transport: {
                    read: "/Calculation/AccessoriesRead/" + eucode,
                    dataType: "json",
                }
            });
            gridAcc.DataSource.read();
     
        }
    </script>
    But this last few rows wont fill the table, I tried lots of approaches but always with the same result. My controller is returning valid values in JSON but the table with that return value wont fill up. I tried using generating another kendo grid using just Web UI function kendoGrid on DIV but it didnt wor either. Any advices? Please help.
  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 05 Sep 2012 Link to this post

    Hello David,

    See the attached project to see how this can be implemented.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top