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

Continue Reading

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

Continue Reading

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

Continue Reading

Generate client side script with custom control in ASP.NET

As you already know custom control gives the flexibility and allows to add complex features for a server control (refer to MSDN:Developing and Using a Custom Web Server Control).


Now consider you would like to display modal dialog using JQuery UI and the respective .js files are already loaded by the main website.The following snippet allows you to display a button from your custom control and generate a script block on the client side to handle the click event.

public class CustomWebControl : WebControl
{
 protected override void Render(HtmlTextWriter writer)
 {
         writer.Write(@"
          
          
              
   
Text to be displayed in the modal dialog.
   
");
  this.Page.ClientScript.RegisterStartupScript(this.GetType(), "test-dialog-modal_1", @"   
   
  ");
 }
 
}

This is the simple case of explaining how to achieve it.


The most overlooked advantage to owning a computer is that if they foul up, there's no law against whacking them around a little. ~Eric Porterfield.

Continue Reading

Passing vArguments or dialogArguments with window.open

Arguments can only be passed with window.showModalDialog which is quite helpful. But consider your application is using these arguments extensively in your website and suddenly it appears modal dialog is not supported on all browsers. Opera does not support modal dialog, now instead of changing the existing functionality the work around would be as follows:-

1. Detect if browser support modal dialog or not and then assign arguments

var vArguments = new Object();
vArguments.test1 = "test1 data";
vArguments.test2 = "test2 data";
if (window.showModalDialog) {
window.showModalDialog(sURL, vArguments, sFeatures);
}
else
{
window.dialogArguments = vArguments;
window.open(sURL, "_blank", sFeatures);
}

2. Now inside the pop-up window access the arguments

 var dialogArguments ;
if (window.showModalDialog) {
 dialogArguments = window.dialogArguments;
}
else {
 dialogArguments = window.opener.dialogArguments;
}
alert(dialogArguments.test1);
alert(dialogArguments.test2);

Now this should work like a charm.


Man is still the most extraordinary computer of all. ~John F. Kennedy

Continue Reading

Enable HTTPS for a Website using IIS

Testing your website with HTTPS might be one of the customer requirement. IIS allows you to create a dummy SSL that enables you to test the website using HTTPS. So Now to enable HTTPS follow below steps :

[First lets create a certificate]
1. Goto IIS -> select the machine name
2. Now from features select "Server Certificates"
3. select "Create Self-Signed Certificate" and specify the name "DummyCertificate"

4. Now this should get displayed in the list of certificates

[Now lets associate the certificate to websites]
5. Goto IIS -> Select "Default Web Site"
6. Under "Actions" select "Bindings"

7. Now select "Add", select type as "https" and select the certificate as "DummyCertificate"

8. Now "ok" the message and "close" the site bindings. This should display the bingings to https as shown below:-

9. Now select the site and from features select "SSL Settings". Update as below:

10. Select "Apply" and your website is enabled with https. Now publish with https.



“Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter.”
(Eric Raymond)

Continue Reading

Width 100% not working in IE compatibility mode

At time its so frustrating to get css styles work correctly in various circumstances such as cross-browser , IE compatibility mode etc.

Recently notice an issue which is setting width 100% does not work in IE compatibility mode. The page display a input:select and input:textbox. It works fine in various places but was having issue at one particular table.

After trying out various options and finally the option that worked is

 td style="width:100%;"

So be very careful with this sort of issues, as these are very minor but becomes so frustrating at times.


Hardware: the parts of a computer that can be kicked. ~Jeff Pesis

Continue Reading