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

Grid rowTemplate

7 Answers 239 Views
This is a migrated thread and some comments may be shown as answers.
pmessina
Top achievements
Rank 1
pmessina asked on 23 Mar 2012, 02:15 AM

I'm working on a page that needs to have a rowTemplate added to a kendo grid. I've tried a few permiatations and can not get it to work. I have the grid bound to a view model with a data source property called Info. I pasted my code below  and am not sure what I am missing.


<table id="grid" width="100%" data-role="grid" data-bind="source: Info" data-template="row-template"

data-columns='[{"field": "ID","title": "Id"}]'>

<tbody ><tr><td></td></tr></tbody>

</table>

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

<tr>

<td>

<a href="Page.aspx?ID=${ ID }">Edit</a>

</td>

</tr>

</script>

 

7 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 23 Mar 2012, 09:00 AM
Hello,

When setting Grid's template through the MVVM, you should use data-row-template instead data-template.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
pmessina
Top achievements
Rank 1
answered on 23 Mar 2012, 04:34 PM
Is there anyway you can zip up an example? I have it pulling the template but now the data is not coming through. I can see the object using chromes developer tools so I know its there but the grid is not creating rows.
0
Rosen
Telerik team
answered on 23 Mar 2012, 04:51 PM
Hi pmessina,

Here is a basic jsFiddle page using similar to the code you have provided:



Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
pmessina
Top achievements
Rank 1
answered on 23 Mar 2012, 04:57 PM
I got everything to work thank you. Last question how do I set autoBind using MVVM?
0
Rosen
Telerik team
answered on 26 Mar 2012, 09:12 AM
Hi,

I'm afraid that currently the autoBind option does not take effect if widget is bound to a DataSource through the MVVM. We will consider adding such support for future version of the library.

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeremy
Top achievements
Rank 1
answered on 28 Mar 2012, 05:39 PM
hey guys,

I'm have need for a similar piece of code. Unfortunately, I'm not able to get this to work properly.

I'm trying to bind my data with a datasource, but the information does not populate properly. I hope you can show me what I'm doing wrong.

Here is my code. 

<table id="grdQuarters" width="100%" data-role="grid" data-bind="source: dsQuarter" data-row-template="row-template" data-columns='[{field:"Quarter",title:"Quarter"},{field:"StartDate",title:"Start Date"},{field:"EndDate",title:"End Date"}]'>
</table>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>${Quarter}</td>
        <td class="editable" title="Click here to edit this item">${StartDate}</td>
        <td class="editable" title="Click here to edit this item">${EndDate}</a></td>
    </tr>
</script>

var dsQuarter = new kendo.data.DataSource({
    transport: {
        read: {
            url: 'Services/RockService.svc/GetQuarterlyDefinitions',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        },
        parameterMap: function (data, type) {
            var ret;
            switch (type) {
                case "read":
                    ret = kendo.stringify({ "CompanyID": companyID, "PersonID": personID });
                    break;
                case "update":
                    {
                        var settings = new Array();
                        for (var i = 0; i < data.models.length; i++) {
                            settings[i] = data.models[i];
                        }
                        ret = kendo.stringify({ "Settings": settings });
                        break;
                    }
                default:
                    break;
            }
            return ret;
        }
    },
    batch: true,
    autoSync: false,
    schema: {
        data: "d",
        model: QuarterDefinition
    }
});
 
 
var viewModel = kendo.observable({
    dataSource: dsQuarter,
});
 
kendo.bind($("#grdQuarters"), viewModel);

I can't seem to figure this out. What I'm trying to do seems a little more complicated than the JS fiddle, since it's using a datasource.

Any help or guidance would be appreciated. 





0
Atanas Korchev
Telerik team
answered on 28 Mar 2012, 09:12 PM
Hello,

 We can't really tell what the problem is. Your code looks correct though.

 You can easily setup a jsfiddle by using the ajax echo service which it provides.

Greetings,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
pmessina
Top achievements
Rank 1
Answers by
Rosen
Telerik team
pmessina
Top achievements
Rank 1
Jeremy
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or