Showing multiple values in a single grid cell

[Catherine]

Hi, I'd like some help with displaying multiple values in a single grid cell. Right now the data I'm displaying is coming in as an array of json objects and getting deserialized using the Json.NET library. I have no problem displaying most of the data I want on the grid; however, some of the data is in a nested array of unknown size.

For example:

 @(Html.Kendo().Grid<AnalogModel>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.pGasDescDtoObj.ProductDesc).Title("Products");
          columns.Bound(p => p.pGasDescDtoObj.CustomerDesc).Title("Customer");
          columns.Bound(p => p.pGasDescDtoObj.ControllerDesc).Title("Controller");
          columns.Bound(p => p.pGasDescDtoObj.Template).Title("Template");
          columns.Bound(p => p.pGasDescDtoObj.GasNameDesc).Title("Gas");

         //So far, everything works great ^^

         ....

         columns.Bound(p => p.type[0].dataDefId).Title("Type"); //this works fine because I can guarantee that there will be at least one object in the array

        ....

So what I'd really like to do is display all the dataDefId values in the type array, however I don't know how to do this using the options available to the column. I've been trying to create a client template that will display them, but while I can display type[0].dataDefId, so again for example:

         columns.Bound(p => p.type).Title("Type").ClientTemplate("<strong>#: type[0].dataDefId #</strong>");

works fine. I have no idea how to get the size of the array to loop through it. If I start using c# to loop through the array, I one. lose access to the variable "type", and two, the client template doesn't work. Are there any other ways of going about this?

        

 

[Stefan]

Hello, Catherine.

Thank you for the details.

In this case, we can recommend using a JavaScript function for the template.

Then inside the function loop through the item inside the array and push them in a comma-separated string.

  columns.Bound(p => p.type).Title("Type").ClientTemplate("#=displayString(value)#");

<script>
function displayString(value){
 var allValues = ""
 value.forEach(function(element) {
  allValues += element.dataDefld
});

return allValues

}
</script>

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Catherine]

Thanks Stefan!

I was really headed in the wrong direction trying to force c# in the client template.