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

Grid with Dynamic Editing Modes

1 Answer 240 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Julio
Top achievements
Rank 1
Julio asked on 14 May 2013, 03:41 PM
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

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 16 May 2013, 08:14 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Julio
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or