Format parent grid column value in subgrid (details template)

[Hajrija]

Hello,

I have the next problem.I have a grid that has some columns. One of them is called 'ConfirmedValue'. I know that you use '#' to access a parent grid column in a column's clienttemplate in its subgrid-childgrid (detail template). In a clienttemplate in that subgrid I try to format that column value using:

columns.Template(e => { }).ClientTemplate("# if(ConfirmedValue) { # #= kendo.toString(ConfirmedValue, 'c3') # # } #");

But it is not working. In my browsers dev tool console I get the error "Uncaught Error: Invalid template". I assume the sintax I use is OK. When I use it in my parent grid (main grid) it works well without any problems.

I am not sure if this is a bug or if kendo does not support this kind of behaviour. 

Can you please help me out? What did I do wrong?

Best regards,

 

 

 

 

 

[Radoslav]

Hi Hajrija,

To achieve the desired functionality you need to escape the "#" sign in the client template of the detail grid:

columns.Bound(p => p.ConfirmedValue).ClientTemplate("\\# if(ConfirmedValue) { \\# \\#= kendo.toString(ConfirmedValue, 'c3') \\# \\# } \\#");

Additionally I am sending you a simple example which demonstrates this.

I hope this helps.

Regards,
Radoslav
Telerik

[Shoeb]

Hi,

I am trying to do the same but it’s not working. If you can let me know what’s going off that would be a great help.

I Have a parent grid and child grid. I am trying to use the below template to calculate the max quantity and I am getting error invalid template.

columns.Bound(o => o.ConfigurationStatusId).ClientTemplate("\\# if(CodeConfigurationStatus.CodeLookupId != 1) {\\#  \\#=kendo.toString( \\#=Quantity \\# * \\#= Product.QuantityOfChoiceItems \\#)\\# \\#} else {\\# \\#=Quantity \\# \\#} \\#").Title("Max QTY");   

Error :

Uncaught Error: Invalid template:'<tr class="k-master-row" data-uid="#=data.uid#" role='row'><td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\#" tabindex="-1"></a></td><td  role='gridcell'>#:data.CodeConfigurationStatus.Name==null?'':data.CodeConfigurationStatus.Name#</td><td  role='gridcell'>#:data.Product.PartNumber==null?'':data.Product.PartNumber#</td><td  role='gridcell'>#:data.Quantity==null?'':data.Quantity#</td><td  role='gridcell'>false</td><td  role='gridcell'>AR-FS-BNDL-3</td><td style="display:none" role='gridcell'>1</td><td style="display:none" role='gridcell'>36678</td><td  role='gridcell'># if(CodeConfigurationStatus.CodeLookupId != 1) {#  #=kendo.toString( #=Quantity # * #= Product.QuantityOfChoiceItems #)# #} else {# #=Quantity # #} #</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr class="k-master-row" data-uid="'+(data.uid)+'" role=\'row\'><td class="k-hierarchy-cell"><a class="k-icon k-plus" href="#" tabindex="-1"></a></td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.CodeConfigurationStatus.Name==null?'':data.CodeConfigurationStatus.Name)+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.Product.PartNumber==null?'':data.Product.PartNumber)+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.Quantity==null?'':data.Quantity)+'</td><td  role=\'gridcell\'>false</td><td  role=\'gridcell\'>AR-FS-BNDL-3</td><td style="display:none" role=\'gridcell\'>1</td><td style="display:none" role=\'gridcell\'>36678</td><td  role=\'gridcell\'>'; if(CodeConfigurationStatus.CodeLookupId != 1) {;$kendoOutput+='  '+(kendo.toString( )+'=Quantity '; * ;$kendoOutput+='= Product.QuantityOfChoiceItems ';);$kendoOutput+=' ';} else {;$kendoOutput+=' '+(Quantity )+' ';} ;$kendoOutput+='</td></tr>';}return $kendoOutput;'

 

 

Thanks,
Shoeb.

[Shoeb]

can someone, please help me on this ?

[Hajrija]

I will assume that all fields belong to the child grid. If that is the case, can you try this please:

columns.Bound(o => o.ConfigurationStatusId).ClientTemplate("\\# if(CodeConfigurationStatus.CodeLookupId != 1) {\\#  \\#=kendo.toString( Quantity *  Product.QuantityOfChoiceItems )\\# \\#} else {\\# \\#=Quantity \\# \\#} \\#").Title("Max QTY"); 

I think that you do not need to use kendo.toString. You can write it this ways too:

columns.Bound(o => o.ConfigurationStatusId).ClientTemplate("\\# if(CodeConfigurationStatus.CodeLookupId != 1) {\\#  \\#=Quantity*Product.QuantityOfChoiceItems \\# \\#} else {\\# \\#=Quantity \\# \\#} \\#").Title("Max QTY"); 

 

Tell me if that fixed your problem.

[Viktor Tachev]

Hello,

Try to extract the logic from the ClientTemplate in external JavaScript function and see how the behavior changes. Check out the example below that illustrates the approach:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-use-javascript-functions-in-column-client-templates

Regards,
Viktor Tachev
Telerik by Progress

[Shoeb]

Hi Hajrija,
That worked. Thanks for your Help :)

Thanks,

Shoeb.

[Shoeb]

Hi Viktor,
Thanks for your response. I was not aware that we can user ClientTemplate  in this way.

Thanks,

Shoeb.