Gorgo.Live.ToString()

Mariusz, Gorzoch tech Blog

Archive for the ‘jQuery’ Category

jGrid and ASP.Net web forms

leave a comment »

Ok, so you have some fancy app and you decided to make it more fancy by using jGrid. Good idea!, but where to start ? I get to that point around week ago and took me a while to find proper resources how to do it. Here is short guide how to go straight to the point where you will be ready to use this magic component.

1. Start, by going to page Trirad download page and download entire packed by marking all checkboxes and hitting download button.

Once you get the zip file, then unpack it. We are going to need few thinks from it:

image

  • get all *.js files from the “js” directory and place them in your “script” folder in your visual studio project
  • get into “i18n” folder and get the file with respond to your language (or the one you want to use in your app). In my case it was “grid.locale-pl.js” for polish

this should give you something like this (for “Script” folder):

image

Notice : please note that there is additional file there “jquery-1.8.1-ui.min.js” with is not part of jgrid, but it is there as I’m using it in the app)

2. We need a theme for our grid. Please go to jqueryUI page , find your favorite theme in gallery and download it.

Once you get zip file then unpack it. We are going to get from it “css” folder:

image  

Notice: Please note here that name of the “theme” folder inside “css” will be different as it depend on the theme you picked up. In my case I decided to use “redmond” theme so this is how I get “redmond” folder name.

Copy that "redmond” folder to your project:

image

3. Put jGrid on the aspx form

  • place all necessary link to jgrid resources:

image

  • put page place holders to store jgrid content

image

This is the place where the jGrid will be drawn by JavaScript.

  • put jgrid creation script block

image

here is few important peaces:

url <- this is address of our asmx web service with will feed our grid with data. How to build it to return proper format will be shown in an minute

mtype = post <- our parameters will be passed in content of the message (instead in query string)

contentType = “xml” <- this tells jGrid what will be returned format of data , so he can consume them properly. There is also option of returning json format but for some reason I didn’t manage to force asmx service to return data in that format (I believe that main reason of that is that jgrid is not sending parameters i json format with is causing that asmx do not want to use json to return data)

data <- parameters with we are sending to asmx

colNames, colModel <- defines list of columns in our gird.

4. Build asmx web service to provide data for our grid

Go and new web service to your project:

image

Notice : remember to change name to “Analizy.asmx” <- as this is the name of service we used in definition of jGrid URL)

remove all what is inside namespace brackets and past this peace of code:

   1:      [WebService(Namespace = "http://tempuri.org/")]
   2:      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
   3:      [ScriptService]
   4:      public class Analizy : System.Web.Services.WebService
   5:      {
   6:   
   7:          [WebMethod]
   8:          public rows GridData(string sidx, string sord, int page, int rows)
   9:          {
  10:   
  11:              int pageIndex = Convert.ToInt32(page);
  12:              int pageSize = rows;
  13:   
  14:              return
  15:                  new rows(20, pageIndex, 200);
  16:          }
  17:      }
  18:   
  19:      public class rows
  20:      {
  21:          public int total { get; set; }
  22:          public int page { get; set; }
  23:          public int records { get; set; }
  24:          public row[] gridEntires { get; set; }
  25:   
  26:          public rows() { }
  27:   
  28:          public rows(int totalPages, int currentPage, int totalRecords)
  29:          {
  30:              List<row> entries = new List<row>();
  31:              for (int i = 0; i < totalRecords; i++)
  32:                  entries.Add(new row(i, DateTime.Now.ToString("yyyyMMdd") , "1", "1", "1"));
  33:   
  34:              this.gridEntires = entries.ToArray();
  35:   
  36:              this.total = totalPages;
  37:              this.page = currentPage;
  38:              this.records = totalRecords;
  39:   
  40:          }
  41:      }
  42:   
  43:      public class row
  44:      {
  45:          [XmlAttribute]        
  46:          public string id { get; set; }
  47:   
  48:          [XmlElement(ElementName="cell")]
  49:          public string[] cell;
  50:   
  51:          public row() {}
  52:   
  53:          public row(int ID, string Data, string Zm, string Stanowisko, string Linia)
  54:          {
  55:              cell = new string[5];
  56:   
  57:              this.id = ID.ToString();
  58:              cell[0] = ID.ToString();
  59:              cell[1] = Data;
  60:              cell[2] = Zm;
  61:              cell[3] = Stanowisko;
  62:              cell[4] = Linia;
  63:          }
  64:   
  65:      }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Classes “rows” and “row” create structure with once it is serialized then it conform to the xml structure required by jGrid component (line 45, 48 are quite important).

You first demo is ready! This should let you have a good starting point to tweak it up for your needs.

Advertisements

Written by Mariusz Gorzoch

28 August 2011 at 14:27