jQueryUI tooltip HTML support

The latest version of jQueryUI tooltip is not supporting HTML tags.

we can override the original functionality to start support HTML

Method 1 : overrides the default behavior

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

Example : http://jsfiddle.net/Aa5nK/12/

Method 2 : override the tooltip widget

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

Example : http://jsfiddle.net/Aa5nK/14/

Reference : stackoverflow

JQuery focus() after last character in textbox not woking in IE – Solution

In other browsers $(‘#TextBox’).focus() this code will work. for IE we need to do something special!!! in code

Code :

Create a function:

(function($){
$.fn.setCursorToTextEnd = function() {
$initialVal = this.val();
this.val($initialVal + ‘ ‘);
this.val($initialVal);
};
})(jQuery);

also we need to use setTimeout.

setTimeout(function() {
$(‘#TextBox’).focus();$(‘#TextBox’).setCursorToTextEnd();
}, 100);

Source 1
Source 2

jQgrid : Change search filter before submit

we can use beforeSearch event for toolbar searching
onSearch for advanced searching and single field search
Code :

$(“#list”).jqGrid(‘filterToolbar’, {
beforeSearch: function () { fnBeforeSearch(); }
…
});

///trim all data before submit to search
function fnBeforeSearch() {
var i, l, rules, rule, $grid = $(“#list”),
postData = $grid.jqGrid(‘getGridParam’, ‘postData’),
filters = $.parseJSON(postData.filters);

if (filters && typeof filters.rules !== ‘undefined’ && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
rule.data = rule.data.trim();
}
postData.filters = JSON.stringify(filters);
}
}

JqGrid sorting numeric value with blank and null

Code :

sorttype: function (cellValue) {
return isNaN(cellValue) ? -100000 : Number(cellValue);
}

Check a classname exist

Check the html object is having a particular class :

if($.inArray(‘classname’, $(obj)[0].classList) > -1)
{
///class is available
}

jqGrid Functions

Set Sorting :

$(“#tblJqGrid”).jqGrid(‘setGridParam’, {sortname:’columnname’, sortorder: ‘sordorder’ });
$(‘#tblJqGrid’).trigger(“reloadGrid”, [{ page: 1 }]);

Another Option :
$(“#tblJqGrid”).sortGrid(‘columnname’, reload);
reload is boolean(true/false) param.

Get current sorted column & order :

$(“#tblJqGrid”).jqGrid(‘getGridParam’, ‘sortname’);
$(“#tblJqGrid”).jqGrid(‘getGridParam’, ‘sortorder’);

Set jqGrid Data :

$(“#tblJqGrid”).jqGrid(‘setGridParam’, { data: jsonObjGridData });

Clear jqGrid Data :

$(“#tblJqGrid”).jqGrid(‘clearGridData’);

Show/Hide Columns :

$(“#tblJqGrid”).jqGrid(‘showCol’, [‘Column1’, ‘Column2’];
$(“#tblJqGrid”).jqGrid(‘hideCol’, [‘Column1’, ‘Column2’];

Resize jqGrid :

$(“#tblJqGrid”).jqGrid(‘setGridWidth’, , true).trigger(‘resize’);
$(“#tblJqGrid”).jqGrid(‘setGridHeight’, , true).trigger(‘resize’);

Reload jqGrid :

$(‘#tblJqGrid’).trigger(“reloadGrid”, [{ page: 1 }]);

Clear all values in search Toolbar :

$(“#JqGridId”)[0].clearToolbar();

Get value from cell :

var value = $(“#tblJqGrid”).jqGrid(‘getCell’, rowId, ‘ColumnName’ );

Set value to cell :

$(“#tblJqGrid”).jqGrid(‘setRowData’, rowId, { ColumnName: data });

 

Add new filter in jqGrid tool bar search

Code :

$(“#tblJqGrid”).jqGrid(‘filterToolbar’, {
stringResult: true, searchOnEnter: true, autosearch: true, enableClear: false,
afterSearch: function () {
if (myfilter != null) {
var myRules = “”;
var _SearchFilter = “”;

///creating new filter
myRules += “,{\”field\”:\”” + + “\”,\”op\”:\”” + + “\”,\”data\”:\”” + + “\”}”;
myRules += “]}”;

if ($(“#tblJqGrid”)[0].p.postData._search != false) {///append new filter in tool bar search filter

_SearchFilter = $(“#tblJqGrid”)[0].p.postData.filters.replace(“]}”, myRules);

$(“#tblJqGrid”).jqGrid(“getGridParam”, “postData”).filters = _SearchFilter;
$(“#tblJqGrid”).trigger(“reloadGrid”, [{ page: 1 }]);
}
else {

$(“#tblJqGrid”).jqGrid(‘setGridParam’, {
postData: { filters: },
search: true
});
$(“#tblJqGrid”).trigger(“reloadGrid”, [{ page: 1 }]);
}
}
}
});

 

JqGrid cell click using column name

We can use onCellSelect to set click function and can use getGridParam – colModel to get which column cells to have click function.

Coding :

onCellSelect: function(rowid, index, contents, event) 
{    
   var cm = $("#list1").jqGrid('getGridParam','colModel');                          
   if(cm[index].name == "ColumnName")
   {
       fnName(rowid);
   }
}

Changing JqGrid Cell Font Color

We can use setCell property of JqGrid for changing cell font color

Coding :

$(‘#jqgrid’).jqGrid(‘setCell’,rowId,’column Name’,”,{color:’red’});

Changing Column Header Alignment – JqGrid

We can use setLabel method to change the alignment of JqGrid Column Header

Coding :

$(“#grid”).jqGrid(“setLabel”,”columnname”,””,{“text-align”:”left”});