Grid rowTemplate

[pmessina]

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>

 

[Rosen]

Hello,

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

Regards,
Rosen
the Telerik team

[pmessina]

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.

[Rosen]

Hi pmessina,

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

Greetings,
Rosen
the Telerik team

[pmessina]

I got everything to work thank you. Last question how do I set autoBind using MVVM?

[Rosen]

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

[Jeremy]

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. 

[Atanas Korchev]

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