asp.net-mvckendo-gridkendo-asp.net-mvc

Kendo UI Grid .Net MVC - Column editable in Creation only


I've been searching how to make a column in a Kendo Grid ASP.Net MVC (Razor) Editable only while we are in creation and not editable while in update.

Is there something special that will help me accomplish this task?


Solution

  • You can bind a custom function to the onEdit event and make that column readonly:

    @(Html.Kendo().Grid<DemoType>()
          .Name("grid")
          .Columns(columns =>
          {
             /*...*/
          })
          .Events(events => events
              .Edit("onEdit")
          )
      )
    

    Javascript:

    function onEdit(e) {
        if (e.model.isNew() == false) {
            //$('[name="YourcolumnName"]').attr("readonly", true);
            //replace input with span
            //taken from https://stackoverflow.com/questions/3142990/jquery-replace-inputs-with-spans
            $('[name="YourcolumnName"]').each(function() {
              $("<span />", { text: this.value}).insertAfter(this);
              $(this).hide();
           });
        }
    }