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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. bind json result from ajax script to Grid

bind json result from ajax script to Grid

Team,

I have grid and like to bind the data from ajax result.

@Html.EJS().DropDownList("Site").PopupHeight("auto").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Site).Text(@ViewBag.sSite).Render()
            <a style="text-decoration:none; font-size:small">Customer: </a>
            @Html.EJS().DropDownList("Customer").PopupHeight("500px").Width("150px").Change("customerList_change").Text(@ViewBag.sCustomer).Render()
            <a style="text-decoration:none; font-size:small">Drop Down: </a>
            @Html.EJS().DropDownList("Dropdown").PopupHeight("500px").Width("200px").Text(@ViewBag.sDropdown).Render()
            <input type="submit" id="Insert" onclick="if (!InsertValidaton()) { return false; }" class="e-primary" value="Get Status" style="font-size:12pt;width:90px;color:white;background:none;background-color:deeppink;border: 1px solid #fff;" />
            <div>
                <h2 style="font-size:small">Batch List (with comma seperator) <label style="color:red"> @ViewBag.sError</label></h2>
                @Html.TextArea("Query", (string)ViewBag.Query, new {
               @style = "width:90%;" +
               "height:50px;" +
               "max-width:90%;" +
               "max-height:30%;"
           })
            </div>
            

 <div>

                @Html.EJS().Grid("Grid").DataBound("dataBound").AllowFiltering().AllowMultiSorting(true).AllowTextWrap(true).AllowPaging(true).AllowExcelExport(true).AllowResizing(true).Height("400").AllowExcelExport().ToolbarClick("toolbarClick").Toolbar(new List<string>() { "ExcelExport" }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).AllowGrouping(false).Render()
            
        </div>





<script type="text/javascript">
    function serviceList_change() {

        var dropObj = document.getElementById("Site"); //to get dropdown list object
        var ddldist = document.getElementById('Customer').ej2_instances[0];
        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadSelectcustomer",
            data: JSON.stringify({ ssite: dropObj.value }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                ddldist.dataSource = data;
                ddldist.dataBind();

            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }
        });



    }
</script>
<script type="text/javascript">


    function customerList_change() {

        var dropObj = document.getElementById("Site"); //to get dropdown list object
        var ddldist = document.getElementById('Customer').ej2_instances[0];
        var ddlddropdownist = document.getElementById('Dropdown').ej2_instances[0];
        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadSelectDropdown",
            data: JSON.stringify({ ssite: dropObj.value, sCustomer: ddldist.value }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                ddlddropdownist.dataSource = data;
                ddlddropdownist.dataBind();
            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }
        });



    }


</script>


<script type="text/javascript">
    function InsertValidaton() {


        var dropObjsite = document.getElementById("Site"); //to get dropdown list object


        var dropObjgrid = document.getElementById("Grid");

        if (dropObjsite.value == null || dropObjsite.value == "") {
            alert("Site should not be empty");
            return false;
        }
        var dropObjcust = document.getElementById("Customer"); //to get dropdown list object
        if (dropObjcust.value == null || dropObjcust.value == "") {
            alert("Customer should not be empty");
            return false;
        }
        // alert("test");
        var dropObjdropdown = document.getElementById("Dropdown"); //to get dropdown list object
        if (dropObjdropdown.value == null || dropObjdropdown.value == "") {
            alert("Drop down should not be empty");
            return false;
        }

        // obtain the object reference for the <textarea>
        // alert("test");
        var txtarea = document.getElementById("Query");
        // obtain the index of the first selected character
        var alltext = txtarea.value;

        // obtain the object reference for the <textarea>

        var txtarea = document.getElementById("Query");
        // obtain the index of the first selected character
        var alltext = txtarea.value;

        //var start = txtarea.selectionStart;
        //// obtain the index of the last selected character
        //var finish = txtarea.selectionEnd;
        //// obtain the selected text
        //var sel = txtarea.value.substring(start, finish);
        //// do something with the selected content
        ////alert(sel);
        if (alltext == null || alltext == "") {
            alert("atleast one batch needed...");
            return false;
        }


        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadGetStatus",
            data: JSON.stringify({ Site: dropObjsite.value, Customer: dropObjcust.value, Dropdown: dropObjdropdown.value, Query: alltext }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (data) {
                alert("sucess");
                dropObjgrid.dataSource = data;

                dropObjgrid.dataBind();

HOW TO DIND DATA HERE
            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }


        });
        return true;
        //window.location.reload();


    }

