Problem with ForeignKeyColumn in Master/detail Grid

4 posts, 1 answers
  1. karen
    karen avatar
    3 posts
    Member since:
    May 2015

    Posted 30 May 2015 Link to this post

    Hi

    I am trying to put together a master/detail grid where both the master and detail grid has foreign key columns. The two grids work normally with the foreign key columns when they are on their own, but once I put them together, I have an "invalid template" error.

    Here's my razor view of the master/detail grid.

        @(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.AssetSubType>()
          .Name("subTypeGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.AssetSubTypeID).Width(50);
              columns.ForeignKey(c => c.AssetTypeID, (System.Collections.IEnumerable)ViewData["assetTypes"], "AssetTypeID", "Type").Width(200);
              columns.Bound(c => c.SubType).Width(300);
              columns.Bound(c => c.Description).Width(300);
              columns.Bound(c => c.ProductTypeID).Width(100).Hidden();
              columns.Bound(c => c.PhysicalItem).Width(100).Hidden();
              columns.Bound(c => c.LastModified).Hidden();
              columns.Bound(c => c.LastModifiedBy).Hidden();
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
          })
          .ToolBar(toolbar =>
          {
              toolbar.Create();
          })
          .ColumnMenu()
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Pageable()
          .Reorderable(reorder => reorder.Columns(true))
          .Navigatable()
          .Selectable()
          .Groupable()
          .Resizable(resize => resize.Columns(true))
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.MultipleColumn);
          })
          .Filterable(filterable => filterable.Mode(GridFilterMode.Menu))
          .Scrollable()
          .ClientDetailTemplateId("template")
          .HtmlAttributes(new { style = "height:800px;" })
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(15)
              .Events(events => events.Error("grid_error")) // Handle the "error" event
              .Model(model => model.Id(p => p.AssetSubTypeID))
              .Read(read => read.Action("AssetSubTypes_Read", "AssetAttribute"))
              .Create(create => create.Action("AssetSubTypes_Create", "AssetAttribute"))
              .Update(update => update.Action("AssetSubTypes_Update", "AssetAttribute"))
              .Destroy(destroy => destroy.Action("AssetSubTypes_Destroy", "AssetAttribute"))
          )
              //.Events(events => events.DataBound("dataBound"))
        )
    </div>
    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeAttribute>()
                                .Name("attributeGrid_#=AssetSubTypeID#")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.SubTypeAttributeID).Hidden();
                                    columns.Bound(c => c.AssetSubTypeID).Hidden();
                                    columns.Bound(c => c.AttributeValueID);
                                    //columns.ForeignKey(c => c.AttributeValueID, (System.Collections.IEnumerable)ViewData["attributes"], "AttributeValueID", "Attribute").Title("Attribute").Width(200);
                                    columns.Bound(c => c.DefaultValue);
                                    columns.Bound(c => c.Description);
                                    columns.Bound(c => c.LastModified).Hidden();
                                    columns.Bound(c => c.LastModifiedBy).Hidden();
                                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                                })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(5)
                                    .Model(model => model.Id(p => p.SubTypeAttributeID))
                                    .Read(read => read.Action("SubTypeAttributes_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
                                    .Update(update => update.Action("SubTypeAttributes_Update", "AssetAttribute"))
                                    .Create(update => update.Action("SubTypeAttributes_Create", "AssetAttribute").Data("onAddSubItem"))
                                    .Destroy(update => update.Action("SubTypeAttributes_Destroy", "AssetAttribute"))
                                 )
                                .ToolBar(toolbar =>
                                {
                                    toolbar.Create().HtmlAttributes((new { onclick = "setMasterSubTypeID(this, #=AssetSubTypeID#)" }));
                                    //toolbar.Excel();
                                })
                                 .Editable()
                                 .ColumnMenu()
                                 .Sortable()
                                 .Scrollable()
                                 .Resizable(resize => resize.Columns(true))
                                 .Filterable(filterable => filterable.Mode(GridFilterMode.Menu))
                                 .Editable(editable => editable.Mode(GridEditMode.InLine))
            .ToClientTemplate()
        )

    </script>

     

    Funny thing is if I comment out the foreignkeycolumn on the detail grid (columns.ForeignKey(c => c.AttributeValueID,
    (System.Collections.IEnumerable)ViewData["attributes"],
    "AttributeValueID", "Attribute").Title("Attribute").Width(200);), and change it to bound. Everything works.

    After searching various forums and making sure there is no spacing in field names and "encoder Type" is not defined in Web.config (http://www.telerik.com/forums/master-details-grid-not-working). I cannot get the grid to work.

    I may be missing something very trivial but I just can't figure out why the grids work on their own but not when they are together.

    Appreciate any thoughts.

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 03 Jun 2015 Link to this post

    Hello karen,

    I tested a scenario with a ForeignKeyColumn in the detail grid, but it is working fine without any errors. 

    Most probably the reason for facing this error is presence of "#" (hash) character in the "Attribute" value. The # (or hash) symbol is used to mark areas in a template that should be replaced with data when the template is executed. The # character is also used to signify the beginning and end of custom Javascript code inside the template. 

    In this case I would suggest you to escape the "#" on the server in order to avoid such problem. 

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. karen
    karen avatar
    3 posts
    Member since:
    May 2015

    Posted 03 Jun 2015 Link to this post

    Hi Boyan,

    Thanks for your reply.

    I checked my data from "Attribute" table and confirmed that "#" were present. As soon as I removed the "#" character from the data the master/detail grids worked!!! Thank you!

    I should have posted my question earlier, it took me so long to try to figure out why it worked as standalone grid but not as a template.

    Is there anymore "reserved" character like the "#" which cannot be present in the data? My other problem with a column which references to another table is that the data source of this foreign key column has more than 100k record. I have to use custom EditorTemplate to render the DropDownList in order to limit the number of record. Like my original problem with the ForeignKeyColumn, my grid works fine on its own but fails when its used as a DetailTemplate within a master grid. Or is there anything I have to pay attention while using EditorTemplate within other templates. Especially I have a mixture of a master grid with TabStrip with detail grids on each tab, and ForeignKeyColumns within each detail grid.

    Thank you.

    Regards

    Karen

  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 05 Jun 2015 Link to this post

    Hello Karen,

    I am glad to hear that this solved your problem. 

    I would suggest you to review the Kendo UI Templates Overview article that provides detailed information about usage of templates and some examples. 

    Specifically please take a look at the Escaping Hash Literals section, which says that "#" characters need to be escaped when they are part of binding expression in nested template. 

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top