MVC Master Detail Grid Template Column in Detail View

5 posts, 2 answers
  1. Rachel
    Rachel avatar
    8 posts
    Member since:
    Feb 2013

    Posted 28 Aug 2014 Link to this post

    Hi All,

    I need to create an image column in my detail view. But the data field #= BroadcastEvent # is not recognized in client template at this line.
    columns.Bound(o => o.BroadcastEvent).Title("").ClientTemplate( "<img src='" + Url.Content("~/Images/") + "#= BroadcastEvent #.png' />" );
    #=DataField is always taking the Master Grid Data source. How can we access Data field of Detail view in client template on Detail view?

    Code for Master grid

    ​ @(Html.Kendo().Grid<iPort.Models.CalanderItems>()
    .Name("grid")
    .Columns(columns =>
    {
    columns.Bound(e => e.Time);
    columns.Bound(e => e.CalanderStartTime).Hidden();
    })
    .Sortable()
    .Pageable()
    .ClientDetailTemplateId("template")
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.ID))
    .Read(read => read.Action("GetCalanderData", "ClientViewActLogGrid"))
    )
    .Events(events => events.DataBound("dataBound"))
    )

    The data source for master grid is iPort.Models.CalanderItems

    public class CalanderItems
    {
    public long ID {get; set;}
    public DateTime CalanderStartTime { get; set; }
    public string Time { get; set; }
    public DateTime CalanderEndTime { get; set; }        
        }

     


    Code for Detail Grid


    <script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<iPort.Models.CalanderActivity>()
    .Name("grid_#=ID#")
    .Columns(columns =>
    {
     columns.Bound(o => o.BroadcastEvent).Title("").ClientTemplate( "<img src='" + Url.Content("~/Images/") + "#= BroadcastEvent #.png' />" );
    columns.Bound(o => o.OccurranceTime);
    columns.Bound(o => o.Title);
    columns.Bound(o => o.Place);
    columns.Bound(o => o.Description);
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetCalanderActivities", "ClientViewActLogGrid", new { StartTime = "#=ID#" }))
    )
    .Pageable()
    .Sortable()
    .ToClientTemplate()
    )
    </script>

    The datasource for detail grid is
    iPort.Models.CalanderActivity

    public class CalanderActivity
    {
    public long ID {get; set;}
    public string Title {get; set;}
    public DateTime OccurranceDate {get; set;}
    public string OccurranceTime { get; set; }
    public string Description { get; set; }
    public string Place { get; set; }
    public string BroadcastEvent { get; set; }
    }

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 29 Aug 2014 Link to this post

    Hi Rachel,


    When using templates in the child Grid, the hash symbols from the Kendo UI template syntax should be escaped.
    E.g.
    .ClientTemplate( "<img src='" + Url.Content("~/Images/") + "\\#= BroadcastEvent \\#.png' />" );

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Rachel
    Rachel avatar
    8 posts
    Member since:
    Feb 2013

    Posted 29 Aug 2014 Link to this post

    Thanks. Your trick worked.

    Now I am trying to add Delete command to child grid

    I get the below error
    Unhandled exception at line 470, column 37 in Function code0x800a1391 - JavaScript runtime error: 'CalActID' is undefined

    ​ @(Html.Kendo().Grid<iPort.Models.CalanderActivity>()
    .Name("grid_#=ID#")
    .Events(e => e.DataBound("dataBoundGrid"))
    .Columns(columns =>
    {
    columns.Bound(o => o.BroadcastEvent).Title("").ClientTemplate( "<img src='" + Url.Content("~/Images/") + "\\#= BroadcastEvent \\#.png' />" );
    columns.Bound(o => o.OccurranceTime);
    columns.Bound(o => o.Title);
    columns.Bound(o => o.Place);
    columns.Bound(o => o.Description);
    columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.CalActID))
    .Read(read => read.Action("GetCalanderActivities", "ClientViewActLogGrid", new { StartTime = "#=ID#" }))
    .Update(update => update.Action("UpdateCalanderActivities", "ClientViewActLogGrid"))
    .Destroy(update => update.Action("DeleteActivityLog", "ClientViewActLogGrid", new { EventID = "#=CalActID#" }))
    )
    .Pageable()
    .Sortable()
    .ToClientTemplate()
    )
  4. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 29 Aug 2014 Link to this post

    Hello Rachel,


    I think that the reason for the issue is the same as the previous one. The CalActID seems to be a property from the child model, but when added as route values data via the hash syntax, it is searched in the master model. You could use the Data() method and provide a JavaScript function to pass the additional data.
    E.g.
    .Destroy(update => update.Action("Destroy", "Grid").Data("additionalData")
    function additionalData() {
        return {
            id: ...
        }
    }

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Rachel
    Rachel avatar
    8 posts
    Member since:
    Feb 2013

    Posted 29 Aug 2014 Link to this post

    Thanks Dimiter. I will try to use javascript. 
Back to Top