</script>


12 Replies
NI Nivas January 7, 2019 04:39 AM UTC

kindly help on this

MS Madhu Sudhanan P Syncfusion Team January 7, 2019 09:23 AM UTC

Hi Nivas, 

Greetings from Syncfusion. 

We have analyzed your code and found that you want to provide the datasource to the Grid in success event event of the jquery ajax. Please refer the below code snippet to achieve your requirement, 

@Html.EJS().DropDownList("Site").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.dropdata).Render() 
 
@Html.EJS().Grid("DataGrid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col=> { 
    col.Field("OrderID").IsPrimaryKey(true).Add(); 
    col.Field("CustomerID").Add(); 
    col.Field("EmployeeID").Add(); 
}).Render() 
 
<script> 
    function serviceList_change(args) { 
        var grid = document.getElementById('DataGrid').ej2_instances[0]; // Grid instance 
        var dropObjsite = document.getElementById("Site").ej2_instances[0]; // DropdownList instance 
        var dropdowndata = dropObjsite.value 
        $.ajax({ 
            url: "/DataGrid/NewDatasource", 
            type: 'POST', 
            data: { val:dropdowndata }, 
            success: function (response) { 
                grid.dataSource = response; // provide the datasource to the Grid 
            }, 
        }); 
    } 
</script> 

In this code we have used dataSource property of the Grid to change the Grid default dataSource. We have prepared the sample with your requirement and that can be download from the below link, 

 
Refer the below link to know about dataSource property of the Grid, 


Please refer this sample for further assistance. Also we would like to let you know about our EJ2 ajax, in case if you are not aware of it.  Please refer the below documentation link to know about our ajax, 


We suggest you to use this ajax instead of jquery ajax to achieve your requirement. 

Refer the below link to know about how to change the Grid dataSource by using our EJ2 ajax, 


Regards, 
Madhu Sudhanan P 


NI Nivas replied to Madhu Sudhanan P January 7, 2019 12:58 PM UTC

Hi Nivas, 

Greetings from Syncfusion. 

We have analyzed your code and found that you want to provide the datasource to the Grid in success event event of the jquery ajax. Please refer the below code snippet to achieve your requirement, 

@Html.EJS().DropDownList("Site").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.dropdata).Render() 
 
@Html.EJS().Grid("DataGrid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col=> { 
    col.Field("OrderID").IsPrimaryKey(true).Add(); 
    col.Field("CustomerID").Add(); 
    col.Field("EmployeeID").Add(); 
}).Render() 
 
<script> 
    function serviceList_change(args) { 
        var grid = document.getElementById('DataGrid').ej2_instances[0]; // Grid instance 
        var dropObjsite = document.getElementById("Site").ej2_instances[0]; // DropdownList instance 
        var dropdowndata = dropObjsite.value 
        $.ajax({ 
            url: "/DataGrid/NewDatasource", 
            type: 'POST', 
            data: { val:dropdowndata }, 
            success: function (response) { 
                grid.dataSource = response; // provide the datasource to the Grid 
            }, 
        }); 
    } 
</script> 

In this code we have used dataSource property of the Grid to change the Grid default dataSource. We have prepared the sample with your requirement and that can be download from the below link, 

 
Refer the below link to know about dataSource property of the Grid, 


Please refer this sample for further assistance. Also we would like to let you know about our EJ2 ajax, in case if you are not aware of it.  Please refer the below documentation link to know about our ajax, 


We suggest you to use this ajax instead of jquery ajax to achieve your requirement. 

Refer the below link to know about how to change the Grid dataSource by using our EJ2 ajax, 


Regards, 
Madhu Sudhanan P 



thanks for replay...

 var grid = document.getElementById('DataGrid').ej2_instances[0]; // Grid instance  is not working. 

the grid is not loaded initially, my view will be null at starting page (initial load).

after site, project and drop down selected, then call the ajax to get the data

at server side returning the result as 
 return Json(DataTableToJSONWithStringBuilder(dse.Tables[0]).ToList());

 grid.dataSource = response; // provide the datasource to the Grid  -- working fine but the grid is not visible.






