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

How to use template expressions when bound to complex JSON object

2 Answers 393 Views

ListView

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

Rod Yager asked on 18 Dec 2012, 03:27 PM

I have an array of objects that are read from a JSON file. I am having difficulty referencing attributes of the child object of the parent. What is the correct syntax or what step am I missing to accomplish what I am trying to do (which is conditional template formatting)? Any help would be appreciated. Thanks.

In this example, "control.type" is what I am after in the edit template.

My static JSON looks like this...

[
{"questiontext":"Please enter the first name.","control":{"@type":"textbox","@label":"First Name"},"answer":null,"comment":"This is where the comment goes"},
{"questiontext":"What is the status?","control":{"@type":"combobox","@label":"Status:","item":[{"@key":"Open","@value":"OP"},{"@key":"Canceled","@value":"CO"},{"@key":"Closed","@value":"CL"},{"@key":"Complete","@value":"CO"}]},"answer":null,"comment":null},
{"questiontext":"What is the status?","control":{"@type":"radiobutton","@label":"Status:","item":[{"@key":"Open","@value":"OP"},{"@key":"Canceled","@value":"CO"},{"@key":"Closed","@value":"CL"},{"@key":"Complete","@value":"CO"}]},"answer":null,"comment":null},
{"questiontext":"What was the date of the incident?","control":{"@type":"datetime","@mask":"datetime","@label":"Date:"},"answer":null,"comment":null}
]

<!DOCTYPE html>

<html>

<head>

<title>Editing</title>

<link href="../../iqaListTest/content/kendo/2012.3.1114/examples-offline.css" rel="stylesheet">

<link href="../../../iqaListTest/content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet">

<link href="../../../iqaListTest/content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet">

<script src="../../../iqaListTest/scripts/kendo/2012.3.1114/jquery.min.js"></script>

<script src="../../../iqaListTest/scripts/kendo/2012.3.1114/kendo.web.min.js"></script>

<script src="../../iqaListTest/scripts/kendo/2012.3.1114/console.js"></script>

</head>

<body>

<a class="offline-button" href="../index.html">Back</a>

<div id="example" class="k-content">

<div class="k-toolbar k-grid-toolbar">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

</div>

<div class="listview-holder">

<div id="listView"></div>

</div>

<!--<div id="pager" class="k-pager-wrap">

</div>-->

<script type="text/x-kendo-tmpl" id="template">

<div class="iqa-view">

<dl>

<dt>Question</dt>

<dd>${questiontext}</dd>

<dt>Answer</dt>

<dd>${answer}</dd>

<dt>Comment</dt>

<dd>${comment}</dd>

</dl>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

</div>

</script>

<script type="text/x-kendo-tmpl" id="editTemplate">

<div class="iqa-view">

<dl>

<dt>${control.label}</dt>

<dd>

#if (control.type == 'textbox') { #

<input type="text" data-bind="value:answer" name="answer" required="required" validationMessage="required" />

<span data-for="answer" class="k-invalid-msg"></span>

# } #

</dd>

</dl>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

</div>

</script>

<script>

$(document).ready(function () {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "iqaData.txt",

dataType: "json"

}

},

change: function () {

}

});

var listView = $("#listView").kendoListView({

dataSource: dataSource,

template: kendo.template($("#template").html()),

editTemplate: kendo.template($("#editTemplate").html())

}).data("kendoListView");

$(".k-add-button").click(function (e) {

listView.add();

e.preventDefault();

});

</script>

<style scoped>

.iqa-view

{

float: left;

width: 650px;

margin: 5px;

padding: 3px;

-moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);

-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);

box-shadow: inset 0 0 50px rgba(0,0,0,0.1);

border-top: 1px solid rgba(0,0,0,0.1);

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

.listview-holder

{

width: 700px;

margin: 0 auto;

padding: 0;

border: 0;

border: 1px solid rgba(0,0,0,0.1);

height: 400px;

overflow: auto;

}

.iqa-view dl

{

margin: 10px 0;

padding: 0;

min-width: 0;

}

.iqa-view dt, dd

{

float: left;

margin: 0;

padding: 0;

height: 30px;

line-height: 30px;

}

.iqa-view dt

{

clear: left;

padding: 0 5px 0 15px;

text-align: right;

opacity: 0.6;

width: 100px;

}

.k-listview

{

border: 0;

padding: 0;

min-width: 0;

}

.k-listview:after, .iqa-view dl:after

{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.edit-buttons

{

text-align: right;

padding: 5px;

min-width: 100px;

border-top: 1px solid rgba(0,0,0,0.1);

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

.k-toolbar, #listView

{

width: 660px;

margin: 0 auto;

-webkit-border-radius: 11px;

-moz-border-radius: 11px;

border-radius: 11px;

}

span.k-invalid-msg

{

position: absolute;

margin-left: 160px;

margin-top: -26px;

}

</style>

</div>

</body>

</html>

2 Answers, 1 is accepted

answered on 18 Dec 2012, 07:06 PM

I would also like a way to loop through the control's items so that I can create more radio options or combobox values. JSON...

{"questiontext":"What is the status?","control":{"@type":"radiobutton","@label":"Status:","item":[{"@key":"Open","@value":"OP"},{"@key":"Canceled","@value":"CO"},{"@key":"Closed","@value":"CL"},{"@key":"Complete","@value":"CO"}]},"answer":null,"comment":null},

I know it looks something like this, but not sure how to do this with the objects I have via the JSON datasource.

#for (var i=0,len=KeyPairs.length; i<len; i++){#
            <li>${ KeyPairs[i] }</li>
        # } #

Accepted