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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

bind Syncfusion Grid via json result on ajax call

Thread ID:

Created:

Updated:

Platform:

Replies:

117143 Aug 21,2014 06:18 AM UTC Nov 20,2014 06:17 AM UTC ASP.NET MVC 4
loading
Tags: Grid
Rocky
Asked On August 21, 2014 06:18 AM UTC

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.

$.post(
     "User/GetUserData/",
         { '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:

 [HttpPost]
 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.


Alan Sangeeth S [Syncfusion]
Replied On 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) {

        $.ajax({

            url: "Home/DataSource",

            type: "POST",

            data:{id:args.selectedText},

            success: function (result) {

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

                obj.dataSource(result);

            }

        })

}

 

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S


laxmeesha
Replied On 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 () {
                      
             
                $.ajax({
                    url: '@Url.Action("CustomGridpartialView", "grid")',
                    type: 'GET',
                   // data: { Country: CountryIds },
                    success: function (data) {
                        alert(data);
                     
                        var obj = $("#FlatGrid").ejGrid("instance")
                        obj.dataSource(@ViewBag.datasource1);
                    },
                    error: function (x, y) {
                       // $("#displayError").html(x.val());
                        alert("err");
                    },
                    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>
<script type="text/x-jsrender" id="columnTemplate1">
    <img style="width: 10px; height: 10px" src="Images/orderedList0.png" alt="{{: EmployeeID }}" />


</script>
<div>

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

</div>


@( Html.EJ().Grid<MvcApplication4.Models.Events>("FlatGrid")
            .Datasource((IEnumerable<object>)ViewBag.datasource1)
        .Columns(c =>
        {
            //c.HeaderText("").Template(true).TemplateID("#columnTemplate").TextAlign(TextAlign.Center).Width(10).Add();
            //c.HeaderText("Image").Template(true).TemplateID("#columnTemplate1").TextAlign(TextAlign.Center).Width(10).Add();
            c.HeaderText("").CssClass("{{:Colorcode}}").Width(10).Add();
            c.Field("EntityName").HeaderText("Entity Name").Add();
            c.Field("Status").HeaderText("Status").Add();
            c.Field("EventName").HeaderText("EventName").Add();
            // c.Field("Colorcode").HeaderText("").CssClass("{{:Colorcode}}").Width(10).Add();
        })
        .AllowSorting(true)
        .AllowMultiSorting(true)


)

Alan Sangeeth S [Syncfusion]
Replied On 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\12.3.0.36\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.web.all.min.js

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

External Script files:

jquery.min.js

jquery.easing.min.js

jquery.globalize.min.js

jsrender.min.js

jquery.validate.min.js

CSS files

ej.web.all.min.css

 

 

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.

Regards,
Alan Sangeeth S


laxmeesha
Replied On 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.

Thanks,
LAxmeesha

Attachment: EJGrid_393def87.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;