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
280
Bind comboBox to igGrid at runtime
posted

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.

Parents
No Data
Reply
  • 500
    Offline posted

    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

Children