MVC Master Detail Grid Template Column in Detail View

[Rachel]

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; }
}

[Dimiter Madjarov]

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

 

 

[Rachel]

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()
)

[Dimiter Madjarov]

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

 

 

[Rachel]

Thanks Dimiter. I will try to use javascript.