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.