Grid with Dynamic Editing Modes

[Julio]

I have a grid with two columns: OrganizationId and OrganizationName. 

The users are able to create/edit new Organizations. when an user clicks in the Create toolbar button both properties should be editable. 
The thing is, when the grid is rendered it probably has some records, so if the user tries to edit one of those, he/she is going to be able to edit the OrganizationName, but the OrganizationId has be a label. 
This last behavior doesn't apply if the user tries to edit a new record (a record added with the create button functionality in this render time).
 
At the end it should be like
if it's old record -> edit mode = label + textbox
if it's new record -> create/edit mode = textbbox + textbox

Right now I have my custom kendo wrapper that reads the object properties, dynamically builds the grid columns and returns a GridBuilder. It look like this: 

01.public static CustomGridFor<TProperty> KendoGrid<TModel, TProperty>(
02.    Expression<Func<TModel, IEnumerable<TProperty>>> expression,
03.    string defaultProperty,
04.    string createAction,
05.    string readAction,
06.    string updateAction,
07.    string controller,
08.    string errorHandler) where TProperty : class
09.{
10.    var dataSource = expression.Compile().Invoke(htmlHelper.ViewData.Model);
11.    var gridColumnSettings = GridBuilderExtensions.CreateGridColumnSettings<TProperty>() as List<GridColumnSettings>;
12.    if (gridColumnSettings != null)
13.    {
14.        gridColumnSettings.Add(new GridCommandColumnSettings { Commands = { new GridEditActionCommand(), }, });
15.    }
16.
17.    var gridBuilder = new this.Grid(dataSource)
18.        .Name("GridName")
19.        .Columns(c => c.LoadSettings(gridColumnSettings))
20.        .DataSource(source => source
21.            .Ajax()
22.            .PageSize(50)
23.            .Model(model => model.Id(defaultProperty))
24.            .Destroy(d => d.Action(destroyAction, controller))
25.            .Read(r => r.Action(readAction, controller))
26.            .Update(u => u.Action(updateAction, controller))
27.            .Batch(true)
28.            .Events(e => e.Error(errorHandler)))
29.        .ToolBar(a => a.Create().Text("New"))
30.        .Editable(editable => editable.Mode(GridEditMode.InLine));
31.
32.    return gridBuilder;
33.}

I made some research about the grid behavior and found the  Grid / Editing custom editor, this example has a ClientTemplate and Editable as false, something like this is what I want for the OrganizationId edit mode in the in old records and for the new ones edition I can use the Inline Editing.

01....
02.columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);
03....
04..Model(model =>
05.{
06.    model.Id(p => p.ProductID);
07.    model.Field(p => p.ProductID).Editable(false);
08.})
09....

Another question that I have,  is there any way to set the DataSource Model property dynamically?

1....
2..DataSource(source => source.Ajax()
3.    .Model(model =>
4.    {
5.        model.Id(p => p.ProductID);
6.        model.Field(p => p.ProductID).Editable(false);
7.    })
8....

I mean, do something like the columns loading where we can build the columns list with its name, behavior, ... and then set it.

1..Columns(c => c.LoadSettings(new IEnumerable<GridColumnSettings>()))

thanks in advance,
-julio

[Vladimir Iliev]

Hi Julio,

 
I'm not sure If I understand you correctly but if you need to disable one of the editors (or replace it with label) only when editing existing records you can use the Edit event of the Grid to check if current model is new to find the needed editor inside the container and disable or remove it. Please check the example below:

function onEdit(e) {
    if (!e.model.isNew()) {
        var editor = $(e.container).find("[name=OrderDescription]");
        var td = editor.closest("td");
        td.html(editor.val());
    }
}

Kind Regards,
Vladimir Iliev
the Telerik team