I wouldn't imagine this is the first time anyone has want to do this.... so here it goes.
I've constructed an application with a "data forms" page which is nothing more than a simple <ul><li> dropdown menu of categories and items in categories which enumerate data table/view object names from the back-end storage (SQL Server). I have the SQL Server models and a working implementation for a "fixed" coded display of the data model in an igGrid using the MVC helper.
My goal is to use the <li> element value (constructed at run-time from the database menu data structure) to then reference the model I want to dynamically construct in the page. I'm OK with having the columns auto-generate. I just want to make this work first, then I can dive into the details.
Has anyone done something like this?
I'm using the strongly typed syntax for the igGrid construction (via ASP.Net MVC helper)
@(Html.Infragistics().Grid<LLMVC.Models.FTErequest>() .ID("myDataGrid") .AutoGenerateColumns(false) .PrimaryKey("id") .RenderCheckboxes(true) .Columns(column => {
....
Any help is gratefully appreciated!
Jim H
Hello Jim,
Thank you for posting in our community.
Please let me clarify your requirement. If I understood you right, you want to have combo with some data and based on the selected item from this combo to populate some grid with data. Is that right? Please confirm if this is the case in order to be able to continue assisting you.
Sincerely,
Tsanna
I can't say that I understand "want to have combo with some data" - but otherwise I believe you understand.
If I may attempt to clarify...
The "combo" is a unordered list <ul> of list items <li>. This looks like a "menu" in the UI. What is important is that any given <li> has an ItemName and a value. I want to add an ActionLink to the Controller (we can call it SelectedDataObject) and the controller would then direct the population of the Grid with the named model object from the selected list item.
It's not difficult to dynamically build the "menu" to call the SelectedDataObject ActionLink and have it pass the value of the data object name (a table or view in the SQL Server backend) I want to display in the grid. My conundrum is how to construct the grid at runtime so that it displays the data from the data object name that was passed to the Controller via the ActionLink: SelectedDataObject
I hope that helps to clarify things.... but yes - I think you did understand.
What I see as the difficulty is with the Grid Construction (at least via the MVC Helper) with the model itself. Since I'd be loading the grid with different "models" (IE - the definition of any give table would not be the same as another). So how can I build the Grid with a reference to a model that I can't know until run-time?
I'm currently looking into this matter and will keep you posted.
At the meantime if you have any additional questions, please let me know.
I've created a sample that demonstrates how to populate igGrid via combo selection on the server. Essentially I'm handling selectionChanged event of the combo and passing the selected item's value to jQuery get method, then the requested from the server data is sent and could be accessed through a function that specifies if the request succeeds. In that function you can bind the grid by setting the returned data as grid datasource through the grid API methods. Some code snippet for example:
//Index.cshtml
...
<script> function comboSelectionChanged(e, ui) { var selectedItem = ui.items[0].value $.get('@Url.Action("SelectedDataObject", "Home")', { "value": selectedItem }, onsuccess);
} function onsuccess(data) { $("#grid").igGrid("option", "dataSource", data); $("#grid").igGrid("dataBind"); } </script>
//HomeController.cs
public ActionResult SelectedDataObject(int value) { IEnumerable<Person> people = GetData().Where(x => x.ID == value); return Json(people, JsonRequestBehavior.AllowGet); }
I'm attaching a sample with similar scenario for your reference.
Please let me know if it works for your.
Tsanna,
Thanks for trying, but this will fail because you assume only one model (Person). The "real" problem is in making the model flexible such that the model is ANY model and changes based on the user selection. The whole point is to allow the user to select what data they want to view/edit...
// Index.cshtml
@using Infragistics.Web.Mvc
////////////////////////////////////////////////////////////////////
/// here is the issue with your proposed solution...
@model IQueryable<populateGridFromCombo.Models.Person>
<!DOCTYPE html>
<html>
<head>
<title></title>
In this case you may try two options:
- either to define the grid in the json returned from the ajax request and define its columns dynamically according to the returned json:
function onsuccess(data) { //define the grid here with the dynamically generated columns }
- or to define the whole GridModel in the controller and pass it different models (if you want to use the MVC wrapper)
If I can provide further assistance, please let me know.