Template binding: what I'm doing wrong?

[brunoshine]

Hi, I've got the following code that I cannot get to bind correcly. What's happening is that the column "Name" is showing the "Id" value. What am I doing wrong? Plus, how do I tell that a specific column is not sortable?

Thanks.

<template is="auto-binding" relative>
        <sortable-table class="bootstrap"
                        footertemplate="defaultPager"
                        rowtemplate="simpleRowTemplate"
                        pagesize="10"
                        loading="{{loading}}">
            <sortable-column name="Name" >Name</sortable-column>
            <sortable-column name="&nbsp;"></sortable-column>

            <template id="simpleRowTemplate">
                <td>{{record.row.Name}}</td>
                <td><a href="@Url.Action("Edit")/{{record.row.Id}}">Edit</a></td>
            </template>

            <datatables-ajax role="datasource" url="@Url.Action("IndexData")" columns='[{"name":"Id"},{"name":"Name"}]'></datatables-ajax>
        </sortable-table>
        <template if="{{loading}}">
            <div>Data is loading ...</div>
        </template>
    </template>

[stevenrskelton]

I added support for empty titles and non-sortable columns. The column name needs to be a valid javascript property name (there are many restrictions like no spaces, that's why there is a title field), so   might be breaking things.

<template is="auto-binding" relative>
    <sortable-table class="bootstrap"
                    footertemplate="defaultPager"
                    rowtemplate="simpleRowTemplate"
                    pagesize="10"
                    loading="{{loading}}">
        <sortable-column name="Name">Name</sortable-column>
        <sortable-column name="Id" title="" sortable="false"></sortable-column>

        <template id="simpleRowTemplate">
            <td>{{record.row.Name}}</td>
            <td><a href='@Url.Action("Edit")/{{record.row.Id}}'>Edit</a></td>
        </template>

        [
            {Name: 'apple', Id: 2 },
            {Name: 'banana', Id: 0 },
            {Name: 'grape', Id: 5 },
            {Name: 'pear', Id: 8 },
            {Name: 'strawberry', Id: 0 },
            {Name: 'apple', Id: 4 },
            {Name: 'banana', Id: 2 },
            {Name: 'grape', Id: 0 },
            {Name: 'pear', Id: 4 },
            {Name: 'strawberry', Id: 2 }
        ]
    </sortable-table>
    <template if="{{loading}}">
        <div>Data is loading ...</div>
    </template>
</template>

This seemed to work for me; I didn't have time to mock up a datatables-ajax before I decided to try Polymer 0.5.1 - which totally broke tonnes of stuff.....

I'll try and help you out as much as I can, I'd love to get an idea of how other people are using this grid.

[brunoshine]

Hi Steven,

I've added the sortable="false" to the last column, with also the title="", but still if I click the header the ajax requests are triggered.

After some debugging, it seems that the sortable attribute is not taken into account in the changeSort method. Can you confirm it?

I've changed from the datatables-ajax to the extjs-ajax.

About usage, I'm replacing all my asp.net mvc scaffolding views to always generate using this :) .

[brunoshine]

mmm It seems that I spoke to soon. The version I had did not had yet your changes :P Sorry. I've updated and now it seems to be working. Thanks.