Kendo UI: Read to Read-Write grid


As you might know, I’m a avid contributor to Stack Overflow in questions related to Kendo UI.

Few days back, someone asked on how to switch a Grid from read-only to read-write on a button click. He/she was trying to play with the Grid option readable option but this options once set is not possible being changed. Well, actually you can change but it has no effect, no matter if you refresh the grid, read the data again,…
Maybe, he/she was looking for a complex solution based on playing with the DataSource schema model and each field attribute but there is a much simpler solution.
So, what is the simplest way of achieving this…

Kendo UI: make read-only Grid writeable

The easiest way is creating two Grid with exactly the same option and, very important, sharing the DataSource, where one has editable set to false. Also, one of the Grids is hidden (just adding CSS class that defines display to none) while the other is visible.
When you click the button for enabling writing, you toggleClass so the hidden becomes visible and viceversa.

Why did I say that is important sharing the DataSource? Because if you navigate through one of the grids and then commute modes, you don’t want to go back to the beginning, making visible that used the trick of two grids.

This is the CSS class that I defined.

.ob-hidden {
    display: none;
}

And this is the HTML with the two Grids.

<div id="grid-editable"></div>
<div id="grid-editable"></div>

Next, define the two grids that only differ in the option editable.

// Define one single and share datasource
var ds = new kendo.data.DataSource({
    data    : data,
    pageSize: 10,
    schema  : {
        model: {
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                City     : { type: 'string' },
                Title    : { type: 'string' },
                BirthDate: { type: 'date' },
                Age      : { type: 'number' }
            }
        }
    }
});

// Grid editable
$("#grid-editable").kendoGrid({
    dataSource: ds,
    editable  : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 },
        { field: "Title" },
        {
            field   : "BirthDate",
            title   : "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        },
        { width: 50, field: "Age" }
    ]
});

// And Grid not editable
$("#grid-not-editable").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 },
        { field: "Title" },
        {
            field   : "BirthDate",
            title   : "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        },
        { width: 50, field: "Age" }
    ]
});

The code for switching modes is:

$("#grid-editable").toggleClass("ob-hidden");
$("#grid-not-editable").toggleClass("ob-hidden");

Simple and fast!

If you want to see this solution in action, try it here.

Sometimes you need to re-think on what you want to achieve instead of insisting on how to get it.

Advertisements

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