This is a migrated thread and some comments may be shown as answers.

Two grid's in the same View using same model "System.Data.DataTable"

1 Answer 156 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sterling
Top achievements
Rank 1
sterling asked on 24 Jul 2013, 09:59 PM
Does anyone know how to render a hierarchical grids within a View using the same model?  In my example,  the model i'm using "System.Data.DataTable" the main grid should display a list of 'projects' and the sub grid should display correlating 'designs' as a child grid.  I'm using DataTable because each customer could have different columns for their 'projects' and 'designs' in data.. Therefore, I cannot go with the fixed column solution, it MUST be dynamic columns.  When I'm using DataTable the parent grid and the child grid both are displaying the same columns because it's referencing the same model. Here's the code in my view:

    @(Html.Kendo()
        .Grid<System.Data.DataTable>()
        .Name("ProjectGrid")
        .ClientDetailTemplateId("template")
            .Columns(columns =>
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    string strFormat = "", strTitle = column.Caption;
                    if (column.DataType == typeof(System.DateTime))
                        strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";


                    columns
                        .Bound(column.ColumnName)
                       .Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
                       .Title(strTitle)
                       .Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
                       .Format(strFormat)
                       .Width(200);
                }

            })
        .Pageable(paging=>paging.PageSizes(new int[]{10, 20 , 30, 50} ))
        .Sortable()
        .Navigatable()
        .Filterable()
        .Groupable()
        .Selectable(selectable => selectable
                .Type(GridSelectionType.Row))
        .ColumnMenu()

            .Resizable(resize => resize
                        .Columns(true))
        .DataSource(dataSource => 
            dataSource
                .Ajax()
                    .Model(model =>
                        {
                            foreach (System.Data.DataColumn column in Model.Columns)
                            {
                                model.Field(column.ColumnName, column.DataType);
                            }
                        })
                .Read(read => read.Action("GetProjects", "Designer"))
                .PageSize(20)  
        )        
        .HtmlAttributes(new { style = "height:100%" })
        .Scrollable()

    )


<script id="template" type="text/kendo-tmpl">
@(Html.Kendo()
    .Grid<System.Data.DataTable>()
    .Name("DesignerDesignGrid_#=Id#")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                string strFormat = "", strTitle = column.Caption;
                if (column.DataType == typeof(System.DateTime))
                    strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";


              columns
                        .Bound(column.ColumnName)
                       .Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
                       .Title(strTitle)
                       .Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
                       .Format(strFormat)
                       .Width(200);
            }
        })
        //.Events(events => events.Change("getSelectedRowId"))
    .DataSource(datasource => datasource
        .Ajax()      
        .Model(model =>
                        {
                            foreach (System.Data.DataColumn column in Model.Columns)
                            {
                                model.Field(column.ColumnName, column.DataType);
                            }
                        })  
        .PageSize(5)
        .Read(read => read
            .Action("GetDesigns", "Designer", new  { projectId = "#=Id#" })))
        .Pageable()
        .Sortable()
        .ToClientTemplate()
    )
    </script>

<script>
    var selected;
    function dataBound() {
        this.expand(this.tbody.find("tr.k-master-row").first());
    }
</script>

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 26 Jul 2013, 02:33 PM
Hi Sterling,

 
There are several ways to bind the child grid to a property from the parent Grid and which one you would choose depends entirely on you and the exact setup that you have. For convenience I created small example of binding child Grid to property from the parent Grid model and attached it to the current thread - you can use it as a baseline to achieve the desired behavior. 

Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
sterling
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or