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

Render a nested JSON structure by custom template in Dropdown list

4 Answers 153 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Arnab
Top achievements
Rank 1
Arnab asked on 24 Feb 2015, 09:46 AM
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?

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 26 Feb 2015, 09:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Arnab
Top achievements
Rank 1
answered on 26 Feb 2015, 11:10 AM
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
0
Alexander Popov
Telerik team
answered on 03 Mar 2015, 11:14 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Samra
Top achievements
Rank 1
answered on 30 May 2017, 11:54 PM
Thanks that really helped..i was looking for proper for-loop syntax within template
Tags
DropDownList
Asked by
Arnab
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Arnab
Top achievements
Rank 1
Alexander Popov
Telerik team
Samra
Top achievements
Rank 1
Share this question
or