How to render an array of array in Grid Cell?

[Alessandro]

Hi, as the title says, I want to render the inner data of a multilevel array to a grid cell, maybe value separated by ";".

Here is the array (JSON)

"anni":[{"anno":"2026"},{"anno":"2025"}]

I tried many template format for the field I want to use, but none worked.

Last:

template: "#=anni.anno#"

Thank you

Alessandro

[Alessandro]

also tried something more complex like

template: "#=for(var a in anni) {'a.anno'}#

but did not work.

Also, I cannot find the templates reference...

[Alessandro]

Ok, I found some references, but there is a behaviour that I don't understand...

Made this template:

<script id="pvsTemplate" type="text/x-kendo-template">
#
	if(data.pvelascuola !== null && data.pvelascuola.length > 0) {
		for(let i = 0; i < data.pvelascuola.length; i++) {#
			#=data.pvelascuola[i]#
			#if(i < data.pvelascuola.length - 1){#
				, 
			#}
		}
	}else{#
		Nessuna
	#}
#
</script>

it works! (changed some names and the json feed, but it's ok...)

BUT...

as I'm working on a Grid cell... the "New Row Button" stopped working, claiming that "pvelascuola" is undefined... but it is definitevely defined, as in the cell I can see its value...

here is the popup editor template:

<script id="editorTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="nome">NOME*:</label>
    </div>
    <div class="k-edit-field">
        <input id="nome" name="nome" data-bind="value:nome" required />
        <span class="k-invalid-msg" data-for="nome"></span>
    </div>    
	<div class="k-edit-label">
        <label for="cognome">COGNOME*:</label>
    </div>
    <div class="k-edit-field">
        <input id="cognome" name="cognome" data-bind="value:cognome" required />
        <span class="k-invalid-msg" data-for="cognome"></span>
    </div>    
	<div class="k-edit-label">
        <label for="cf">CODICE FISCALE:</label>
    </div>
    <div class="k-edit-field">
        <input id="cf" name="cf" data-bind="value:cf" />
        <span class="k-invalid-msg" data-for="cf"></span>
    </div>    
	<div class="k-edit-label">
        <label for="tessera_cndf">TESSERA SOCIALE:</label>
    </div>
    <div class="k-edit-field">
        <input id="tessera_cndf" name="tessera_cndf" data-bind="value:tessera_cndf" />
        <span class="k-invalid-msg" data-for="tessera_cndf"></span>
    </div>    
	<div class="k-edit-label">
        <label for="tessera_fiv">TESSERA FIV:</label>
    </div>
    <div class="k-edit-field">
        <input id="tessera_fiv" name="tessera_fiv" data-bind="value:tessera_fiv"  >
        <span class="k-invalid-msg" data-for="tessera_fiv"></span>
    </div>    
	<div class="k-edit-label">
        <label for="nazionalita">NAZIONALITÀ:</label>
    </div>
    <div class="k-edit-field">
        <input id="nazionalita" name="nazionalita" data-bind="value:nazionalita" />
        <span class="k-invalid-msg" data-for="nazionalita"></span>
    </div>    
	<div class="k-edit-label">
        <label for="datanascita">DATA DI NASCITA:</label>
    </div>
    <div class="k-edit-field">
        <input id="datanascita" name="datanascita" data-bind="value:datanascita" />
        <span class="k-invalid-msg" data-for="datanascita"></span>
    </div>    
	<div class="k-edit-label">
        <label for="indirizzo">INDIRIZZO:</label>
    </div>
    <div class="k-edit-field">
        <input id="indirizzo" name="indirizzo" data-bind="value:indirizzo" />
        <span class="k-invalid-msg" data-for="indirizzo"></span>
    </div>    
	<div class="k-edit-label">
        <label for="cap">CAP:</label>
    </div>
    <div class="k-edit-field">
        <input id="cap" name="cap" data-bind="value:cap" />
        <span class="k-invalid-msg" data-for="cap"></span>
    </div>   
	<div class="k-edit-label">
        <label for="citta">CITTÀ:</label>
    </div>
    <div class="k-edit-field">
        <input id="citta" name="citta" data-bind="value:citta" />
        <span class="k-invalid-msg" data-for="citta"></span>
    </div>   
	<div class="k-edit-label">
        <label for="nazione">NAZIONE:</label>
    </div>
    <div class="k-edit-field">
        <input id="nazione" name="nazione" data-bind="value:nazione" />
        <span class="k-invalid-msg" data-for="nazione"></span>
    </div>   
	<div class="k-edit-label">
        <label for="provincia">PROVINCIA / STATO:</label>
    </div>
    <div class="k-edit-field">
        <input id="provincia" name="provincia" data-bind="value:provincia" />
        <span class="k-invalid-msg" data-for="provincia"></span>
    </div>
	<div class="k-edit-label">
        <label for="cellulare">CELLULARE:</label>
    </div>
    <div class="k-edit-field">
        <input id="cellulare" type="tel" placeholder="[phone]" pattern="^([\+]{1}[0-9]{1,4}[\x20]{0,1}){0,1}([0-9]{5,12})$" name="cellulare" data-bind="value:cellulare" />
        <span class="k-invalid-msg" data-for="cellulare"></span>
    </div>  
	<div class="k-edit-label">
        <label for="email">E-MAIL:</label>
    </div>
    <div class="k-edit-field">
        <input id="email" name="email" type="email" data-bind="value:email" />
        <span class="k-invalid-msg" data-for="email"></span>
    </div>   
	<div class="k-edit-label">
        <label for="pvelascuola">PARTECIPAZIONI VELASCUOLA:</label>
    </div>
    <div class="k-edit-field">
        <select id="pvelascuola" name="pvelascuola" data-bind="value:pvelascuola"></select>
        <span class="k-invalid-msg" data-for="pvelascuola"></span>
    </div>  
	<div class="k-edit-label">
        <label for="scad_certificato">SCADENZA CERTIFICATO MEDICO:</label>
    </div>
    <div class="k-edit-field">
        <input id="scad_certificato" name="scad_certificato" data-bind="value:scad_certificato" />
        <span class="k-invalid-msg" data-for="scad_certificato"></span>
    </div>
</script>

here the multiselect for "pvelascuola":

let velascuolaMS = $("#pvelascuola").kendoMultiSelect({
			dataSource: {
			  transport: {
				read: "/path/to/some.json"
			  }
			},
			height: 150,
			fillMode: fillmode
		  }).data("kendoMultiSelect");

here the field model from dataSource:

pvelascuola: { type: "object"},

and the column defintion of the grid:

{ field: "pvelascuola", title: "PARTECIPAZIONI VELASCUOLA", exportable: { pdf: false, excel: false }, template: pvsTemplate, headerAttributes: { style: "text-align: center; justify-content: center" }, attributes: { style: "text-align: right" }},

the error console says the problem is here:

function anonymous(data
) {
var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n';
	if(data.pvelascuola !== null && data.pvelascuola.length > 0) {
		for(let i = 0; i < data.pvelascuola.length; i++) {;$kendoOutput+='\n\t\t\t'+(data.pvelascuola[i])+'\n\t\t\t';if(i < data.pvelascuola.length - 1){;$kendoOutput+='\n\t\t\t\t, \n\t\t\t';}
		}
	}else{;$kendoOutput+='\n\t\tNessuna\n\t';}
;$kendoOutput+='\n';}return $kendoOutput;
}

bold, underlined and red the error point, console (Firefox) says: Uncaught TypeError: data.pvelascuola is undefined

(also tryed everything without "data." before, it was worst.

Help please!

[Alessandro]

Solved setting

if(data.pvelascuola !== undefined && data.pvelascuola.length > 0) {

in green the solution... I don't understand WHY is detected sometimes as undefined, but now it works... If someon has an explanation, I am so curious...

 

[Martin]

Hello, Alessandro,

By default, multiple comma separated values in a Grid cell is not supported. In order to achieve that, you will need a custom binding for the MultiSelect editor. Here you will find a knowledge base article showing how to achieve the scenario.

Let me know if that would be helpful.

Regards,
Martin
Progress Telerik