dyncamic data binding to asp.net mvc grid using datatable

[Abdul Wahab]

I want to bind data to my grid using datatable which is coming from sql database so i need some column visible and some column not visible and if add more column from 

database that should show to grid without changing in code.

Like in my case i have this grid below

  @Html.EJS().Grid("orgDashbaordTable").DataSource((System.Data.DataTable)Model.OrgDashboardCModel2).ShowColumnChooser(true).AllowSorting().EnablePersistence(false).Columns(col =>

               {

                   col.Field("entityId").HeaderText("Ref").Template("${refdetails(data)}").Width(40).Add();

                   col.Field("entityName").HeaderText("Business Name").Width(100).Add();

                   col.Field("shortName").HeaderText("Business Short Name").ShowInColumnChooser(false).Width(70).Add();

                   col.Field("entityType").HeaderText("Type").Width(60).Add();

                   col.Field("Vat").HeaderText("VAT/GST").Template("${vatdetails(data)}").Width(30).AllowFiltering(false).AllowSorting(false).Add();

                   col.Field("software").HeaderText("Accounting Software").Template("${softwaredetails(data)}").Width(30).AllowFiltering(false).AllowSorting(false).Add();

                   col.Field("processingCount").HeaderText("Processing").Width(30).Add();

                   col.Field("processedCount").HeaderText("Processed").Width(30).Add();

                   col.Field("approvedCount").HeaderText("Approved/Exported").Width(30).Add();

                   col.Field("LastDocumentUpload").HeaderText("Last Upload").SortComparer("sortComparer").Width(70).Add();

                   col.Field("ReportingRequirement").HeaderText("Next Reporting").Width(70).Add();

                   col.Field("DueDate").HeaderText("Due Date").Template("${duedatedetails(data)}").Width(100).Format(new { type = "date", format = "dd-MMM-yyyy" }).Add();

               }).AllowPaging().PageSettings(page => { page.PageCount(12); }).Toolbar(new List<string>() { "ColumnChooser" }).AllowSorting().Render()

i have defined some columns in a column defined list and the column which are not in a list the are not showing in grid i want them to show in a grid

[Rajapandi Ravi]

Hi Abdul, 

Greetings from syncfusion support 

Based on your query we suspect that you need to add the columns dynamically. To achieve your requirement we suggest you to push the new column to the Grid columns property and then call the refreshColumns method of EJ2 Grid to refresh the changes in UI. 

In below sample we have added news the columns using an external button. So we suggest you to follow the same way in your target function. Please refer the below code example for more information. 

Index.cshtml 

 

<button onclick="btnClick()">Render Grid</button> 

<div class="control-section"> 

    @( 

            @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

            { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add(); 

                col.Field("CustomerID").HeaderText("Customer Name").Width("100").Add(); 

                col.Field("Freight").HeaderText("Freight").Width("160").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

                col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); 

 

            }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 

    ) 

</div> 

 

<script> 

    function btnClick() { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.columns.push({ field: "ShipName", headerText: 'Ship Name', width: 120 }, { field: "ShipCity", headerText: 'Ship City', width: 120 });  //you can add the columns which was not defined in the columns list 

        grid.refreshColumns();                    //After push the new column into Grid columns you have to call the refreshcolumns() 

 

    } 

</script> 

<script> 

    function btnClick () { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.columns.push({ field: "ShipCity", headerText: 'Ship City', width: 150}); 

        grid.refreshColumns();        

       } 

</script> 

 

 

Regards, 

Rajapandi R

[Abdul Wahab]

Hi Abdul, 

Greetings from syncfusion support 

Based on your query we suspect that you need to add the columns dynamically. To achieve your requirement we suggest you to push the new column to the Grid columns property and then call the refreshColumns method of EJ2 Grid to refresh the changes in UI. 

In below sample we have added news the columns using an external button. So we suggest you to follow the same way in your target function. Please refer the below code example for more information. 

Index.cshtml 

 

<button onclick="btnClick()">Render Grid</button> 

<div class="control-section"> 

    @( 

            @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

            { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add(); 

                col.Field("CustomerID").HeaderText("Customer Name").Width("100").Add(); 

                col.Field("Freight").HeaderText("Freight").Width("160").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

                col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); 

 

            }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 

    ) 

</div> 

 

<script> 

    function btnClick() { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.columns.push({ field: "ShipName", headerText: 'Ship Name', width: 120 }, { field: "ShipCity", headerText: 'Ship City', width: 120 });  //you can add the columns which was not defined in the columns list 

        grid.refreshColumns();                    //After push the new column into Grid columns you have to call the refreshcolumns() 

 

    } 

</script> 

<script> 

    function btnClick () { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.columns.push({ field: "ShipCity", headerText: 'Ship City', width: 150}); 

        grid.refreshColumns();        

       } 

</script> 

 

 

Regards, 

Rajapandi R

Thanks it works for me

[Rajapandi Ravi]

Hi Abdul, 

We are happy to hear our suggested solution was working with your end. 

 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R