Thursday, 17 November 2011

Few jqGrid tips which I leant with my experience



  • Changing jqGrid Column Names Dynamically

jQuery("#list").jqGrid('setLabel', 'columnName', 'NewColumnName');

  • Hiding jqGrid Close Button from titlebar

<style type="text/css">
.ui-jqgrid .ui-jqgrid-titlebar-close span {display:none;}
</style>


  • Changing jqGrid title alignment

jQuery(".ui-jqgrid-title").replaceWith('<div style="text-align:center;padding:.3em .2em .2em .3em;"><span>'+jQuery(".ui-jqgrid-title").text()+'</span></div>');


  • Changing jqGrid Header-Column style

jQuery("#testGrid").jqGrid('setLabel','ColName','',{'text-align':'left'});


  • Removing jqGrid Pager Details

for center part : jQuery('#pagerdt_center').remove();
for view of rows: jQuery('#pagerdt_right').remove();
for entire pager: jQuery('#pagerdt').remove();


  •  Remove ScroolBars for jqGrid 

height: '100%', weight: '100%'

  • Changing jqGrid height based on jqGrid records

if(jQuery("#testGrid").jqGrid('getGridParam', 'records')<10)
    jQuery("#testGrid").jqGrid('setGridHeight',500);
else
  jQuery("#testGrid").jqGrid('setGridHeight','100%');


  • Changing jqGrid tr style based on column value

gridComplete: function(){
var ids = jQuery("#testGrid").jqGrid('getDataIDs');//fetches the row ids array
for(var i=0;i < ids.length;i++){
var _MyColumn = jQuery("#testGrid").jqGrid('getCell', ids[i], 'MyColumn');  //fetches the Column data
if(_read=='False'){
var trElement = jQuery("#"+ ids[i],jQuery('#testGrid'));
trElement.removeClass('ui-widget-content');//Remove the class then only you can add your class
trElement.addClass('newclass');
}
}
}
<style type="text/css">
.newclass{ background-color:red;}
</style>

Tag: addclass, alignment, change, Close, column, Dynamically, getDataIDs, gridcomplete, Header, jqgrid, jquery, learn, Pager, removeclass, ScroolBars, setGridHeight, setLabel, style, tips, titlebar

No comments:

Post a Comment

Parsing JSON w/ @ symbol in it

To read the json response like bellow @ concatenated with attribute                             '{ "@id": 1001, "@name&q...