How to make a non-editable column field?

[King Wilder]

I have a kendoGrid() set to editable: true.  It has two columns and I want one column to simply show the value, and the other column to be editable.  Is this possible?

The exact scenario: the left column shows a value, and the right column has a selectable DropDownList.

I'm able to include the DropDownList in the right column for each table cell, but the left hand column is still editable as a text box.  I'd like to disable that functionality if possible, so it's not editable at all.

Any ideas on how to achieve this?

Thanks

[Jay]

I really liked Jeff's idea about replacing the editor.  I made it a little more mainstream:

function nonEditor(container, options) {
    container.text(options.model[options.field]);
}

 

Then when defining your column, assign the above function as the editor:

columns: [
        { field: "Price", editor: nonEditor }
    ]

 

not too shabby ;)

[ptw]

Many thanks for that Jay. (And Jeff & other contributors). omg. I've spent sooo long trying to work this out.The editable:false in the schema could not work for me because I'm using a calculated field (so my grid shows user name, while original field is userId).

It'd be nice to have a standard method for this, rather than a work-around.

One minor refinement to Jay's code - I removed the edit class on the container too - so there was no visible change on (non)Edit, so:

function nonEditor(container, options) {
    container.text(options.model[options.field]);
    container.removeClass("k-edit-cell");
}

 

[John]

I know this thread is kinda old now...but this was the exact solution I was looking for. Just wanted to say thanks. So...thanks.

[Blake]

Thank you.  I provided a modified version to maintain format. Important it the column has a currency symbol shown along with numbers.

container.text(kendo.format(options.format, options.model[options.field]));

[Henrik]

Jeff, Jay and ptw: Thank you very much, this saved me a whole lot of headache! Thumbs up!

[Haythem]

How can i make it non editable column, but i can create it ? (can't update , but can create a new one ) 

[Preslav]

Hi Haythem,

To achieve this behavior, use the isNew method of the model.

• https://docs.telerik.com/kendo-ui/api/javascript/data/model/methods/isnew

For example:

function customBoolEditor(container, options) {
  if(options.model.isNew()){
    var guid = kendo.guid();
    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
    $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
  }else{
    container.text(options.model[options.field]);
    container.removeClass("k-edit-cell");
  }
}

The above is demonstrated in this Dojo:

• https://dojo.telerik.com/USAGaZER

Regards,
Preslav
Progress Telerik

[Iliana Dyankova]

Hello King,

You could achieve it as in the dataSource schema set an editable: false configuration option to the fields which will be non-editable. For example: 

dataSource = new kendo.data.DataSource({
   ...
   schema: {
       model: {
          id: "ProductID",
          fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { editable: false },
                 ...
          }
       }
   }
});

I hope this helps. 

Kind regards,
Iliana Nikolova
the Telerik team

[King Wilder]

Wow, I must have looked at that bit of documentation 20 times and not seen that property.  I need my eyes checked.

Thanks.

[tejas]

Dear Iliana,

Is there another way (other than making field editable: /true/false) ?

The reason, I have complex JSON object as data and I cannot define schema for complex(nested) structure.

[Bob]

We are using Kendo for MVC complete. We are able to set the field to Editable(false) which works fine. The columns are basically informational so when the user selects a value in the first column, we populate the next three non-editable columns with information pulled with ajax. However, when the model item is set as non-editable it seems that when we set the value using the set() method of the observable object it doesn't change and the grid gets updated. 

Is it possible to set the value in the dataSource even though it has been set to not-editable? I don't see a way to set the "column" as not editable similar to the MVC Extensions grid which I assume just doesn't attach an editor template to the field, or uses the display template rather than the editor template?

We do have a slight work around, to add HtmlAttribute of disabled to the columns in question I guess if the answer is no. I guess I would have to style the disabled input box in the k-grid cause we don't like them grayed out.

[Dimo]

Hello Bob,

Indeed, when a field in the Model is not editable, its value cannot be changed programmatically. I am not sure what exactly are you trying to achieve, but generally, loading Grid cell content based on selections on the same table row doesn't sound like a very standard user experience workflow. Please consider displaying all the information initially or enable Grid filtering / grouping in order to achieve appropriate user interface.

Greetings,
Dimo
the Telerik team

[Bob]

>I am not sure what exactly are you trying to achieve, but generally, loading Grid cell content based on selections on the same table row doesn't sound like a very standard user experience workflow

When adding a row to an editable grid after the user selects a value from the dropdown/lookup we display additional; information from the lookup table in the grid row. 

For example, think of a grid where you are adding employees to a list of people taking a training class. You add a record to the grid and select an employee by employee number... then the screen will populate the employee name into another column that is a read-only column. 

BOb

[Dimo]

Hello Bob,

My understanding is that the purpose of the Employee name is only to facilitate the addition process from user's perspective. Having the Employee name as a field in the training class table sounds like breaking the data normalization, as the name is obviously stored in another table, right?

