Hi,
I am creating igGird at runtime in the controller(c#). I need a to display combo box in the grid column. Here is the code below:
gridUpdating.ColumnSettings.Add(new ColumnUpdatingSetting { ColumnKey = "LastChangedEmployee", // Required = true, EditorType = ColumnEditorType.Combo, ComboEditorOptions = { Mode= ComboMode.DropDown, DataSource= "GetCombo()" }
});
public ActionResult GetCombo() { var security = new List<object> { new { value=1, text="ADMIN"}, new { value=1, text="ANALYSTS"} }; return Json(security);
}
Please let me know where I am going wrong.
Hello Indra,
I have been looking into your question and to achieve your requirements you must initialize the igGrid and define an igCombo editor in the igGrid Updating's column settings for a specific column.
To begin with, you will create a ViewModel class that will declare the model that will be presented in the grid as IEnumerable, and the model for the combo editor as IQueryable. This is important so that the data can be visualized in the grid.
public class CustomersViewModel { public IEnumerable<Customer> Customers { get; set; } public IQueryable<Country> Countries { get; set; } public IQueryable<Job> Jobs { get; set; } }
In the controller, what you should do is to create a viewModel of this class by assigning the data to the given properties and pass them to the view as:
public ActionResult Index() { var viewModel = new CustomersViewModel { Customers = GetCustomers(), Countries = GetCountries(), Jobs = GetJobs(), }; return View(viewModel); }
After that, in the view, you will initialize the grid by assigning the model to be of type queryable with the AsQueryable() method.
@(Html.Infragistics().Grid(Model.Customers.AsQueryable())
When initializing the Updating feature, the ColumnSettings property will specify which columns should be edited with the combo editor. As for the purpose of the ColumnKey, you will set the EditorType and declare the ComboEditorOptions, and for the DataSource of the combo editor you will submit the given property with the data from the model that is responsible for the column and which you submitted to the grid.
features.Updating() .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Country").EditorType(ColumnEditorType.Combo).ComboEditorOptions(options => { options.DataSource(Model.Countries); options.TextKey("Value"); options.ValueKey("Value"); }); });
Also keep in mind that all necessary dependencies must be installed such as: IgniteUI, Infragistics.Web.AspnNetCore, Newtonsoft.Json.
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.
1122.igGrid Combo Editor-.zip
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
I need to something like generate the entire gird in C# and bind to the grid in the view.
Is this achievable to generate the grid dynamically at runtime in the controller.
Thanks
Indra
I have been looking into your question and in the sample that I provide you above, the grid is generated at runtime by passing the data from the controller to the view. According to the data or according to different custom logic, you can change the grid features, columns, styles and so on everything in the view. Various data models can be passed from the database or from elsewhere by creating dynamic runtime grid in the view.
However, regarding your question, Ignite UI Asp.Net Core also provides the ability to create the entire grid in a given controller by passing only the grid to the rendering view.
@(Html.Infragistics().Grid(Model))
It initialise the grid, its id, primary key, height and width, as well as the columns and all other properties according to your custom logic.
GridModel gridModel = new GridModel(); gridModel.DataSource = GetCustomers().AsQueryable(); gridModel.ID = "gridModel"; gridModel.AutoGenerateColumns = false; gridModel.PrimaryKey = "ID"; gridModel.Width = "100%"; gridModel.Columns = new List<GridColumn>(); gridModel.Columns.Add(new GridColumn() { HeaderText = "ID", Key = "ID", DataType = "number" }); gridModel.Columns.Add(new GridColumn() { HeaderText = "Name", Key = "Name", DataType = "string" }); gridModel.Columns.Add(new GridColumn() { HeaderText = "Country", Key = "Country", DataType = "string" });
Various features can be added with additional settings given according to the needs of the user.
gridModel.Features.Add(new GridFiltering() { Type = OpType.Local, Inherit = true, Persist = false }); gridModel.Features.Add(new GridSorting() { Type = OpType.Local, Inherit = true, Persist = false });
And again, both during the initialization of the combo box in the view and in the controller in the updating feature, ColumnSettings are submitted with columns that must be edited with a certain editor, as in this case it is the combo box.
gridModel.Features.Add(new GridUpdating() { ColumnSettings = new List<ColumnUpdatingSetting>() { new ColumnUpdatingSetting() { ColumnKey = "Country", EditorType = ColumnEditorType.Combo, ComboEditorOptions = { DataSource = GetCountries(), TextKey = "Value", ValueKey = "Value" } }, new ColumnUpdatingSetting() { ColumnKey = "Job", EditorType = ColumnEditorType.Combo, ComboEditorOptions = { DataSource = GetJobs(), TextKey = "Value", ValueKey = "Value" } } } });
Additional information about the overall process, capabilities and settings when initializing the grid in controllers can be found in this sample topic from the Ignite UI Asp.Net Core documentation.
Also, more information and steps on creating a dynamic runtime grid in a controller can be found in this help topic from our documentation.
6215.igGridRunTimeCreate.zip
Thank you for your response. All your examples are ASP.net Core MVC? do you have any ASP.Net core non mvc examples? Because I tired one example in .net core and it did not work.
In order to ensure that the described scenario is addressed correctly, I will need some additional information regarding your scenario. Could you please answer the following questions:
This information is going to be highly appreciated and will help me in my further investigation.
However, the samples I provide are the code snippets from the models, controllers and views, they do not contain the necessary dependencies and builds to run the given project. What you can do is create your own project and copy the given code snippets while also adding the necessary dependencies: IgniteUI, Infragistics.Web.AspnNetCore, Newtonsoft.Json.
On the other hand, Ignite UI provides front-end material components as such they are all related in one form or another to presentation in given views and are not back-end technologies. If you don't want to use this approach with Ignite UI for Asp.Net MVC then you can combine Asp.Net Core API controllers with some of our front and rich material UI web technologies like for jQuery, Angular, React, Web components and so on. More information about this can be found on our website.
Thank you for your cooperation.
Looking forward to hearing from you.