We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Neeraj Purohit,
We deeply regret for the inconvenience caused and please ignore the previous update.
We have created a simple grid sample in which the grid datasource can be rendered based on the dropdown values and the same can be downloaded from the below location.
Sample Location: http://www.syncfusion.com/downloads/support/directtrac/general/DataBinding-Forms741345001.zip
In the above sample, the grid is initially loaded with the data from Orders table. And there are two dropdownlist available at the page in which one drop down list contains table names. The second dropdownlist will loaded with the corresponding column names available in the table selected in first dropdownlist. The second dropdownlist will be updated with the column names from server based on the value selected in the first dropdownlist in the change event as follows.
|
<div class="col-md-3" style="margin-top: 10px"> <label>Select Columns</label> <ej:DropDownList ID="drop1" runat="server" ClientSideOnChange="getColumns"> //Table Dropdownlist <Items> <ej:DropDownListItem Text="Orders" Value="Orders" /> <ej:DropDownListItem Text="Employees" Value="Employees" /> </Items> </ej:DropDownList> <br /> <label>Select Table</label> <ej:DropDownList ID="drop2" runat="server" ShowCheckbox="true"> //Column dropdownlist </ej:DropDownList> <br /> <br /> <ej:Button ID="done" runat="server" Type="Button" Text="Done" Size="Normal" ShowRoundedCorner="true" ClientSideOnClick="bindData"> </ej:Button> </div>
<script> function getColumns(args) { var val = this.getSelectedValue();//get table name $.ajax({ url: "Default.aspx/getColumns", type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", data: JSON.stringify({ table: val }), success: function (data) { var drop2 = $("#drop2").ejDropDownList("instance"); $("#drop2").ejDropDownList({ dataSource: data.d, showCheckbox: true }); //binding the column names from the server } }); }
function bindData(args) { //ejButton onclick event var cols = $("#drop2").ejDropDownList("model.value"); //get selected column values var table = $("#drop1").ejDropDownList("getSelectedValue"); //get table name $.ajax({ url: "Default.aspx/getRecords", type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", data: JSON.stringify({ table: table }), success: function (data) { $("#OrdersGrid").ejGrid("destroy"); // destroy grid $("#OrdersGrid").ejGrid({ dataSource: data.d, query: ej.Query().select(cols.split(",")), allowPaging: true }); //re-rendering grid with new data from server } }); } </script>
|
We have returned the column names and records from the server using the webmethod and it is as follows.
|
[System.Web.Services.WebMethod] // Return column names based on table public static IEnumerable getColumns(string table) { var model = new AttributeMappingSource().GetModel(typeof(NorthwindDataContext)); List<string> cols = new List<string>(); foreach (var mt in model.GetTables()) { if (mt.TableName == "dbo." + table) { foreach (var dm in mt.RowType.DataMembers) { cols.Add(dm.MappedName.ToString()); } } } return cols; }
[System.Web.Services.WebMethod] //Return records public static object getRecords(string table){ if(table == "Employees") return new NorthwindDataContext().EmployeeViews.ToList(); else if(table == "Orders") return new NorthwindDataContext().OrdersViews.Skip(0).Take(100).ToList(); return "Table not found"; }
|
The output of the above provide sample will look like follows.
Please let us know if you have any queries.
Regards,
Madhu Sudhanan. P
