The code is still not working for me. Here is the code:
@model ProjectViewModel
<script type="text/x-jsrender" id="labellink">
<a rel='nofollow' href="Edit?id={{:id}}">
{{:Number}}
</a>
</script>
<script type="text/x-jsrender" id="optlink">
<a rel='nofollow' href="/Unit/GetUnitListFromProject?projID={{:id}}">
<i class="glyphicon glyphicon-filter"></i>
</a>{{:classlet}}
</script>
<script type="text/x-jsrender" id="pagertemplate">
<select name="selectIndex" class="e-ddl" id="projectPageSize">
<option value="2">2</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</script>
<form>
@(Html.EJ().Grid<LabSys.NEWLabSys.ProjectsViewModel>("ProjGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowSorting()
.AllowPaging()
.PageSettings(p =>
p.Template("#pagertemplate").EnableTemplates().ShowDefaults().PageSize(10))
.AllowResizeToFit()
.AllowTextWrap()
.AllowScrolling()
.ScrollSettings(s => s.Width("100%"))
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
.ClientSideEvents(eve => eve.DataBound("dataBound"))
.ClientSideEvents(e => e.ActionComplete("PageRefresh").ActionBegin("onBegin"))
.Columns(col =>
{
col.HeaderText("Opt.").Template("#optlink").Width(40).AllowFiltering(false).Add();
col.Field(z => z.Number).HeaderText("Number").Template("#labellink").Add();
col.Field(z => z.name).HeaderText("Name").Add();
col.Field(z => z.status).HeaderText("Status").Add();
col.Field(z => z.type).HeaderText("Type").Add();
col.Field(z => z.engname).HeaderText("Lead Engineer").Add();
col.Field(z => z.phase).HeaderText("Phase").Add();
col.Field(z => z.CompletedDateDT).HeaderText("Completion Date").Format("{0:MM/dd/yyyy}").Width(100).Add();
}
))
</form>
<script type="text/javascript" language="javascript">
var index = 0;
function PageRefresh(args){
if (this.initialRender || args.requestType == "paging")
renderDropdown();
}
function renderDropdown() {
var gObj = $("#ProjGrid").ejGrid("instance");
//render the ejDropDownList on pager template
gObj.getPager().find("selectIndex").ejDropDownList({
selectedIndex: index,
change: "pageSizeChange",
showRoundedCorner: true,
width: 60, height: 25
});
}
function pageSizeChange(args) {
debug;
var gridModel = $("#ProjGrid").ejGrid("model");
var pagerModel = $("#ProjGrid").ejGrid("getPager").ejPager("model");
var newLastPage = Math.ceil(gridModel.pageSettings.totalRecordsCount / args.value);
if (pagerModel.currentPage > newLastPage)
$("#ProjGrid").ejGrid("getPager").ejPager("goToPage", newLastPage);
$("#ProjGrid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } });
index = args.itemId;
renderDropdown();
}
</script>
