This is a migrated thread and some comments may be shown as answers.

Disable Grid Column (w/template) in edit mode only

1 Answer 2796 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GCS
Top achievements
Rank 1
GCS asked on 07 Oct 2015, 07:10 PM

I am trying to disable a column which uses a template in a grid. I would like to disable it ONLY if the grid is in Edit mode. I am trying the following as shown below. Can anyone shed some light as to why this does not work and what I need to to do to make this work? Thanks! 

 

@(Html.Kendo().Grid<AMP.Security.Models.UserAccountDto>()
                                  .Name("grid")
                                  .Columns(columns =>
                                  {
                                      columns.Bound(p => p.Account).ClientTemplate("#=Account.Name#");
                                      //columns.Bound(p => p.AccountRoleName);
                                      columns.Bound(p => p.AccountClientName);
                                      columns.Bound(p => p.AccountAdmin);
                                      columns.Command(command => { command.Edit(); command.Destroy();
                                      command.Custom("Configure").Click("configAccount");
                                      }).Width(300);
                                  })
                                          .HtmlAttributes(new { style = "height: 400px;" })
                                  .ToolBar(toolbar => { toolbar.Create().Text("Add Account"); })
                                  .Editable(editable => editable.Mode(GridEditMode.InLine))
                                  .Events(events => events.Edit("onGridEdit"))
                                  .Sortable()
                                   
                                   
                                   
                                  .Scrollable()
                                  .Selectable(a => a.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                                  .DataSource(datasource => datasource
                                      .Ajax()
                                      .Events(events => events.Error("gridError"))
                                      .ServerOperation(false)
                                      .Model(model =>
                                      {
                                          model.Id(p => p.UserAccountId);
                                          model.Id(p => p.Account);
                                          model.Field(f => f.AccountClientName).Editable(false);
                                          model.Field(f => f.UserId).DefaultValue(Model.UserId);
                                          //model.Field(f => f.AccountRoleId).DefaultValue(ViewData["roledefault"] as int?);
                                          model.Field(f => f.Account).DefaultValue(ViewData["accountdefault"] as AMP.Security.Models.AccountDto);
                                      })
                                      .Read(read => read.Action("UserAccountsRead", "UserProfile", new { userid = Model.UserId }))
                                              .Create(update => update.Action("UserAccountsCreate", "UserProfile"))
                                              .Update(update => update.Action("UserAccountsUpdate", "UserProfile"))
                                              .Destroy(update => update.Action("UserAccountsDestroy", "UserProfile"))
                                      .Sort(sort => sort.Add("AccountName").Ascending())
                                      .PageSize(50)
                                  )
)

The template for the Account column is defined as: 

 

@using Kendo.Mvc.UI
@(Html.Kendo().DropDownListFor(m => m)
    .Name("Account") // Name of the widget should be the same as the name of the property
    .DataValueField("AccountId") // The value of the dropdown is taken from the EmployeeID property
    .DataTextField("Name") // The text of the items is taken from the EmployeeName property
    .BindTo((System.Collections.IEnumerable)ViewData["accounts"])
            )

The onGridEdit function is: 

function onGridEdit(e)
{
    if (e.model.isNew() == false) {
        var cell = $('[name="account"]');
        cell.attr("readonly", true);
        cell.attr("enabled", false)
    }
 }

1 Answer, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 09 Oct 2015, 08:07 AM
Hi Dave,

You could specify a column as readonly in the model configuration with the Editable(false) option:
.DataSource(dataSource => dataSource
    .Ajax() // or .Server()
    .Model(model =>
    {
        ...
        // Declare a model field and make it readonly
        model.Field(p => p. Account).Editable(false);
    })
)

If that is not an option in the current scenario, you should use an alternative approach. For example with inline editing you could bind to the edit event of the Grid, perform the custom checks and disable the editor for the column.

Regards,
Radoslav
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
GCS
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Share this question
or