Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Callum Hutchinson
100
How to make a column editable when generating a GrideModel in the controller (mvc)
posted

Hey I currently have the following code which I have used to generate a grid model within the controller class for my page:

private GridModel GetGridModel(IEnumerable<TimelineViewModel> timelineVMs)
{

var model = new TimelineViewModel();

GridModel gridModel = new GridModel();
gridModel.ID = "gridModel";
gridModel.AutoGenerateColumns = false;
gridModel.AutoGenerateLayouts = false;
gridModel.PrimaryKey = "ID";
gridModel.LoadOnDemand = false;
gridModel.Width = "100%";
gridModel.Columns = new List<GridColumn>()
{
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.ID)), Key = nameof(TimelineViewModel.ID), DataType = "string", Width = "5%", Hidden = true},
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.EquipmentType)), Key = nameof(TimelineViewModel.EquipmentType), DataType = "string", Width = "10%"},
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.SubType)), Key = nameof(TimelineViewModel.SubType), DataType = "string", Width = "10%" },
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.CurrentInstallation)), Key = nameof(TimelineViewModel.CurrentInstallation), DataType = "string", Width = "10%" },
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.StartDate)), Key = nameof(TimelineViewModel.StartDateString), DataType = "string", Width = "15%" },
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.EndDate)), Key = nameof(TimelineViewModel.EndDateString), DataType = "string", Width = "15%" },
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.DayRate)), Key = nameof(TimelineViewModel.DayRate), DataType = "string", Width = "10%" },
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.ClientPONumber)), Key = nameof(TimelineViewModel.ClientPONumber), DataType = "string", Width = "20%" },
new GridColumn() { HeaderText = model.GetDisplayName(nameof(TimelineViewModel.WebConfirmed)), Key = nameof(TimelineViewModel.WebConfirmed), DataType = "string", Width = "10%" },
};

gridModel.DataSourceUrl = this.Url.Action("GetCategoriesData");
gridModel.DataSource = timelineVMs.AsQueryable();

gridModel.Features.Add(new GridHiding());
gridModel.Features.Add(new GridFiltering() { Type = OpType.Local, Inherit = true, Persist = false });
gridModel.Features.Add(new GridSorting() { Type = OpType.Local, Inherit = true, Persist = false });
gridModel.Features.Add(new GridPaging() { Type = OpType.Local, Inherit = true, PageSize = 5 });
gridModel.Features.Add(new GridResponsive()
{
EnableVerticalRendering = false,
});

return gridModel;
}

I was wondering what code needs to be added to allow certain columns to be editable, the documentation on this particular issue seems to be somewhat lacking (as i can only find samples of making columns editable when the grid is created within the view / the only sample of code that shows how to generate a grid within the controller doesn't mention anything about adding the ability to edit columns).

cheers! 



 

  • 15320
    Offline posted

    Hello Callum,

    In order to make certain column editable or readonly, you should define Updating feature in the GridModel and column settings for the columns that you want to make readonly, for example:

    

    GridUpdating updating = new GridUpdating();
    

    ColumnUpdatingSetting colSetting = new ColumnUpdatingSetting();
    

    colSetting.ColumnKey = "Name";
    

    colSetting.ReadOnly = true;
    

    updating.ColumnSettings.Add(colSetting);
    

    model.Features.Add(updating);

    Rest of the columns will be editable.

    Please let me know if you have further questions.

    Regards,
    Tsanna