Forum
Log In
Home
Topic RSS
04:57
21/01/2010
Offline
I need to move the rowList dropdown to the left by itself but keep the other paging options to the right. I also need to add some text in front of and after the drop down so that it looks like "Show 20 at a time".
Is there a way to add these options natively in jqGrid or do I need to do some DOM manipulation and css changes to remove it from the table it currently sits in and add it back in?
Thanks,
Ben
22:16
21/01/2010
Offline
Just in case someone else is looking to do the same thing, I'll share what I did.
I don't know that this is the best method, and would be open to someone sharing a better way. You could probably extend the jqGrid plugin to fix this, but I'm not sure if that would be overkill for such a small change. It's something that maybe should be included as an option.
This is what I did:
After my grid has loaded I've added this little piece:
if ( $("#rowNumDD").length == 0 ) {
$('<div id="rowNumDD" style="display:block;padding-left: 2px;float:left;text-align:left;">Show: </div>').appendTo($("#subsDiv_toppager_left"));
$(".ui-pg-selbox").appendTo($("#rowNumDD"));
$("#rowNumDD").append(" at a time.");
}
It's pretty self explanatory but this is what the code does.
I've added the if statement to make sure the div I'm creating doesn't exist. Without this if statement you will have an unusable drop down.
This will then create a new <div> and append it to the left hand side of the pager toolbar. I then use the appendTo() method to grab the rowList dropdown and stick it in my new div and then append some more text after the drop down.
It works, but as I said. There is probably a better way.
20:25
Moderators
30/10/2007
Offline
Hello,
If this work and there is no problems, then I will say it is good.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
15:20
27/07/2011
Offline
Hi,
This soultion is not working. I dont see any change in the jqgrid after adding this snippet. COuld you please help.
Below is my code for rendering jqgrid.
@*jqGrid Code - refer /blog/jqgrid/jqgrid.html *@
<script type="text/javascript">
function doWhenGridFullyLoaded() {
alert("Hi");
if ($("#rowNumDD").length == 0) {
alert("Hi1");
$('<div id="rowNumDD" style="display:block;padding-left: 2px;float:left;text-align:left;">Show: </div>').appendTo($("#subsDiv_toppager_left"));
$(".ui-pg-selbox").appendTo($("#rowNumDD"));
$("#rowNumDD").append(" at a time.");
}
}
//set the context data into variables
var pagename = "@Model.PageName";
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '@Url.Action("SettingsHistoryDynamicGridData", "SettingsHistory")',
datatype: 'json',
mtype: 'POST',
prmNames: { sort: "sortBy", order: "sortOrder" },
colNames: ['SettingElementId', 'SettingName', 'SettingValue','InstanceId',
'Description', 'ModifiedBy', 'ModifiedDate',
'Operation','SchemaName', 'Status',
'CreatedBy', 'CreatedDate', 'ValHierarchyValue'],
colModel: [
{ name: 'SettingElementId', index: 'SettingElementId', align: 'center', hidden: true },
{ name: 'SettingName', index: 'SettingName', align: 'center', sortable: true },
{ name: 'SettingValue', index: 'SettingValue', align: 'center', sortable: true },
{ name: 'InstanceId', index: 'InstanceId', align: 'center', hidden: true },
{ name: 'Description', index: 'Description', align: 'center', sortable: true },
{ name: 'ModifiedBy', index: 'ModifiedBy', align: 'center', sortable: true },
{ name: 'ModifiedDate', index: 'ModifiedDate', align: 'center', sortable: true, width: 190 },
{ name: 'Operation', index: 'Operation', align: 'center', sortable: true, width: 80 },
{ name: 'SchemaName', index: 'SchemaName', align: 'center', sortable: true, width: 100 },
{ name: 'Status', index: 'Status', align: 'center', sortable: true, width: 60 },
{ name: 'CreatedBy', index: 'CreatedBy', align: 'center', hidden: true },
{ name: 'CreatedDate', index: 'CreatedDate', align: 'center', hidden: true },
{ name: 'ValHierarchyValue', index: 'ValHierarchyValue', align: 'center', hidden: true}],
pager: jQuery('#pager'),
rowNum: 15,
rowList: [15, 25, 50, 75, 100],
sortname: "SettingName",
sortorder: "asc",
viewrecords: true,
rownumbers: true,
emptyrecords: 'Settings History Not Available',
width: 1000,
height: "100%",
altRows: true,
altclass: 'ui-state-secondary-custom',
hoverrows: false,
forceFit: true,
loadtext: 'Loading Settings History Log...',
loadui: 'block',
toolbar: [true,'both'],
loadComplete: doWhenGridFullyLoaded
});
// $('#list tr:nth-child(even)').removeClass("ui-priority-secondary");
// $('#list tr:nth-child(odd)').addClass("ui-priority-secondary");
// jQuery("#pager .ui-pg-selbox").closest("td").before().append("Rows");
});
</script>
@*HTML Required fOR jqGrid*@
<h3 style="color:#0066cc" > @Model.PageName - Settings History</h3>
<center>
<table id="list" cellpadding="0" cellspacing="0" style="height:100%; width:100%; vertical-align:middle;"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</center>
Most Users Ever Online: 715
Currently Online:
60 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
