Grid with Dynamic Editing Modes

2 posts, 0 answers
  1. Julio
    Julio avatar
    2 posts
    Member since:
    Oct 2012

    Posted 14 May 2013 Link to this post

    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
    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.    }
    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));
    32.    return gridBuilder;

    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.
    02.columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);
    04..Model(model =>
    06.    model.Id(p => p.ProductID);
    07.    model.Field(p => p.ProductID).Editable(false);

    Another question that I have,  is there any way to set the DataSource Model property dynamically?
    2..DataSource(source => source.Ajax()
    3.    .Model(model =>
    4.    {
    5.        model.Id(p => p.ProductID);
    6.        model.Field(p => p.ProductID).Editable(false);
    7.    })

    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,
  2. Vladimir Iliev
    Vladimir Iliev avatar
    2194 posts

    Posted 16 May 2013 Link to this post

    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");
    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!
Back to Top