TS Thavasianand Sankaranarayanan Syncfusion Team January 8, 2019 07:07 AM UTC

Hi Nivas, 

From your query, we found that you will not render the Grid in initial page load. Also, we suspect that you will render the Grid in ajax success event. If yes, then please take the Grid instance after rendering the Grid in success event and provide the ajax result to Grid by using DataSource property like as below code snippet, 

$.ajax({ 
            url: "/DataGrid/NewDatasource", 
            type: 'POST', 
            data: { val:dropdowndata }, 
            success: function (response) { 
                var grid = document.getElementById('DataGrid').ej2_instances[0]; 
                grid.dataSource = response; // provide the datasource to the Grid 
            }, 
     }); 
 
Note: We cannot get the instance before the Grid rendering. So please take the Grid instance after the Grid rendering and provide the data to Grid by using the dataSource property from its instance. 

If we misunderstood your query, please share the following details for further assistance, 

  1. Could you please share the details about how you are render the Grid in dom?
  2. Share your full Grid code.

Regards, 
Thavasianand S. 


NI Nivas January 8, 2019 07:38 AM UTC

Thanks for replay, butl still not working

below is my code



<div id="FFUpload">

            <a style="text-decoration:none; font-size:small">Site: </a>
            @Html.EJS().DropDownList("Site").PopupHeight("auto").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Site).Text(@ViewBag.sSite).Render()
            <a style="text-decoration:none; font-size:small">Customer: </a>
            @Html.EJS().DropDownList("Customer").PopupHeight("500px").Width("150px").Change("customerList_change").Text(@ViewBag.sCustomer).Render()
            <a style="text-decoration:none; font-size:small">Drop Down: </a>
            @Html.EJS().DropDownList("Dropdown").PopupHeight("500px").Width("200px").Text(@ViewBag.sDropdown).Render()
            <input type="submit" id="Insert" onclick="if (!InsertValidaton()) { return false; }" class="e-primary" value="Get Status" style="font-size:12pt;width:90px;color:white;background:none;background-color:deeppink;border: 1px solid #fff;" />
            <div>
                <h2 style="font-size:small">Batch List (with comma seperator) <label style="color:red"> @ViewBag.sError</label></h2>
                @Html.TextArea("Query", (string)ViewBag.Query, new {
               @style = "width:90%;" +
               "height:50px;" +
               "max-width:90%;" +
               "max-height:30%;"
           })
            
            @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowFiltering().AllowMultiSorting(true).AllowTextWrap(true).AllowPaging(true).AllowExcelExport(true).AllowResizing(true).Height("400").AllowExcelExport().ToolbarClick("toolbarClick").Toolbar(new List<string>() { "ExcelExport" }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).AllowGrouping(false).Render()


        </div>



<script type="text/javascript">
    function serviceList_change() {

        var dropObj = document.getElementById("Site"); //to get dropdown list object
        var ddldist = document.getElementById('Customer').ej2_instances[0];
        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadSelectcustomer",
            data: JSON.stringify({ ssite: dropObj.value }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                ddldist.dataSource = data;
                ddldist.dataBind();

            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }
        });



    }
</script>
<script type="text/javascript">


    function customerList_change() {

        var dropObj = document.getElementById("Site"); //to get dropdown list object
        var ddldist = document.getElementById('Customer').ej2_instances[0];
        var ddlddropdownist = document.getElementById('Dropdown').ej2_instances[0];
        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadSelectDropdown",
            data: JSON.stringify({ ssite: dropObj.value, sCustomer: ddldist.value }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                ddlddropdownist.dataSource = data;
                ddlddropdownist.dataBind();
            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }
        });



    }


</script>


