Grid with pager, page info, page size dropdown at both top and bottom

Title:

BI{code} ?

How to add PageInfo, PageSize to topFooter? I`m using this demo https://demo.aspnetawesome.com/CustomPagerGridDemo The code in the demo adds pagination only. I want to have pagination, pageinfo and pagesize as well.

Save Changes Cancel

LakTom

asked at 25 Mar 2019

Answers

• BI{code} ?

  Page info is easier, but page size will take a bit more code. Modify the grid like this: @(Html.Awe().Grid("Grid2") .Mod(o => o.PageInfo().PageSize().Custom("pagerBoth")) for pageinfo in `awem.js` find `function gridPageInfo` and inside it find `function render` and replace in the last line `$pageInfo` with `$grid.find('.o-gpginf')` for page size dropdown use this `pagerBoth` function instead of the one in the demo: function pagerBoth(o) { var grid = o.v; var footer = grid.find('.awe-footer'); var fclone = footer.clone(true); var psi = o.i + 'ps2'; var pshtml = '<div class="awe-ajaxradiolist-field o-gpgs awe-field"><input id="' + psi + '" class="awe-val" type="hidden" value="' + o.ps + '" /><div class="awe-display"></div></div>'; var dd = footer.find('.o-gpgs .awe-val'); fclone.find('.o-gpgs').after(pshtml).remove(); grid.prepend(fclone); awe.radioList({ i: psi, nm: psi, l: 1, df: getdata, md: awem.odropdown, tag: { InLabel: awem.clientDict.PageSize + ": " } }); fclone.addClass('topFooter'); var dd2 = $('#' + psi); function getdata() { return dd.data('o').lrs; } dd.on('change', function() { dd2.val(dd.val()).data('api').render(); }); dd2.on('change', function() { dd.val(dd2.val()).change(); }); }

  Save Changes Cancel

  

  Omu

  answered at 26 Mar 2019

please Sign In to leave an answer