KendoUI: readonly rows (how to and command template)


A couple days ago Piyush, a frequent reader and commenter on this blog, asked me about how to make a row in a KendoUI grid read-only.

What he tried was handling edit event and if the row was read-only then he exited the edit mode but this introduced and undesired effect: a flickering (due to entering and exiting edit popup/inline mode).

KendoUI: read-only rows

Flickering

What Piyush originally asked me was how to avoid flickering but this is actually not possible since by the time edit event is fired, the row is already in edit mode.

You can easily demonstrate this introducing and alert(“editing”); in the code and you see that the popup window for editing fields is active while alert window is waiting for ok so, you will always have the flickering.

Lets have the following DataSource definition:

var dataSource = new kendo.data.DataSource({
    data    : [
        { symbol: "AAPL", company: "Apple Inc.", readonly: true },
        { symbol: "AMZN", company: "Amazon.com Inc.", readonly: true },
        { symbol: "IBM", company: "International Business Machines Corp." },
        { symbol: "CSCO", company: "Amazon.com Inc", readonly: true },
        { symbol: "MSFT", company: "Microsoft Corp.", readonly:false },
        { symbol: "INTC", company: "Intel Corp." },
        { symbol: "QCOM", company: "QUALCOMM Inc." },
        { symbol: "ORCL", company: "Oracle Corp." },
        { symbol: "HPQ", company: "Hewlett-Packard Company" },
        { symbol: "CRM", company: "salesforce.com, Inc." }
    ],
    pageSize: 5
});

And the grid defined as:

var grid = $("#stocks_tbl").kendoGrid({
    dataSource: dataSource,
    columns   : [
        { command: "edit", width: 100 },
        { field: "symbol", title: "Symbol", width: 100 },
        { field: "company", title: "Company", width: 300 }
    ],
    editable  : "popup",
    edit      : function () {
        alert("editing");
        grid.closeCell();
    },
    pageable  : true
}).data("kendoGrid");

If you run this you will see:

Capture1

So, there is nothing that we can do for avoiding the flickering but there are some things that I can do for getting the desired result.

Template based solution

This solution is based on defining a template that creates an Edit button for each row but controlled by readonly field.

The template would be something like:

<script id="edit-template" type="text/x-kendo-template">
    # if (!data.readonly) { #
    <a class="k-button k-button-icontext k-grid-edit" href="\#"><span class="k-icon k-edit"></span>Edit</a>
    # } #
</script>

and the new JavaScript code:

var editTemplate = kendo.template($("#edit-template").html());
var grid = $("#stocks_tbl").kendoGrid({
    dataSource: dataSource,
    columns   : [
        { field: "readonly", title: "", width: 100, template: editTemplate },
        { field: "symbol", title: "Symbol", width: 100 },
        { field: "company", title: "Company", width: 300 }
    ],
    editable  : "popup",
    pageable  : true
}).data("kendoGrid");

And this looks like:

Capture2

Done! … Actually almost, if I click on Edit button, I get:

Capture3

Where the field readonly is editable.

I might try to define a Schema for the DataSource and define readonly as not editable. But this does not prevent the field from being rendered.

Capture4

What else may I try?

  1. Remove the title of the field by defining it to a white-space using title: “ “ (note that there is a blank between both “).
  2. Define an editor function that actually does nothing.

What I have now is:

var grid = $("#stocks_tbl").kendoGrid({
    dataSource: dataSource,
    columns   : [
        { field: "readonly", title: " ", width: 100, template: editTemplate, editor: function() {} },
        { field: "symbol", title: "Symbol", width: 100 },
        { field: "company", title: "Company", width: 300 }
    ],
    editable  : "popup",
    pageable  : true
}).data("kendoGrid");

And when I edit the field I finally get:

Screen Shot 2012-12-26 at 00.43.28

Advertisements

2 thoughts on “KendoUI: readonly rows (how to and command template)

  1. Hi Emiliano,

    It’s work like a charm !!! No word for this one…
    It’s seem you written blog for me only to help me out of my problem. It means lot too me.

    Thank you very much.
    Piyush

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