<script type="text/javascript">
    function InsertValidaton() {


        var dropObjsite = document.getElementById("Site"); //to get dropdown list object


        var dropObjgrid = document.getElementById("Grid");

        if (dropObjsite.value == null || dropObjsite.value == "") {
            alert("Site should not be empty");
            return false;
        }
        var dropObjcust = document.getElementById("Customer"); //to get dropdown list object
        if (dropObjcust.value == null || dropObjcust.value == "") {
            alert("Customer should not be empty");
            return false;
        }
        // alert("test");
        var dropObjdropdown = document.getElementById("Dropdown"); //to get dropdown list object
        if (dropObjdropdown.value == null || dropObjdropdown.value == "") {
            alert("Drop down should not be empty");
            return false;
        }

        // obtain the object reference for the <textarea>
        // alert("test");
        var txtarea = document.getElementById("Query");
        // obtain the index of the first selected character
        var alltext = txtarea.value;

        // obtain the object reference for the <textarea>

        var txtarea = document.getElementById("Query");
        // obtain the index of the first selected character
        var alltext = txtarea.value;

        //var start = txtarea.selectionStart;
        //// obtain the index of the last selected character
        //var finish = txtarea.selectionEnd;
        //// obtain the selected text
        //var sel = txtarea.value.substring(start, finish);
        //// do something with the selected content
        ////alert(sel);
        if (alltext == null || alltext == "") {
            alert("atleast one batch needed...");
            return false;
        }


        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadGetStatus",
            data: JSON.stringify({ Site: dropObjsite.value, Customer: dropObjcust.value, Dropdown: dropObjdropdown.value, Query: alltext }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",


            success: function (data) {
                alert("sucess");

                var dropObjgrid = document.getElementById("Grid").ej2_instances[0];
                alert("sucess2");

                dropObjgrid.dataSource = data;
                //dropObjgrid.dataBound();
                alert("sucess1");
            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }


        });
        return true;
        //window.location.reload();


    }

</script>




NI Nivas replied to Nivas January 8, 2019 07:40 AM UTC

Thanks for replay, butl still not working

below is my code



<div id="FFUpload">

            <a style="text-decoration:none; font-size:small">Site: </a>
            @Html.EJS().DropDownList("Site").PopupHeight("auto").Change("serviceList_change").Width("150px").DataSource((IEnumerable<Object>)@ViewBag.Site).Text(@ViewBag.sSite).Render()
            <a style="text-decoration:none; font-size:small">Customer: </a>
            @Html.EJS().DropDownList("Customer").PopupHeight("500px").Width("150px").Change("customerList_change").Text(@ViewBag.sCustomer).Render()
            <a style="text-decoration:none; font-size:small">Drop Down: </a>
            @Html.EJS().DropDownList("Dropdown").PopupHeight("500px").Width("200px").Text(@ViewBag.sDropdown).Render()
            <input type="submit" id="Insert" onclick="if (!InsertValidaton()) { return false; }" class="e-primary" value="Get Status" style="font-size:12pt;width:90px;color:white;background:none;background-color:deeppink;border: 1px solid #fff;" />
            <div>
                <h2 style="font-size:small">Batch List (with comma seperator) <label style="color:red"> @ViewBag.sError</label></h2>
                @Html.TextArea("Query", (string)ViewBag.Query, new {
               @style = "width:90%;" +
               "height:50px;" +
               "max-width:90%;" +
               "max-height:30%;"
           })
            
            @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowFiltering().AllowMultiSorting(true).AllowTextWrap(true).AllowPaging(true).AllowExcelExport(true).AllowResizing(true).Height("400").AllowExcelExport().ToolbarClick("toolbarClick").Toolbar(new List<string>() { "ExcelExport" }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).AllowGrouping(false).Render()


        </div>



<script type="text/javascript">
    function serviceList_change() {

        var dropObj = document.getElementById("Site"); //to get dropdown list object
        var ddldist = document.getElementById('Customer').ej2_instances[0];
        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadSelectcustomer",
            data: JSON.stringify({ ssite: dropObj.value }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                ddldist.dataSource = data;
                ddldist.dataBind();

            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }
        });



    }
</script>
<script type="text/javascript">


    function customerList_change() {

        var dropObj = document.getElementById("Site"); //to get dropdown list object
        var ddldist = document.getElementById('Customer').ej2_instances[0];
        var ddlddropdownist = document.getElementById('Dropdown').ej2_instances[0];
        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadSelectDropdown",
            data: JSON.stringify({ ssite: dropObj.value, sCustomer: ddldist.value }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                ddlddropdownist.dataSource = data;
                ddlddropdownist.dataBind();
            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }
        });



    }


</script>


