ASP.NET MVC Telerik Grid: How to make one column read only on edit?

3
votes

I have an ASP.NET MVC Telerik Grid (not Kendo). I have a grid with two columns. The first column is a drop down list of items I can select from, and the second column is just an editable textbox.

I want to set the first column to READ ONLY on edits, meaning I can only edit the second column but not the first column. I set the first column to read only in both the model ([ReadOnly] tag in the model class) and in the view (i.e. Editable(false)).

When I do this, I'm not allowed to edit the first column in edit mode like I want. However, when I go to insert/create a new record... the first column is blank and I can only enter values for the second column.

I've tried everything and looked around, but couldn't find a solution.

3
asp.net-mvcuser-interfaceteleriktelerik-gridtelerik-mvc
cant you add some javascript to make it read only - meda
How do I make a select list read only? There's some AJAX going on that I'm not too comfortable with. When I hit "edit", the SelectList comes up, otherwise, it's just two textareas I can view. - mute
do you mind showing some code or a screenshot ?? - meda
With both columns as Editable: i.imgur.com/Nrqw8PI.png ; with the first column as read only for edit mode: i.imgur.com/D8FHGTl.png ; with first column as read only for create new record: imgur.com/kjjN6UK (notice how I have a blank area for the first column as its set to read only) - mute
stackoverflow.com/questions/7823680/… ... This is on the right track, but it's not working for me. When I hit edit, the first column turns into a drop down box. How do I prevent or stop this... and make it read only? - mute

3 Answers

9
votes

try this :

model.Field(p => p.Name).Editable(false)

Example:

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Sortable(false).Visible(false);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Notes);
        columns.Command(command => { command.Edit(); }).Width(172);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
        .Model(model => {
                 model.Id(p => p.Id);
                 model.Field(p => p.Name).Editable(false);
         })
        .Update(update => update.Action("EditingInline_Update", "Grid"))
    )
)

Ref: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#model

2
votes

I had a similar issue with a text field. I solved it by hooking the Edit event.

@Html.Kendo().Grid<MyViewModel>()...Events(e => e.Edit("onGridEdit"))
<script type="text/javascript">
  function onGridEdit(e) {
    if (!e.model.isNew()) 
      e.container.find('input#ID').prop('disabled', true);
  }
</script>

In this example I wanted my ID field to be unchangeable after it's created. Your mileage and jQuery may vary, but I suspect the solution would be similar.

-1
votes

TL;DR;

If you are using grid template columns, keep the EditItemTemplate empty as follows:

 <telerik:GridTemplateColumn DataField="opt_id" UniqueName="opt_id" DataType="System.Int32">
     <ItemTemplate>
         <telerik:RadLabel Text='<%# DataBinder.Eval(Container.DataItem, "opt_id") %>' runat="server" />
     </ItemTemplate>
     <EditItemTemplate></EditItemTemplate>
 </telerik:GridTemplateColumn>

So by using above, when entered into edit mode, the item will still be read only.