Flexigrid is Not Working with MVC4 Razor with EntityFramework

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.