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)
)
