c# - Custom paging in Jqgrid using WCF service and asp.net -
here code binding jqgrid, in scnario fetching 25000 records making grid slow, need implement custom paging in jqgrid, 50 records should load @ once.
<script type="text/javascript"> $(document).ready(function () { $("#tabledatagrid").jqgrid({ url: '/datahandler.ashx?methodname=tfnuserview&groupnamequery=<%=master.groupname %>&isadmincheck=<%=master.admin %>&isactivecheck=<%=false %>', datatype: "json", colnames: ['id', 'tfn', 'group', 'sub group', 'tactic', 'sub tactic', 'micro tactic', 'campaign name', 'campaign start date', 'campaign end date', 'pcc', 'segmentation', 'vanity description', 'message', 'notes', 'organization', 'product', 'owner', 'agency', ], prmnames: { id: 'tfn' }, colmodel: [ { name: 'id', index: 'id', hidden: true, editoptions: { disabled: true }, width: 80, "sortable": true, editable: true, sorttype: 'integer', searchoptions: { sopt: ['eq'], datainit: function (elem) { $(elem).height(21).width(40); } }, searchrules: { required: true } }, { name: 'tfn', index: 'tfn', key: true, edittype: 'select', formatter: 'showlink', width: 110, formatoptions: { baselinkurl: 'tfnedit.aspx' }, editable: true, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne'], datainit: function (elem) { $(elem).height(21).width(60); } }, searchrules: { required: true } }, { name: 'teamname', index: 'teamname', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'languagegroupname', index: 'languagegroupname', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'tacticname', index: 'tacticname', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'subtacticname', index: 'subtacticname', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'microtacticname', index: 'microtacticname', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'marketingcampaignname', index: 'marketingcampaignname', width: 190, editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'marketingcampaignstartdate', index: 'marketingcampaignstartdate', width: 190, editable: true, sorttype: 'date', searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/y', formatoptions: { srcformat: 'm/d/y', newformat: 'm/d/y' }, editoptions: { size: 12, datainit: function (elem) { settimeout(function () { $(elem).datepicker({ showon: 'button' }); }, 100); } }, searchrules: { required: true } }, { name: 'marketingcampaignenddate', index: 'marketingcampaignenddate', width: 190, editable: true, sorttype: 'date', searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/y', formatoptions: { srcformat: 'm/d/y', newformat: 'm/d/y' }, editoptions: { size: 12, datainit: function (elem) { settimeout(function () { $(elem).datepicker({ showon: 'button' }); }, 100); } }, searchrules: { required: true } }, { name: 'pcc', index: 'pcc', editable: true, sorttype: 'text', width: 190, searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'segmentaion', index: 'segmentaion', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'vanitydescription', index: 'vanitydescription', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'generalnotes', index: 'generalnotes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'notes', index: 'notes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'organization', index: 'organization', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkadmin() }, { name: 'product', index: 'product', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkadmin() }, { name: 'ownername', index: 'ownername', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }, { name: 'agency', index: 'agency', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } } ], rownum: 20, rowlist: [20, 100, 1000,10000], pager: $('#divpager'), viewrecords: true, loadonce: true, sortable: true, width: "100%", autowidth: false, shrinktofit: false, forcefit: false, ignorecase: true, caption: "tfn user view" }); $("#tabledatagrid").jqgrid('filtertoolbar', { searchoperators: true }); $("#tabledatagrid").jqgrid('navgrid', '#divpager', { add: false, edit: false, del: false, cancel: true, save: true, addtext: "add", edittext: "edit", deltext: "delete", searchtext: "search", refreshtext: "refresh" }, $("#tabledatagrid").setgridparam({ onpaging: function (pgbutton) { var pagenumber = $("#tabledatagrid").getgridparam("page"); var lastpage = $("#tabledatagrid").getgridparam("lastpage"); alert(pagenumber + "" + lastpage); //... } }); // var requestedpage = $("#grid").getgridparam("page"); // var lastpage = $("#grid").getgridparam("lastpage"); </script> here json response response = convert.tostring(tfnuserview(groupname,isadmincheck,isactivecheck)); i calling wcf service here code
public string tfnuserview(string groupname, string isadmincheck) { using (tfnentities db = new tfnentities()) { var serializer = new javascriptserializer(); serializer.maxjsonlength = int32.maxvalue; string[] groupnames = groupname.split(','); string jsondata = ""; var query = st in db.tfn_campaigns join tac in db.tfn_records on st.tfn equals tac.tfn join rou in db.tfn_routing_reference_view on st.tfn equals rou.toll_free_no st.status == false && tac.isunable == false select new { st.tfn,st.language,st.teamname,st.createdon,st.status,tac.isunable,rou.route_type , rou.route_description }; if (isadmincheck == "true" || isadmincheck == "true") { jsondata = serializer.serialize(query.tolist().orderby(item => item.route_description).take(200254)); } else { jsondata = serializer.serialize(query.where(item => groupnames.contains(item.teamname)).orderby(i=>i.route_description).take(25000)); } return jsondata; } }
first of all, link : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager configure paging in jqgrid.
and can pass 2 more parameters wcf service, page , rownum. use skip function along take function in linq below.
jsondata = serializer.serialize(query.tolist().orderby(item => item.route_description).skip(page * rownum).take(rownum));
this return specific number on records want display in 1 page wcf.
Comments
Post a Comment