KendoUI grid with composed (compounded) cell


The good thing about UI is that you can define one that gets pretty close to what you have in mind.

The bad thing about UI is that you can define one that gets very far away from what the developer (of the UI infrastructure) was thinking about.

Sometimes people wants to show in a single column of a grid two fields. Example: you want to display weight and units. But having it in two columns is not good enough for you (my recommendation: keep it in two columns, its simpler and UI/UX is about user experience and not about fanciness). Anyhow, lets see how it can be done using KendoUI.

KendoUI composed (compounded) fields in a column

KendoUI simples editable grid

Lets start with the following JavaScript code:

var leitmotifs =  [
    { company:"OnaBai", leitmotif:"N/A" },
    { company:"Nike", leitmotif:"Just do it!" }
];

var grid = $("#table").kendoGrid({
    dataSource: {
        data: leitmotifs
    },
    editable: {
        mode: "inline"
    },
    columns: [
        { command: [ "edit" ], title:"" },
        { field: "company", title: "Company" },
        { field: "leitmotif", title: "Leitmotif" }
    ]
})

That defines a table with two columns company and leitmotif and then displays it allowing to modify the content of both fields.

Basic KendoUI grid
Basic KendoUI grid

The power of templates

Templates in KendoUI provide flexibility to UI developers allowing to do all sort of crazy things (remember: you can do it but you don’t have to do it: keep it simple!).

On the following code I’m going to get the name of the company and display it in upper case.

var leitmotifs =  [
    { company:"OnaBai", leitmotif:"N/A" },
    { company:"Nike", leitmotif:"Just do it!" }
];

var grid = $("#table").kendoGrid({
    dataSource: {
        data: leitmotifs
    },
    editable: {
        mode: "inline"
    },
    columns: [
        { command: [ "edit" ], title:"" },
        { field: "company", title: "Company", template:"#= company.toUpperCase() #"},
        { field: "leitmotif", title: "Leitmotif" }
    ]
})

What you get is:

KendoUI grid using templates
KendoUI grid using templates

Displaying compounding fields in a grid cell

Lets use templates for displaying in one single cell the value of both fields separated by ‘ : ‘

var leitmotifs =  [
    { company:"OnaBai", leitmotif:"N/A" },
    { company:"Nike", leitmotif:"Just do it!" }
];

var grid = $("#table").kendoGrid({
    dataSource: {
        data: leitmotifs
    },
    editable: {
        mode: "inline"
    },
    columns: [
        { command: [ "edit" ], title:"" },
        { field: "company", title: "Company", template:"#= company + ' : ' + leitmotif #"}
    ]
})

Et voilà I get one cell with both fields.

KendoUI grid composed cell
KendoUI grid composed cell

Wait! what happens in editon mode?

KendoUI grid composed cell in edition mode
KendoUI grid composed cell in edition mode

Oops! Obviously, KendoUI doesn’t know about my intentions and when it generates the edition version of a cell, the emitted code is a single input HTML element for the field that I have specified in column and, of course, field is not a list of fields.

Edition of composed elements

As well as KendoUI provides template for displaying elements they also provide one solution for edition: editor attribute.

var leitmotifs = [
    { company:"OnaBai", leitmotif:"N/A" },
    { company:"Nike", leitmotif:"Just do it!" }
];

grid = $("#table").kendoGrid({
    dataSource:{
        data :leitmotifs
    },
    editable  :{
        mode:"inline"
    },
    columns   :[
        { command:[ "edit" ], title:"", width: 170 },
        {
            field :null,
            title :"Company",
            template: "#= company + ' : ' + leitmotif #",
            editor:function (container, options) {
                $('<input name="company"/>' +
                        ' : ' +
                        '<input name="leitmotif"/>')
                        .appendTo(container);
            }
        }
    ]
}).data("kendoGrid");

And now what I get is:

KendoUI grid with composed cell supporting edition mode
KendoUI grid with composed cell supporting edition mode

As far as I define my own editor, the value of field is not relevant.

If you want to verify that you data is actually updated you can introduce the following HTML code and clicking on it, it shows you the value of grid.dataSource.data().

<div class="k-group k-popup"
     id="dump-area"
     onclick='console.log(grid.dataSource.data()); $("#dump-area").html(JSON.stringify(grid.dataSource.data()))'>
    Click here to show content of 'data'.
</div>
Advertisements

One thought on “KendoUI grid with composed (compounded) cell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s