Set ReadOnly property to a column of devexpress grid(MVC) only on edit click

Question

I have a devexpress grid in my partial view,

Each row of the grid has an add, update and delete button.

When clicked on update of the particular row, a form pops down which contains all the columns of the grid.

Now i want to set the readonly property of one of the columns to true, which i did by column.ReadOnly = true;

But what this does is sets the column to readonly always i.e. even during New Click.

Where as i want this readonly property only during edit click.

here is my devexpress grid code

@{

    var grid = Html.DevExpress().GridView(settings =>
    {
        settings.Name = "GridViewDuration";
        settings.CallbackRouteValues = new { Controller = "DurationMaster", Action = "GridViewDurationPartial" };

        settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction1" };
        settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction2" };
        settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction3" };
        settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
        settings.SettingsBehavior.ConfirmDelete = true;

        settings.CommandColumn.Visible = true;
        settings.CommandColumn.ShowNewButton = true;
        settings.CommandColumn.ShowDeleteButton = true;
        settings.CommandColumn.ShowEditButton = true;

        settings.KeyFieldName = "DurationId";

        settings.SettingsPager.Visible = true;
        settings.SettingsPager.PageSize = 20;
        settings.Settings.ShowGroupPanel = true;
        settings.Settings.ShowFilterRow = true;
        settings.SettingsBehavior.AllowSelectByRowClick = false;
        settings.Columns.Add(column =>
        {
            column.FieldName = "Column1";
            column.ReadOnly = true;
            column.Width = 20;

        });
        settings.Columns.Add(column =>
        {
            column.FieldName = "Column2";
            column.Caption = "xyz";
            column.ColumnType = MVCxGridViewColumnType.ComboBox;
            column.Width = 250;

            var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
            comboBoxProperties.DataSource = PMC.Web.Controllers.DurationMasterController.getSelectList("0", "MyAction4");
            comboBoxProperties.TextField = "Text";
            comboBoxProperties.ValueField = "Value";
            comboBoxProperties.ValueType = typeof(int);
            comboBoxProperties.ValidationSettings.RequiredField.IsRequired = true;


        });
        settings.InitNewRow = (sender, e) =>
        {
            e.NewValues["ColumnId"] = 0;
        };
        settings.Columns.Add("ColumnName");
        settings.Columns.Add("Description");
        //settings.Columns.Add("DisplayName");
        settings.Columns.Add(column =>
    {
        column.Caption = "FromDate";
        column.FieldName = "FromDate";
        column.ColumnType = MVCxGridViewColumnType.DateEdit;
        column.ReadOnly = true;
        var DateEditProperties = column.PropertiesEdit as DateEditProperties;
        column.CellStyle.Wrap = DefaultBoolean.False;
    });



    settings.Columns.Add(column =>
    {
        column.Caption = "ToDate";
        column.FieldName = "ToDate";

        column.ColumnType = MVCxGridViewColumnType.DateEdit;
        var DateEditProperties = column.PropertiesEdit as DateEditProperties;
        column.CellStyle.Wrap = DefaultBoolean.False;
    });
    });
    if (ViewData["EditError"] != null)
    {
        grid.SetEditErrorText((string)ViewData["EditError"]);
    }

}
@grid.Bind(Model).GetHtml()

This is how my grid looks on initial load.

and when clicked on update for editing

score 1 · Accepted Answer · answered Aug 08 '16 at 12:25

1

If I understand you well, I think you will need to use edit template to solve issue you're describing.

Inside edit template action you can check if new row is in edit by checking property value ASPxGridView.IsNewRowEditing

Please see example below.

    settings.Columns.Add(col =>
    {
        col.FieldName = "Id";
        col.Caption = "Id";

        col.SetEditItemTemplateContent(e =>
        {
            if (e.Grid.IsNewRowEditing)
            {
                // your code here
            }
            else
            {
                // your code here
            }
        });
    });

Please check following links for more details

MVCxGridViewColumn.SetEditItemTemplateContent https://documentation.devexpress.com/#AspNet/DevExpressWebMvcMVCxGridViewColumn_SetEditItemTemplateContenttopic(68Z8MA)

ASPxGridView.IsNewRowEditing https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridView_IsNewRowEditingtopic

answered Aug 08 '16 at 12:25

PeterS

78
6

I tried that, only to find that the entire Datecontrol of the column disaapears, instead of just making it readonly @peters – WorksOnMyLocal Aug 09 '16 at 09:08
It disappeared because this is just an example. You need to add specific Devexpress MVC control definition inside 'if' statement. That will write HTML control output, into ViewContext.Writer. Something like this : `code ViewContext.Writer.Write( Html.DevExpress().DateEdit(settingsDateEdit => { settingsDateEdit.Name = "fromDate"; settingsDateEdit.Width = Unit.Percentage(100); settingsDateEdit.ReadOnly = !e.Grid.IsNewRowEditing; }).Bind(fromDate).GetHtml() ); ` – PeterS Aug 09 '16 at 10:24
Pleas try this and let me know if it works for you. If something is not clear just let me know too :) – PeterS Aug 09 '16 at 10:27

Set ReadOnly property to a column of devexpress grid(MVC) only on edit click

1 Answers1

Linked