Grid rowTemplate

8 posts, 0 answers
  1. pmessina
    pmessina avatar
    13 posts
    Member since:
    Feb 2007

    Posted 22 Mar 2012 Link to this post

    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>

     

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 23 Mar 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. pmessina
    pmessina avatar
    13 posts
    Member since:
    Feb 2007

    Posted 23 Mar 2012 Link to this post

    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.
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 23 Mar 2012 Link to this post

    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!
  6. pmessina
    pmessina avatar
    13 posts
    Member since:
    Feb 2007

    Posted 23 Mar 2012 Link to this post

    I got everything to work thank you. Last question how do I set autoBind using MVVM?
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Mar 2012 Link to this post

    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!
  8. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2012 Link to this post

    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. 





  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Mar 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready