Render a nested JSON structure by custom template in Dropdown list

[Arnab]

I've a JSON structure as:

$scope.fileList = [
        {
          name: '340000SRF76',
          files: ['123456789', '3248734567754']
        },
        {
          name: '340000EFG76',
          files: ['1238436589', '3242334567754']
        },
        {
          name: '340000SHY76',
          files: ['123286789', '324584567754']
        }
];

I've to show the dropdown as:

340000SRF76

  123456789


  3248734567754


 

340000EFG76

  1238436589


  3242334567754


 

340000SHY76

  123456789

  324584567754


There will be some icon beside each of the 'name's. And by clicking the 'name's, the 'files' list will show and user can select a file. Selected value will be the file-id (like 123456789, 3248734567754 etc).

Can you please help?

[Georgi Krustev]

Hello Arnab,

I would suggest you use a custom item template, that allows to control the rendering of the suggestion item and thus you can list the values of the files array. The context of the template will be the whole data item, hence you will have access to the name and files fields. The template could look something like this:

<script id="template" type="text/x-kendo-tmpl">
<div>#:name#</div>
<div>
  # for (var idx = 0; idx < files.length; idx++) { #
    <span>#: files[idx] #</span>
  # } #
</div>
</script>

Please review our online demos and the Templates Overview help topic.

Regards,
Georgi Krustev
Telerik

 

 

[Arnab]

Hi Georgi,

Yes, I was able to write one custom template like you suggested. But, what I couldn't do, was to specify the 'dataTextField' and 'dataValueField' in the configuration, as user can select any item in the 'files' array, as I mentioned earlier. Can you please recommend a way to do this.

Thanks & regards,
Arnab Das

[Alexander Popov]

Hello Arnab,

I am afraid that selecting an array item is an unsupported scenario and there is no good workaround that we could suggest, other than flattening your data.

Regards,
Alexander Popov
Telerik

 

 

[Samra]

Thanks that really helped..i was looking for proper for-loop syntax within template