<script type="text/javascript">
    function InsertValidaton() {


        var dropObjsite = document.getElementById("Site"); //to get dropdown list object


        var dropObjgrid = document.getElementById("Grid");

        if (dropObjsite.value == null || dropObjsite.value == "") {
            alert("Site should not be empty");
            return false;
        }
        var dropObjcust = document.getElementById("Customer"); //to get dropdown list object
        if (dropObjcust.value == null || dropObjcust.value == "") {
            alert("Customer should not be empty");
            return false;
        }
        // alert("test");
        var dropObjdropdown = document.getElementById("Dropdown"); //to get dropdown list object
        if (dropObjdropdown.value == null || dropObjdropdown.value == "") {
            alert("Drop down should not be empty");
            return false;
        }

        // obtain the object reference for the <textarea>
        // alert("test");
        var txtarea = document.getElementById("Query");
        // obtain the index of the first selected character
        var alltext = txtarea.value;

        // obtain the object reference for the <textarea>

        var txtarea = document.getElementById("Query");
        // obtain the index of the first selected character
        var alltext = txtarea.value;

        //var start = txtarea.selectionStart;
        //// obtain the index of the last selected character
        //var finish = txtarea.selectionEnd;
        //// obtain the selected text
        //var sel = txtarea.value.substring(start, finish);
        //// do something with the selected content
        ////alert(sel);
        if (alltext == null || alltext == "") {
            alert("atleast one batch needed...");
            return false;
        }


        $.ajax({
            type: "POST",
            url: "/Reports/FFUploadGetStatus",
            data: JSON.stringify({ Site: dropObjsite.value, Customer: dropObjcust.value, Dropdown: dropObjdropdown.value, Query: alltext }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",


            success: function (data) {
                alert("sucess");

                var dropObjgrid = document.getElementById("Grid").ej2_instances[0];
                alert("sucess2");

                dropObjgrid.dataSource = data;
                //dropObjgrid.dataBound();
                alert("sucess1");
            },
            error: function (response) {
                alert("fa");

                //  window.location.reload();
            }


        });
        return true;
        //window.location.reload();


    }

</script>




AT CODE BEHIND

AT LOADING PAGE
 [HttpPost]
        public ActionResult FFUploadGetsite()
        {
            
            UservaldEntities pd = new UservaldEntities();
            pd.Configuration.AutoDetectChangesEnabled = false;
            @ViewBag.Site = (from r in pd.SysIdMaster_Detail
                             where r.RptDropdown == true
                             select r.Site).Distinct().OrderBy(rep => rep).ToList();
            return Json(@ViewBag.Site);
        }




        [HttpPost]
        public ActionResult FFUploadSelectcustomer(string ssite)

        {
            if (User.Identity.Name.ToUpper() != "")
            {

                if (ssite != "")
                {

                  
                    UservaldEntities pd = new UservaldEntities();
                    pd.Configuration.AutoDetectChangesEnabled = false;
                   var customer = (from r in pd.SysIdMaster_Detail
                                         where r.RptDropdown == true && r.Site == ssite
                                         select r.Customer).Distinct().OrderBy(rep => rep).ToList();
                    return Json(customer);
                }

                return Json("");
            }
            else
            {
                return View("../Account/Login");
            }

        }




        [HttpPost]
        public ActionResult FFUploadSelectDropdown(string ssite, string sCustomer)

        {
            if (User.Identity.Name.ToUpper() != "")
            {

                if (ssite != "")
                {


                    UservaldEntities pd = new UservaldEntities();
                    pd.Configuration.AutoDetectChangesEnabled = false;
                    var DropDown = (from r in pd.SysIdMaster_Detail
                                    where r.RptDropdown == true && r.Site == ssite && r.Customer == sCustomer
                                    select r.DropDown).Distinct().OrderBy(rep => rep).ToList();
                    return Json(DropDown);
                }

                return Json("");
            }
            else
            {
                return View("../Account/Login");
            }

        }




[HttpPost]
        public ActionResult FFUploadGetStatus(string Site, string Customer, string Dropdown, string Query)

        {

            UservaldEntities pd = new UservaldEntities();
            pd.Configuration.AutoDetectChangesEnabled = false;

            var DropDownDtails = pd.SysIdMaster_Detail.Where(x => x.Site == Site && x.Customer == Customer && x.DropDown == Dropdown).ToList();
            string sname = DropDownDtails[0].ProdServer.ToString();
            string susername = HomeController.Decrypt(pd.ServerCrendDetails.Where(x1 => x1.Serverip == sname).Select(x => x.Username).ToList()[0].ToString());
            string password = HomeController.Decrypt(pd.ServerCrendDetails.Where(x1 => x1.Serverip == sname).Select(x => x.passwords).ToList()[0].ToString());
            string sCondstring = "Data Source=" + sname + ";Initial Catalog=" + DropDownDtails[0].ProdDataBase.ToString() + ";Persist Security Info=True;User ID="+ susername + ";Password="+ password + ";MultipleActiveResultSets=False;";
            sname = "passing query ";
            DataSet dse= WeakReferenceFF(sname, sCondstring, "");
          //  sname = DataTableToJSONWithStringBuilder(dse.Tables[0]);
            return Json(DataTableToJSONWithStringBuilder(dse.Tables[0]).ToList());
        }



MS Madhu Sudhanan P Syncfusion Team January 9, 2019 12:33 PM UTC

Hi Nivas, 
 
Query: Thanks for replay, butl still not working. 
 
From your code snippet, you bound the grid datasource dynamically by using external button. For your reference, we have created sample based on your requirement. Here, we have changed grid datasource dynamically by using button click. Please find the below code example and sample for your reference. 
 
[code example] 
@{ 
    ViewBag.Title = "Grid localization"; 
} 
 
@Html.EJS().Button("element").Content("Change Grid DataSource").Render(); 
 
 
<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging().PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 
 
<script> 
 
    document.getElementById("element").addEventListener("click", function () { 
        var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 
        $.ajax({ 
            url: "/Home/DataSource", 
            type: "POST", 
           success: function (result) { 
                grid.dataSource = result; 
            } 
        }) 
    }) 
 
</script> 
 
 
If you are still facing the same problem, could you please bind actionFailure event to grid and share the error details if any error throws or screenshot of the grid after the data bind. 
 
Regards, 
Madhu Sudhanan P 


NI Nivas replied to Madhu Sudhanan P January 9, 2019 02:23 PM UTC

Hi Nivas, 
 
Query: Thanks for replay, butl still not working. 
 
From your code snippet, you bound the grid datasource dynamically by using external button. For your reference, we have created sample based on your requirement. Here, we have changed grid datasource dynamically by using button click. Please find the below code example and sample for your reference. 
 
[code example] 
@{ 
    ViewBag.Title = "Grid localization"; 
} 
 
@Html.EJS().Button("element").Content("Change Grid DataSource").Render(); 
 
 
<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging().PageSettings(page => page.PageSize(8)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 
 
<script> 
 
    document.getElementById("element").addEventListener("click", function () { 
        var grid = document.getElementById('Grid').ej2_instances[0]; // Grid instance 
        $.ajax({ 
            url: "/Home/DataSource", 
            type: "POST", 
           success: function (result) { 
                grid.dataSource = result; 
            } 
        }) 
    }) 
 
</script> 
 
 
If you are still facing the same problem, could you please bind actionFailure event to grid and share the error details if any error throws or screenshot of the grid after the data bind. 
 
Regards, 
Madhu Sudhanan P 


Thanks for update and now able to bind the data...but binding as below. 



MS Madhu Sudhanan P Syncfusion Team January 10, 2019 10:21 AM UTC

Hi Nivas, 

Thanks for the update. From the screenshot it looks like the dataSource is assigned to the grid as array of string. Could you please ensure whether the data source is in the form of array of JavaScript objects. If the issue still persist then please share the dataSource of the grid to analyze at our end. 

Regards, 
Madhu Sudhanan P 


NI Nivas January 10, 2019 01:46 PM UTC

Thanks  for your Support...its works and could able to see the data.  one more can u give me the style so it will fit the colums....

 


TS Thavasianand Sankaranarayanan Syncfusion Team January 11, 2019 05:25 AM UTC

Hi Nivas, 

As per your given detail we suspect that you want to fit columns based on the content. So, we suggest you to use autoFitColumns method of Grid. 

Refer the below documentation for further details. 


Regards, 
Thavasianand S. 


NI Nivas replied to Thavasianand Sankaranarayanan January 11, 2019 01:19 PM UTC

Hi Nivas, 

As per your given detail we suspect that you want to fit columns based on the content. So, we suggest you to use autoFitColumns method of Grid. 

Refer the below documentation for further details. 


Regards, 
Thavasianand S. 


solved. Thanks for ALL your support.

Loader.
Up arrow icon