Replace Kendo template with single JSON data object issue

[Aurigo]

I using datasource to display some data from API(JSON data) in my kendo template. If i get JSON data as an array, its replacing the template and rendered properly into the template and created right data format. But if i get any single JSON data object(not an array format). It is not replacing the template. Is data source will  handle only array format of JSON. See the below code data sample with array and without array format.

Below JSON data its replacing properly into my kendo template.

[{"EmployeeId":"2","EmployeeCode":"ASD","EmployeeName":"ASD","Description":"","CreateDate":"9/13/2013 12:00:00 AM","StatusId":"4","IsActive":"True"}]

But if i get response format like below JSON data, It is not rendering to my kendo template

{"EmployeeId":"2","EmployeeCode":"ASD","EmployeeName":"ASD","Description":"","CreateDate":"9/13/2013 12:00:00 AM","StatusId":"4","IsActive":"True"}

My Kendo template view file

<script id="projectDetailsTemplate" type="text/x-kendo-template">
<h3 class="item-title">${EmployeeName}</h3>
</script>

My viewModel

getEmployeeDetail: function(id){
            var EmpData= new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://127.0.0.1/api/index.php",
                        dataType: "json",
                        cache: false
                    }
                },
                schema: {
                    errors: "error"
                  },
                  error: function(e) {
                      utils.hideLoading();
                      alert("bad request");
                  }
             });
            return EmpData;
        }

Help me to load single json string data to my kendo template.

[Alexander Valchev]

Hi Balaji,

Yes, the DataSource works only with arrays.
If changing the server response is not convenient for you, the you may wrap the single object into array on the client side, inside data function of the schema. For example:

Assuming that the server returns:

{"EmployeeId":"2","EmployeeCode":"ASD","EmployeeName":"ASD","Description":"","CreateDate":"9/13/2013 12:00:00 AM","StatusId":"4","IsActive":"True"}

dataSource.schema.data should look like:

schema: {
  data: function(response) {
    return [response];
  }
}

Regards,
Alexander Valchev
Telerik

[Aurigo]

ok i  will change the response as an array in client side. If i do that as an array. How can i render to an raw template. Let see the below code for reference..

getEmployeeDetail: function(id){
            var EmpData= new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://127.0.0.1/api/index.php",
                        dataType: "json",
                        cache: false
                    }
                },
                schema: {
                    errors: "error"
                  },
                  error: function(e) {
                      utils.hideLoading();
                      alert("bad request");
                  }
             });
            return EmpData;
        }

My ViewModel to replace the template

var viewModel = kendo.observable({
             getParamDetails: function(e){
                    var projectDetailsSource =  projectDetailsData.getprojectDetail(id);
                    console.log("Project Details Source==>"+projectDetailsSource);
                    var template = kendo.template($("#projectDetailsTemplate").html());
                    var result = template(projectDetailsSource); //Execute the template
                    $("#projectDetailsListView").html(result); //Append the result
                },
     });

return{
        viewModel:viewModel,
}

My html file

<div data-role="view" id="projectDetailView" data-title="Projects Details Page" data-model="app.projectDetailView.viewModel" data-show="app.projectDetailView.viewModel.getParamDetails">
    <header data-role="header">
    <header>
    <div class="projectdetailsContent" data-role="content">
        <div id="projectDetailsListView" class="projectDetailView"></div>
    </div>
</div>

My template inside the above html

<script id="projectDetailsTemplate" type="text/x-kendo-template">
    <h3 class="item-title">${EmployeeName}</h3>
    <p>${EmployeeCode}</p>
</script>

I cant render this value inside the template.

[Alexander Valchev]

Hi Balaji,

First of all let clarify which approach you would like to use:

• dataSource bound to widget (example)
• display the dataSource data through template (example)
• MVVM source and template binding (example)

Although that all approaches produces similar result, each of them has its advantages/disadvantages and should be used in a particular case.

Based on the code which you provided it seems that you would like to render template with DataSource's data. If that is the case, please check the second example from above. Pay attention that the template is rendered at the change event of the DataSource, when the data is already retrieved by the Ajax request.

change: function() {
    $("#products").html(kendo.render(template, this.view()));
}

Regards,
Alexander Valchev
Telerik