setting fuelux datagrid column cellls to string from object collection

Question

MY fuelux datagrid look like this inside backbone render function

    var dataSource = new StaticDataSource({
            columns: [
                                     {
                                           property: 'id',
                                           label: 'id',
                                          sortable: true
                                     },
                {
                    property: 'name',
                    label: 'groups',
                    sortable: true
                },
                {
                    property: 'name',
                    label: 'Roles',
                    sortable: true
                }
            ],
            data: this.collection,
            delay: 250
        });
        $('#sectionName').html('Groups');
        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

this.collection return json as follows

[
{
    "id":1,
    "roles":[
                {"id":1,"authority":"ROLE1"},
                {"id":2,"authority":"ROLE2"},
                {"id":3,"authority":"ROLE3"}
            ],
    "groups":[
                {"id":1,"name":"A"},
                {"id":2,"name":"B"},
                {"id":3,"name":"C"}
          ]
},
{
    "id":2,
    "roles":[
                {"id":5,"authority":"ROLE4"},
                {"id":5,"authority":"ROLE5"},
                {"id":6,"authority":"ROLE6"}
            ],
    "groups":[
                {"id":4,"name":"D"},
                {"id":5,"name":"E"},
                {"id":6,"name":"F"}
          ]
}

]

I want fuelux datagrid to have column id, roles and groups. it should look like as below:

    id        roles                        groups
    1         role1, role2 , role3          A, B, C
    12        role3, role4 , role5          D, E, F

I tried to write formatter function something like this but it did not work

 var dataSource = new StaticDataSource({
        columns: [
            {
                property: 'id',
                label: 'id',
                sortable: true
            },
            {
                property: 'name',
                label: 'groups',
                sortable: true
            },
            {
                property: 'name',
                label: 'Roles',
                sortable: true
            }
        ], 

       formatter: function (items) {
                $.each(items, function (index, item) {
                                    item.roles= //string made from groups with comma
                    item.groups= //string made from roles with comma

            },
        data: this.collection,
        delay: 250
    });

    $('#MyGrid').datagrid({
       //as above
    });
  formatter: function (items) {
                $.each(items, function (index, item) {
                   item.roles= //string of roles made from roles with comma
                                   item.groups= /string of groups made from groups with comma 
                });
            },

It would be great help if somebody here can help me out.

score 1 · Answer 1 · answered Apr 09 '13 at 09:33

1

for your column defs each property should match the property names returned by your datasource. Try this:

{
    property: 'id',
    label: 'ID',
    sortable: true
},
{
    property: 'roles',
    label: 'Roles',
    sortable: true
},
{
    property: 'groups',
    label: 'Groups',
    sortable: true
}

answered Apr 09 '13 at 09:33

Adam Alexander

15,132
5
42
41

thanks for the answer. Actually, that displays [object object]. I want to display infact role cell for first model as role1, role2 , role3 and as role4, role5 , role 6 for second model inside the cell. I tried even roles[0].name for test and even that dosent get displayed. – Lasang Apr 09 '13 at 09:51
I am not familiar enough with your use case to provide specifics, but as long as the property contains a string (with text and/or html) by the time it reaches the datagrid it will be displayed as you expect. The job of your datasource and formatter function is to convert the data into the format expected by the datagrid. – Adam Alexander Apr 09 '13 at 17:41
thanks for your hints on line "The job of your datasource and formatter function is to convert the data into the format expected by the datagrid.". Presently, I solved my problem. But, the datagird broke it sorting, searching, etc. Should i set them inside datasource? – Lasang Apr 10 '13 at 11:14
Yes, on all paging and sorting the datagrid will call your datasource's `data` function again and pass the options that were selected. You then return the data the grid is asking for. – Adam Alexander Apr 10 '13 at 13:33

score 1 · Answer 2 · answered Apr 10 '13 at 11:10

I have been able to solve my problem as follows

 formatter: function (items) {
                $.each(items, function (index, item) {
                    var roleCell = new app.RoleSupplier({ model: item      });
                    roleCell.render();
                    item.roles = roleCell.$el; //set property name above to roles
                });
            },

Then, I created RoleSupplier as below

 app.RolesSupplier = Backbone.View.extend({
    template: _.template($('#roles-cell-template').html()),
    render: function (eventName) {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

I created template as below

 <script type="text/template" id="roles-cell-template">
        <div>
            <@ _.each(roles.toJSON(), function( role, index, list ){ @>
                <@ if(index < (list.length - 1)) { @>
                    <@=role.authority + ','@>
                <@ } else { @>
                    <@=role.authority@>
                <@ } @>
            <@ }); @>

        </div>  
    </script>

This worked for me. But, what user of fuelux have to understand is:

you can set property name to name of key in json to set their value

property:'id', label:'ID' //will set id value to column name ID

If you have some json value and you like to display them in specific way, or you cant some html in cell, you format them as below

formatter: function (items) {
                $.each(items, function (index, item) {
                     item.yourPropertyName1= format your html here that you want  appear in label1
                     item.yourProeprtyName 2= fromat your html like button , anything you want inside column cell of label2                 
                });
            },

setting fuelux datagrid column cellls to string from object collection

2 Answers2