Blogger Widgets
  • Sharing Photos using SignalR
  • TFS Extenstion - allows copy work items between projects
  • Displaying jquery progressbar with ajax call on a modal dialog
  • Managing windows services of a server via a website
  • Exploring technologies available to date. TechCipher is one place that any professional would like to visit, either to get an overview or to have better understanding.

Search This Blog

Friday 18 March 2011

Displaying JQGrid as defaulted with multiple search conditions

Just as you would apply default search condition for JQGrid its easy to apply multiple search conditions.

But this would need some more parameters, firstly enable multiple searches using the parameter "multipleSearch: true"

The code would as follows :-

$(function () {

 var GetFilters = function () {  
  var filters = null;  
  var filterData = { groupOp: "OR", rules: [] };
  filterData.rules.push({ field: "id", op: "eq", data: "1" });
  filterData.rules.push({ field: "id", op: "eq", data: "2" });
  filterData.rules.push({ field: "id", op: "eq", data: "3" });
  filterData.rules.push({ field: "id", op: "eq", data: "5" });
  filters = JSON.stringify(filterData)  
  return filters;
 }



 jQuery("#grid").jqGrid({    
  url:'GetDetails.asmx?team=All',    
  datatype: "json",    
  colNames:['ID','Name','Country','Progress'],    
  colModel:[    
  {name:'id',index:'id', width:55},    
  {name:'Icon',index:'Icon', width:90},    
  {name:'name',index:'name asc, invdate', width:100},    
  {name:'designation',index:'designation', width:80}],    
  rowNum:10,    
  rowList:[10,20,30],    
  pager: '#grid_pager',    
  sortname: 'id',    
  viewrecords: true,    
  sortorder: "desc",    
  caption:"JSON Data",
  serializeGridData: function (postData) {
   var filters = GetFilters();
   
  if(filters != null)
  {   
   postData.filters = filters;
  }
  else
  { 
   if (postData.searchField === undefined) postData.searchField = null;
   if (postData.searchString === undefined) postData.searchString = null;
   if (postData.searchOper === undefined) postData.searchOper = null; 
   if (postData.filters === undefined) postData.filters = null; 
  }
  return JSON.stringify(postData);
  },
 }).jqGrid('navGrid', '#grid_pager', { edit: false, add: false, del: false, search: true },
      {}, // edit options
      {}, // add options
      {}, //del options
      {multipleSearch: true }
 );
 

});

That's it multiple filters are passed as default search condition to jqgrid web service. Handling of this is not upto web service.

Web service would get the filters data as

"{\"groupOp\":\"OR\",\"rules\":[{\"field\":\"id\",\"op\":\"eq\",\"data\":\"1\"},{\"field\":\"id\",\"op\":\"eq\",\"data\":\"2\"},{\"field\":\"id\",\"op\":\"eq\",\"data\":\"3\"},{\"field\":\"id\",\"op\":\"eq\",\"data\":\"5\"}]}"

which if clearly formatted would be as

"{
 \"groupOp\":\"OR\",
 \"rules\":
  [
   {\"field\":\"id\",\"op\":\"eq\",\"data\":\"1\"},
   {\"field\":\"id\",\"op\":\"eq\",\"data\":\"2\"},
   {\"field\":\"id\",\"op\":\"eq\",\"data\":\"3\"},
   {\"field\":\"id\",\"op\":\"eq\",\"data\":\"5\"}
  ]
}"

This would need to be converted back from json to an object to actually read the data. The following snipped explains how to form a search condition :-

string sCond = string.Empty;
Dictionary(string, object) filtDat = (Dictionary(string,object))filters.FromJson();

string gpOp = (string)filtDat["groupOp"];
object[] ruleOp = (object[])filtDat["rules"];
for (int i = 0; i < ruleOp.Length; i++)
{
        Dictionary(string, object) filterData = (Dictionary(string,object))ruleOp[i];
 string field = (string)filterData["field"];
 string op = (string)filterData["op"];
 string data = (string)filterData["data"];
 sCond += GetCondition(field, op, data);
 if (i > 0)
 {
  sCond += " " + gpOp + " ";
 }
}

return sCond;


Your requirements may vary, just need to customise little to achieve your requirement.


Spreadsheet: a kind of program that lets you sit at your desk and ask all kinds of neat "what if?" questions and generate thousands of numbers instead of actually working. ~Dave Barry, Claw Your Way to the Top

Displaying JQGrid with default search condition

Being using JQGrid for sometime, have at one point required to display data in jqgrid but with a default search condition.

Its as simple as just passing data using the parameter serializeGridData in jqgrid

$(function () {

 var defaultsearchField = "id";
 var defaultsearchString = "5";
 var defaultsearchOper = "gt";



 jQuery("#grid").jqGrid({    
  url:'GetDetails.asmx?team=All',    
  datatype: "json",    
  colNames:['ID','Name','Country','Progress'],    
  colModel:[    
  {name:'id',index:'id', width:55},    
  {name:'Icon',index:'Icon', width:90},    
  {name:'name',index:'name asc, invdate', width:100},    
  {name:'designation',index:'designation', width:80}],    
  rowNum:10,    
  rowList:[10,20,30],    
  pager: '#pager',    
  sortname: 'id',    
  viewrecords: true,    
  sortorder: "desc",    
  caption:"JSON Data",
  serializeGridData: function (postData) {

  if(defaultsearchField != null)
  {
   postData.searchField = defaultsearchField; 
   postData.searchString = defaultsearchString; 
   postData.searchOper = defaultsearchOper;
  }
  else
  { 
   if (postData.searchField === undefined) postData.searchField = null;
   if (postData.searchString === undefined) postData.searchString = null;
   if (postData.searchOper === undefined) postData.searchOper = null; 
  }
  return JSON.stringify(postData);
  },
 });   

});

Now the webservice will get the default search condition and should be able to work straight away. Unless if search is not handled on web service side.

Three things are certain:
Death, taxes, and lost data.
Guess which has occurred.
~David Dixon, 1998, winning entry of the Haiku Error Messages 21st Challenge by Charlie Varon and Jim Rosenau, sponsored by Salon.com

Thursday 10 March 2011

Using word wrap for text using css for words with out spaces

Many web pages contains some information which needs to be displayed using word wrap. consider a small example as below:-

Here is some content for the div element

CSS used in the above example will process the text with word wrap but only if it can find a space. If you would like to have a word warp for long words that does not have space then the CSS would be

Here is some content for the div element veryveryveryverylargewordwithoutspace


Three things are certain:
Death, taxes, and lost data.
Guess which has occurred.
~David Dixon, 1998, winning entry of the Haiku Error Messages 21st Challenge by Charlie Varon and Jim Rosenau, sponsored by Salon.com
Copyright © 2013 Template Doctor . Designed by Malith Madushanka - Cool Blogger Tutorials | Code by CBT | Images by by HQ Wallpapers