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

bind Syncfusion Grid via json result on ajax call

I have a dropdown list, On change of that dropdown, doing the below ajax call from which I want to bind the syncfusion grid. JSON method is hitting and getting the list but I am unable to bind the data to grid.

         { 'CategoryId': CategoryId },
         function (data) {
            // I want to bind the grid here

I tried in 2 ways one is to return json result an other way returning the view

Option 1:

public JsonResult GetUserData(string CategoryId)
   return Json(model.lstUserModel, JsonRequestBehavior.AllowGet);

Option 2:

 public ActionResult GetUserData(string CategoryId)
   model.lstUserModel= GetUserData(Convert.Int32(CategoryId));
   return View("UserView", model);


in both the option I am unable to bind the data to list.

4 Replies

AS Alan Sangeeth S Syncfusion Team August 22, 2014 10:02 AM UTC

Hi Rocky,

Thanks for using Syncfusion Products.

We are glad to let you know that we have created a sample based on your requirement and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/EJGrid36823034683.zip

In the above sample, during "change” event of Dropdown Control we are updating the Grid datasource using “dataSource” method of Grid. Please refer the following code snippets.

@(Html.EJ().DropDownList("Drop").Datasource((System.Collections.IEnumerable)ViewBag.dataSource2).ClientSideEvents(eve => eve.Change("dropChangeHandler")).SelectedItemIndex(0))


function dropChangeHandler(args) {


            url: "Home/DataSource",

            type: "POST",


            success: function (result) {

                var obj = $("#Grid").ejGrid("instance")






Please let us know if you need any further assistance.

Alan Sangeeth S

LA laxmeesha November 18, 2014 02:13 PM UTC

Hi guys,

I need on help for syncfussion I am loading sucfussion grid in a partial view , But I am getting error .ejgrid function is undefined.

I have a view In that view On rel='nofollow' href click I am calling ajax function and in that I am calling controller method with will return to partial view and data  i am storing in viewbag.

So can anyone help how to rsolve this issue

Controller method:
     public ActionResult CustomGridpartialView()

             string fromdate = "08/09/2014";
             string todate = "09/09/2014";
             string view = "quarter";
             DateTime fdate = new DateTime();
             DateTime tdate = new DateTime();
             DateTime Deafultdate =  Convert.ToDateTime("09/09/2014"); //new DateTime();
             int daysInMonth = DateTime.DaysInMonth(Deafultdate.Year, Deafultdate.Month);
             DateTime monthStartDate = new DateTime(Deafultdate.Year, Deafultdate.Month, 1);
             if (view == "month")
                 DateTime monthEndDate = new DateTime(Deafultdate.Year, Deafultdate.Month, daysInMonth);
                 fdate = monthStartDate;
                 tdate = monthEndDate;
             if (view == "week")
                 DateTime monthEndDate = new DateTime(Deafultdate.Year, Deafultdate.Month, daysInMonth);
                 fdate = monthStartDate;
                 tdate = monthEndDate;
             if (view == "quarter")
                 DateTime monthEndDate = new DateTime(Deafultdate.Year, Deafultdate.Month+3, daysInMonth);
                 fdate = monthStartDate;
                 tdate = monthEndDate;
          //   DateTime fdate = Convert.ToDateTime(fromdate);
           //  DateTime tdate = Convert.ToDateTime(todate);
         //    int daysInMonth = DateTime.DaysInMonth(fdate.Year, fdate.Month);
         //    DateTime monthEndDate = new DateTime(fdate.Year, fdate.Month, daysInMonth);
             var eventListbydates = getMonthEventsByDate(fromdate, todate);
             ViewBag.datasource1 = eventListbydates;
             return PartialView("_EventList",Json(eventListbydates));
             //return Json(eventListbydates);

Ajax call On view

 $("#listView").on("click", function () {
                    url: '@Url.Action("CustomGridpartialView", "grid")',
                    type: 'GET',
                   // data: { Country: CountryIds },
                    success: function (data) {
                        var obj = $("#FlatGrid").ejGrid("instance")
                    error: function (x, y) {
                       // $("#displayError").html(x.val());
                    traditional: true

Partial vIew "_eventView"
    ViewBag.Title = "_EventList";

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/x-jsrender" id="columnTemplate">

    <script src="~/Scripts/datepicker/jquery-1.10.2.js"></script>
    <script src="~/Scripts/datepicker/jquery-ui.js"></script>

    <div id="columnTemplate"></div>

<script type="text/x-jsrender" id="columnTemplate1">
    <img style="width: 10px; height: 10px" src="Images/orderedList0.png" alt="{{: EmployeeID }}" />


    <a rel='nofollow' href="#" id="registerLink" style="
    background-color: #808080;  text-decoration: none;font-weight:bold;
">Event List</a>


@( Html.EJ().Grid<MvcApplication4.Models.Events>("FlatGrid")
        .Columns(c =>
            c.Field("EntityName").HeaderText("Entity Name").Add();
            // c.Field("Colorcode").HeaderText("").CssClass("{{:Colorcode}}").Width(10).Add();


AS Alan Sangeeth S Syncfusion Team November 19, 2014 11:45 AM UTC

Hi Laxmeesha,


Thanks for using Syncfusion Products.


We are sorry to let you know that we are unable to reproduce the issue “getting error .ejgrid function is undefined when using partial view” in our end. We have created simple sample based on your requirement and the same can be downloaded from below link.


Sample: http://www.syncfusion.com/downloads/support/directtrac/132158/EJGrid-1814517814.zip


We suspect that you have missed to refer “ej.web.all.min.js” script file your project which may be the cause of the issue. So we suggest you to ensure whether you have referred “ej.web.all.min.js” script file your project. If not please refer that file from the following location into your project.


~\Program Files (x86)\Syncfusion\Essential Studio\\JavaScript\assets\scripts\web


And we have tabulated below the necessary script and css files necessary for the JS control.

Script files

Syncfusion script files:


ej.unobtrusive.min.js (Refer this file only when “UnobtrusiveJavaScriptEnabled” is set as true in Web.Config file)

External Script files:






CSS files




The above tabulated script filed must be referred in the following order in _Layout.cshtml file.

<link rel='nofollow' href="~/ejThemes/flat-lime/ej.widgets.all.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="~/Scripts/jquery.globalize.min.js"></script>

<script src="~/Scripts/jquery.easing-1.3.min.js"></script>

<script src="~/Scripts/jsrender.min.js"></script>

<script src="~/Scripts/ej.web.all.min.js"></script>

<script src="~/Scripts/ej.unobtrusive.min.js"></script>


If you still face issues, then could you please send us more information or replicate the issue in the above sample and send us back so that we could sort out the cause of the issue and provide you a response as early as possible.


Please let us know if you have any queries.

Alan Sangeeth S

LA laxmeesha November 20, 2014 06:17 AM UTC

HI Alan,

I tried with all the option still i am not gettting the grid in partial view.
In my case I am having grid In partialview and link(ListView) to load grid in index page..So i am makinh ajax call for loading partial view.

I am attaching the complete code .Can u please check and let me know what is issue.


Attachment: EJGrid_393def87.zip

Live Chat Icon For mobile
Up arrow icon