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

MVC Master Detail Grid Template Column in Detail View

4 Answers 142 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rachel
Top achievements
Rank 1
Rachel asked on 28 Aug 2014, 11:29 PM
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; }
}

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 29 Aug 2014, 01:06 PM
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.

 
0
Rachel
Top achievements
Rank 1
answered on 29 Aug 2014, 02:27 PM
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()
)
0
Accepted
Dimiter Madjarov
Telerik team
answered on 29 Aug 2014, 02:56 PM
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.

 
0
Rachel
Top achievements
Rank 1
answered on 29 Aug 2014, 03:59 PM
Thanks Dimiter. I will try to use javascript. 
Tags
Grid
Asked by
Rachel
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Rachel
Top achievements
Rank 1
Share this question
or