That is why I can suggest you the following:

+ Use a foreign key column, so that the Employee name is directly viewable when inserting a new row. You can even create such a datasource for the Emplyoee dropdown, so that both the Employee ID and Name are visible.

http://demos.kendoui.com/web/grid/foreignkeycolumn.html

or

+ Use a popup edit form with a template, and the Employee name will be displayed next to the selected Employee ID for informational purposes. The actual Employee name field will not be shown in the popup, but you can display it in the respective row after the Grid gets rebound after the editing is complete.

http://demos.kendoui.com/web/grid/editing-popup.html

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-create-a-custom-popup-editor?

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

Alternatively, you can use a template for the Employee ID field, so that the name is loaded in the same cell during editing.

Finally, you can make the Employee name field editable, but use a template for it, which includes a readonly textbox, so the user will not be able to modify it manually, but you will be able to modify it programmatically.

Regards,
Dimo
the Telerik team

[mark]

I am running into a similar issue. My Grid is within the context of a product that comes from a combo box. I dynamically change the data source based on the value of the combo box.

When clicking the 'create new', I want the new record to always have that product id specified by the combobox. When the user saves, that product id field is always null because it is a read-only field in the grid.

How do I jam in the product ID from the combo box on a newly created record?

-Ti

[Dimo]

Hello Mark,

You can try the last suggestion from my previous reply. Instead of a readonly textbox, you can also use a hidden input.

Regards,
Dimo
the Telerik team

[Mark]

I like the fact that you can disable any modifications to the data at the model but there may be a variety of reasons that one might wish to modify data in a grid programmatically but NOT allow the user to directly modify the data.  The "editor" based solutions above will work but they seem a bit kludgy.  I would prefer an "editable" field on the columns as well as the model.

BTW: I'm a different Mark than the one above.

[Dimo]

Hello Mark Davis,

Using an edit template with a readonly textbox (or even no textbox) and a hidden field is a pretty reasonable way to achieve the discussed scenario (in my opinion). Are you suggesting that a better option is to use an editable textbox, which the user will be able to modify, but the changes will be ignored (reverted), or the UI should alert him that changes to that field are not allowed? This seems like an unexpected and non-user-friendly implementation to me, which will also be more complex that it needs to be.

Let me know if I am missing something and you imagine things in a different way.

Regards,
Dimo
Telerik

[Mark]

Hey Dimo,

I'm suggesting is that it would be convenient to have an "editable" configuration property on the grid columns that could be set to false such that the grid's UI would not allow the user to modify the data in the grid column EVEN THOUGH the data could still be altered programmatically and saved to the database IF the data source's model has editable = true for the given field.  

The model setting says "This field can/can't be modified on the client period", the grid column setting says "This field can/can't be modified by this particular grid".  If the model is configured with editable = false for the field, the data could not be modified in the grid (or any other element for that matter) regardless of the grid column setting. 

Essentially all I'm saying is that the column read-only capability be decoupled from the model and implemented internally by the grid via a simple "editable" field and not by a workaround.  The solution above works just fine but it's a matter of code clarity.

Thanks

[Bob]

Mark,

I agree... that would be a good way to handle this. But, I guess that's basically what I'm doing by setting the edit template to read only.

If you suggest it on get satisfaction let me know and I will throw a vote on it.

BOb

[Dimo]

Hello,

I see. Since the described behavior can't be achieved currently as well, I can suggest you to submit a new feature request at http://feedback.kendoui.com/. If it gains enough popularity, we can include it out-of-the-box.


Regards,
Dimo
Telerik

[Alex]

How can this described feature can be achieved. i.e. Field can not be editable by user but the values can be changed from a client side script.

[Dimo]

Hello Komail,

The discussed behavior can be achieved if you use the suggestions, which are already provided above. Let me know if you need any clarifications.

Regards,
Dimo
Telerik

[Jeff]

The thing I don't like about the given solutions of setting editable in the dataSource is that a) whether a grid column is editable or not shouldn't be in the dataSource, it should be int eh column definitions, and b) it requires you to set every field in the dataSource, which is less that desirable for large or complex structures.

Instead, you can also override the editor on the grid, and basically remove the editor.  The grid cell will still get the CSS classes that go along with being edited, and the grid will still think the cell is being edited, but there will be no visible editor, so the user can't actually change the values:

    columns: [
        { field: "Price", editor: function(element, options) { element.text(options.model.Price) } }
    ]

I'm not saying this is the "right" way or even a "better" way, but offering it as a solution that may work better in some situations.

[Louis]

You can also do this which works for me.  Particularly useful with an if statement if you want have fields only editable in update but not create.

{
    field:.....
    editor: function (container, options) {
          var editor = $("<div style='width:100%; text-align:center;'><span>  {{ model.newRow.LastName }}</span></div>")
                            .appendTo(container);
                    },