Datasource not binding to template

[Mangesh]

Hi,

I've created one template and assign datasource to that template but data is not showing on webpage.
Following is my code:

 <script id="template" type="text/x-kendo-template">
            <div class="categoryBox">
                <div>
                    <strong>
                        #= categoryName #
                    </strong>                    
                    <a class="box-link" href="http://www.google.co.in">
                        Read More
                    </a>
                </div>
            </div>
            </script>
            <script type="text/javascript">
                $(document).ready(function () {

                    var template = kendo.template($("#template").html());
                    var category = [
                        { "categoryName": "Category1" },
                        { "categoryName": "Category2" },
                        { "categoryName": "Category3" },
                        { "categoryName": "Category4" },
                        { "categoryName": "Category5" },
                        { "categoryName": "Category6" }
                        ];

                    var dataSource = new kendo.data.DataSource({ data: category });

                    // read data from the remote service
                    dataSource.read();
                });
            </script>

Kind Regards,
Mangesh

[Petyo]

Hello Mangesh,

 Your code initializes the template, but does not output its code anywhere. You need a dom element.

In addition to that, the template should also iterate the data from the datasource - this does not happen automatically. I used kendo.render utility method for that. 

See the attached example:
http://jsfiddle.net/underlog/5J3z5/1/

All the best,
Petyo
the Telerik team

[Mangesh]

Hi Petyo,

Thank you so much for your assistance. I have successfully created my template now.
I'm moving forward to bind remote data now. I have a webservice. and link of the web service is http://localhost:14987/KendoDemo/WebService.asmx/Categories
which returns json data in string format. and I'm binding that data to the same template but not showing any data on web page.
Here's my code:-
(template is same as we have used before)
<script type="text/javascript">
            $(document).ready(function () {
                var template = kendo.template($("#template").html());
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:14987/KendoDemo/WebService.asmx/Categories"
                        }
                    }
                });

                dataSource.bind("change", function () {
                    $("#content").html(kendo.render(template, dataSource.view()));
                });

                dataSource.read();
                console.log(dataSource.view());

            });
            
        </script>



Please check the attachment for the web service output.

[Petyo]

Hello Mangesh,

The web service does not return json. It returns XML, which contains a json string. 

Best wishes,
Petyo
the Telerik team

[Mangesh]

Hi Petyo,

OK So I need to set content type in datasource. Am I right?
I have done according to this forum : http://www.kendoui.com/forums/framework/data-source/server-side-filtering-and-paging.aspx
but still not showing the data on webpage?
and my code is :
<script type="text/javascript">
            $(document).ready(function () {
                var template = kendo.template($("#template").html());
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            type: "POST",
                            url: "http://localhost:14987/KendoDemo/WebService.asmx/Categories",
                            contentType: 'application/json; charset=utf-8',
                            datatype: "json"
                        }
                    }
                });

                dataSource.bind("change", function () {
                    $("#content").html(kendo.render(template, dataSource.view()));
                });

                dataSource.read();
                console.log(dataSource.view());

            });
            
        </script>

Thanks,
Mangesh

[Petyo]

Hello Mangesh,

 The dataType transport parameter is case sensitive. 

In addition to that, you can bind to the dataSource error event, so that you can examine what goes wrong with the returned result:

dataSource.bind("error", function () {
console.log(arguments); 

});

Greetings,
Petyo
the Telerik team

[Mangesh]

Hi Petyo,

Thanks for your help. It works. :)
Now, If I want to change the css class name of div element inside of template How can I do so? for e.g. in our case class name is "categoryBox". how can we change for different data of datasource? Lets assume There is different class for Category1, different class for Category2 and so on...

Kind Regards,
Mangesh

[Petyo]

Hi Mangesh,

 You can perform any kind of logic by embedding JavaScript in the template. You can review the expressions template section in our demos. 

Regards,
Petyo
the Telerik team

[Mangesh]

Hi Petyo,

Thanks for the help.
I did it by using following code:
<script id="template" type="text/x-kendo-tmpl">
                    # if (CategoryName == "Category 1") { #
                        <div class="GoldBox">
                    # } else { #
                        <div class="BlueBox">
                    # } #                                    
                       <div style="color:black;">
                            <strong>
                                #= CategoryName #
                            </strong>
                            #= Value #                   
                            <a class="box-link" href="http://www.google.co.in">
                                Read More
                            </a>
                       </div>
                      </div>             
 </script>

Kind Regards,
Mangesh

[Mangesh]

Hi Petyo,

Two methods from different web services (.asmx) are giving some results back but first method is binding to template successfully but the other one is not. Please check the attachment for the files which clearly shows that web service1's method giving result as similar to web service2's method. The only difference is that web service 1 return data in IEnumerable<Category> format with the Category class name as data type whereas web service 2 did the same thing but it actually call the other external web service method to get the data, And also data is coming back from external web service and then I'll convert that data into IEnumerable<Category> format but this method's data is not binding to template. Only first web service method is binding to the template. So How can I bind 2nd web service method to template?

[Mangesh]

Hi Petyo,

I managed to solve it.

Kind Regards,
Mangesh