Flexigrid is Not Working with MVC4 Razor with EntityFramework - asp.net-mvc-4

Question

Hi I recently started working on MVC4 with Razor View Engine, i am using Entity Framework 5 for My Data-access, I need to display user information in UI, so i implemented Flexigrid with the help of Codeproject Article, but this is not working out for me. When i Run my application nothing is displaying except plain old inbuilt index page. I am trying to implement the Flexigrid in Index page only.
My View Code Looks Like
{
<table id="notification" style="display:none">
<script type="text/javascript">
$("#notifications").flexigrid({
url: 'Controllers/Notifications/NotificationsList',
dataType: 'json',
colModel: [
{ display: 'NotificationID', name: 'NotificationID', width: 40, sortable: true, align: 'left' },
{ display: 'Notification', name: 'Notification', width: 100, sortable: true, align: 'left' },
{ display: 'IsDisplay', name: 'IsDisplay', width: 100, sortable: true, align: 'left' },
{ display: 'CreatedBy', name: 'CreatedBy', width: 100, sortable: true, align: 'left' },
{ display: 'CreatedOn', name: 'CreatedOn', width: 100, sortable: true, align: 'left' },
{ display: 'ModifiedBy', name: 'ModifiedBy', width: 80, sortable: true, align: 'left' },
{ display: 'ModifiedOn', name: 'ModifiedOn', width: 60, sortable: true, align: 'left' }
],
searchitems: [
{ display: 'NotificationID', name: 'NotificationID' },
{ display: 'Notification', name: 'Notification' },
{ display: 'IsDisplay', name: 'IsDisplay' },
{ display: 'CreatedBy', name: 'CreatedBy' },
{ display: 'CreatedOn', name: 'CreatedOn' },
{ display: 'ModifiedBy', name: 'ModifiedBy' }
],
sortname: 'NotificationId',
sortorder: 'asc',
usepager: true,
title: 'Notifications',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 1040,
height: 380
});
</script>
</table>
}
Controller Look Like
{
public ActionResult NotificationsList()
{
var q = from c in db.Tbl_Notification
select c;
List<Tbl_Notification> notes = q.ToList();
FlexigridObject flexigridObject = new FlexigridObject();
flexigridObject.page = 1;
flexigridObject.total = db.Tbl_Notification.Count();
foreach (Tbl_Notification notify in notes)
{
FlexigridRow cell = new FlexigridRow()
{
id = notify.NotificationId,
cell = GetPropertyList(notify)
};
flexigridObject.rows.Add(cell);
}
return View("FlexigridObject", flexigridObject);
}
private List<string> GetPropertyList(object obj)
{
List<string> propertyList = new List<string>();
Type type = obj.GetType();
PropertyInfo[] properties = type.GetProperties(BindingFlags.Instance | BindingFlags.Public);
foreach (PropertyInfo property in properties)
{
object o = property.GetValue(obj, null);
propertyList.Add(o == null ? "" : o.ToString());
}
return propertyList;
}
}
public static class ExtensionMethods
{
public static IQueryable<T> OrderBy<T>(this IQueryable<T> source, string propertyName, bool asc)
{
var type = typeof(T);
string methodName = asc ? "OrderBy" : "OrderByDescending";
var property = type.GetProperty(propertyName);
var parameter = Expression.Parameter(type, "p");
var propertyAccess = Expression.MakeMemberAccess(parameter, property);
var orderByExp = Expression.Lambda(propertyAccess, parameter);
MethodCallExpression resultExp = Expression.Call(typeof(Queryable), methodName, new Type[] { type, property.PropertyType }, source.Expression, Expression.Quote(orderByExp));
return source.Provider.CreateQuery<T>(resultExp);
}
public static IQueryable<T> Like<T>(this IQueryable<T> source, string propertyName, string keyword)
{
var type = typeof(T);
var property = type.GetProperty(propertyName);
var parameter = Expression.Parameter(type, "p");
var propertyAccess = Expression.MakeMemberAccess(parameter, property);
var constant = Expression.Constant("%" + keyword + "%");
MethodCallExpression methodExp = Expression.Call(null, typeof(SqlMethods).GetMethod("Like", new Type[] { typeof(string), typeof(string) }), propertyAccess, constant);
Expression<Func<T, bool>> lambda = Expression.Lambda<Func<T, bool>>(methodExp, parameter);
return source.Where(lambda);
}
}
}
I need to implememnt Grid at any cost, please suggest me. and please let me know weather the Kendo UI is free to use?.

Answer 1

It looks like you may have missed adding the $(document).ready() function call around the flexigrid script. Thus, the browser doesn't invoke your flexigrid at all.
Try this:
<table id="notification" style="display:none">
<script type="text/javascript">
$(document).ready(function () {
$("#notifications").flexigrid({
url: 'Controllers/Notifications/NotificationsList',
dataType: 'json',
colModel: [
{ display: 'NotificationID', name: 'NotificationID', width: 40, sortable: true, align: 'left' },
{ display: 'Notification', name: 'Notification', width: 100, sortable: true, align: 'left' },
{ display: 'IsDisplay', name: 'IsDisplay', width: 100, sortable: true, align: 'left' },
{ display: 'CreatedBy', name: 'CreatedBy', width: 100, sortable: true, align: 'left' },
{ display: 'CreatedOn', name: 'CreatedOn', width: 100, sortable: true, align: 'left' },
{ display: 'ModifiedBy', name: 'ModifiedBy', width: 80, sortable: true, align: 'left' },
{ display: 'ModifiedOn', name: 'ModifiedOn', width: 60, sortable: true, align: 'left' }
],
searchitems: [
{ display: 'NotificationID', name: 'NotificationID' },
{ display: 'Notification', name: 'Notification' },
{ display: 'IsDisplay', name: 'IsDisplay' },
{ display: 'CreatedBy', name: 'CreatedBy' },
{ display: 'CreatedOn', name: 'CreatedOn' },
{ display: 'ModifiedBy', name: 'ModifiedBy' }
],
sortname: 'NotificationId',
sortorder: 'asc',
usepager: true,
title: 'Notifications',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 1040,
height: 380
});
});
</script>
</table>
Also, it may not be the best idea to have your script reside inside table layout. Makes for a tag soup.