Duration: 21 minutes
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI , Visual Studio 2010, addRowData, jqGrid, datatype, height, colNames, colModel, multiselect, caption, sorttype, resizable, sortable, align, index.
Transcript:Welcome back everyone. This is Ayad Boudiab. I'm a senior .NET application
developer. When we left off in the previous video, we were talking about
creating a jQuery grid. I discussed with you the information about jQuery
grid, what it is and why I need it. If you remember we also talked about
using AJAX to make server calls, to be able to retrieve the information
that I need for the grid, or basically be able to update some of the data
from the grid. In other words, I should be able to come to a specific field
in this grid, change the data and be able to save that back on the server.
I am using AJAX A-synchronous calls to the server, so that is fast, I do
not have to post the whole page, I am just taking that bit of information
and sending it to the server. It is the same case for loading the data; I
get the data from the server and I display it on the page using AJAX. In
this case though, we start with creating local data, meaning just the data
that is available in an array, I load that into the grid and I display it
on the screen.
If you recall from the previous video, we have a caption on the top of the
grid. I am also able to minimize and maximize the grid. I am able to select
all of the elements on the grid, or one row at a time. I am also able to
sort them ascending and descending, for date type, integer types, for text,
amounts and I am also able to set some values that they are not sortable.
I should be able to, for example, the column, 'notes,' if I click on it, it
does not sort. I should be able to have the power of doing that. The
question that we need to answer in this video is; how did we get to this
point? How am I able to create that grid? In the previous video I showed
you how we can get the jQuery grid plug-in and how we can save that in a
specific folder, extract it and I will be able to create our HTML pages and
using Java script to be able to create that grid.
Basically, how did we get here? Let us go back and start crafting that from
the beginning to be able to load this type of grid. I come back over here
to the page, I see introductions to jQuery grid, I have the script that
tells me about when the [dom] is ready for jQuery to do something. Right
now, it is nothing. One thing that is important that I would like to bring
to your attention is in the body of the page. Well, in this case the body
has the following, but it could have anything you want. The way that the
jQuery grid works is you have to have a table that has been referenced
within the jQuery grid, in this case we create a table. The table has an
id called, myGrid. The table is empty. So far, if I try to load the page in
the browse,r I get nothing, OK?
I have a table with id myGrid and now the question is how do I go about
creating that grid and working to get to the point that I can display the
grid like you saw previously? Obviously, I need references, right? I need
to reference some scripts; I need to reference some CSS in order for me to
get to that point. Let us see how we can do that.
First of all, I come over here to the top and I need to add my references.
Here they are, I have a link to CSS and the page is
jquery.ui.1.8.17.custom.css, it is in the CSS folder. If you see here,
this is where we extracted the jQuery grid and CSS folder I copied my
jQuery UI custom into here.
By the way, when you are working with jQuery or jQuery UI you might have an
older version, or a newer version. In this case, as long as you are
referencing the correct version it does not matter, you don't have to have
1.8.17 in order for this to work.
This is the jQuery UI 1.8.17 that I am referencing in my page. I am also
referencing ui.jquery.css which is this page, right? UI this file,
ui.jquery.CSS, these are all under the CSS folder. Then I am also
referencing in this case some Java script. The first obviously, to start
with, is I need to reference J query. I am using jQuery 1.7.1 which is
available in JS folder, here is my JS folder and here is J query 1.7.1;
that is the .min, is the actual jQuery file that I am referencing in my
I also have under JS, the J query UI custom min, which is again under the
JS folder; here is the custom min for the jQuery UI. After that, it is
important for me to reference the locale specific file. If you remember
under i18n, which we talked about earlier in the previous video, it has
locale specific for all of the languages; French, English, German and so
on. In this case, since I am working with the English version, I reference
Then the last one that I need is the jQuery grid.min which is available
under the JS folder. Here under the JS folder, I have the jQuery grid min.
I believe in this case the order does matter. You have to have the locale
before you reference the jQuery grid. Be careful for the ordering of how
these things work. This is one thing that is critical about working with
Java script, jQuery and so on. Sometimes it just goes silent and you do
not know what is wrong and you have to dig in and figure out that a script
reference must be before the other or you have some type of comma that you
forgot and it is not warning you about the comma. You just end up with
nothing and then you have to dig in and find what is wrong with the code.
In this case, to wrap it up, we have two CSS files, the custom and the
jQuery grid, and then we have the references for the jQuery, jQuery UI,
locale specific and the actual jQuery grid. Having those references done,
now I need to start building my grid.
Like you worked with jQuery UI before, when I was explaining that any
control that I talked about, any control for example, let us take the
accordion. When I was talking about that, I said, you need some type of
properties, you need to be able to set the properties, you need to be able
to record some methods and you need to be able to work with events. You set
those for specific controls or specific widget and that is how you get it
It is the same for jQuery grid. In this case then, the first thing that we
need to start with is to build the jQuery grid object before we can
proceed. Now what did we have that named here? We called it 'My Grid'.
Again, that is an HTML table. In the other widgets it used to be a div, in
this case it is a table, so be careful of that.
Inside my jQuery, I will start by referencing that specific object named
myGrid. '#' for IDs. Here is myGrid. I got the grid and I will call .jQuery
grid on it, .jqGrid. Now, I start providing my properties and try to get
that jQuery grid to work.
Here is the information. That closed, this one is closed here. The jQuery
grid object is closed here and now inside this I start building my
properties and everything that I need for this grid.
The first thing that I need to start with is the data type. I need to tell
where the data is coming from, the data in this case is local; it means
that I have it locally in an array; it is not coming from anywhere else.
Again, the data type in this case is local, that is the first property that
I was setting. The order does not matter because it is going to read all of
these properties anyway before it loads. That is the first thing that we
start with in this case.
I also need to set the height. The height for this grid is for example,
250, which is the height of the grid. The second thing that I need to
select, for example, is the caption. Remember the caption that you saw on
the top? I need to specify what that is, for example, "Displaying data from
array." That is the caption that shows up on the top of the grid. Do you
notice how we are doing that? Property: Value, Property: Value and in
between you put the commas. Don't forget the commas otherwise it will not
You need to specify what the column names are, you need to tell jQuery grid
what columns to display. Here are the column names; you just call it
'Column Names' like that, with a capital N, and you specific in an array
order, like you have arrays in Java script, you specify the column names
that you want, separated by commas, in this case; invoice number, date,
client, amount, tax, total and notes. I am not creative here, I am just
getting those the way they were in the jQuery grid example from the jQuery
grid website, so you will see the same information, and I am just trying to
illustrate how they work.
You have the column names. Here are the column names separated by comma,
quotation around them in an array format that tells me what column names I
The second thing is, and the important part is the column model. The column
model, just tell jQuery grid what kind of columns they are. Is there
something integers? Is there something a float? Is there something that is
text? Is it sortable? The sort type, things like these, these are
information that you need to specify in your column model. Your column
model is very important in this case I need to specify my column model.
Here is the column model; the column model says, and here is the array,
starting of the array, here is the closing of the array with a comma
because there is more information coming. Every one of those you specify
the column in curly braces, and you specify the information specific to
that column; in this case the first column is "invoice number".
For that invoice number the name is ID, the index is also ID, so I can
reference it in my code, the width is 60. The sort type is integer, so
jQuery grid would know how to sort it. The sizable is false which means I
cannot resize this column.
The second one, which is the "Date" it says the name is index date, name
and index is usually the same. Width is 90. Sort type is date. When you are
sorting that please remember it is the date pipe that we are sorting, not
The third one is client. The name is "Name". The index is Name and the
width is 100. The fourth one is amount. Name is amount. Index is amount.
Width is 80 pixels. Since it's an amount, I want to align it to the right
and also sort type is float, so it knows how to sort it. For the tax
information, the same thing; align to the right, sort type is float.
The total. Index name is "Total", index is Total and width is 80, align to
the right, it is float.
The last one for "Notes". Index, width and sortable is false; which means
if you click on it you should not be able to sort that part of the column.
That is how we specify the column model. Remember the column model names
and the column model work hand in hand to specify the columns that I need
for this specific grid. So far, so good.
The second thing is, can the user multi-select those columns? Can they
multi-select all of the rows, I'm sorry, not the columns, all the rows in
the grid? Your specify that using multi-select. Multi-select is true. We
have specified the data type, the height, the caption, the column names and
the column called multi-select. Notice that since multi-select is my last
property here, I did not put a comma afterward.
The next thing that I am going to specify is where the information is
coming from. I specify in here that the data type is local; which means the
data should come from somewhere on the page from an array. I did not
specify the data yet, I specified what columns they are, what types they
are but I did not specify the data. That is the next thing that I need to
show you here.
The data is an array specified on the page and it looks like the following;
we said, var mydata and it is an array and here is the data with an array.
Here are the rows; one, two, three, four and so one. Every one of those has
the data that is specified in the column model; ID, ID1, ID2, ID3. Invoice
data, invoice date is this and this and this and that. The name is test;
the note is note, which is this one. We don't have to put them in that
specific order. The amount is 200.00. The tax, tax here is $10.00. The
total at the end is 210.00, here is the total. Every one of those rows that
you see here specifies all of the columns that you declared earlier. It
gives me a set of data that I can display on the page.
Now my next job is to go in and add that data to the grid. How do I go
about doing that? We do this in the following manner; we loop over the
data. This is an array, so I loop from zero to mydata.length; i++ and then
I specify mygrid, which is the grid that we have here. The jQuery grid,
you'll notice that I am calling the jQuery object. What am I doing here? I
am calling a method; remember we use the same syntax we used in jQuery UI.
We specified, we called the jQuery function, it is like a constructor if
you are working with object oriented programming. Then in here you specify
the method name and you give it information that you are interested in.
In this case, addRowData, or in this case zero, zero plus one is one,
addRowData, location one. Mydata sub i, which is my data sub zero, as the
first row, keeps looping my data sub 1, is the second row, data sub two,
third row and so on.
That is how I add using addRowData; I add the data into the grid. A quick
wrap-up; we specified the table with an ID and then when we went back and
we started calling the jQuery grid, building the object, we gave a key
value pair or properties about that grid; like the data type, the height
and the caption.
We are also concerned about column names and column models. The model tells
you how the columns are, what types they are, whether they are sortable or
not, width, index and so on.
Then, the data should come from somewhere, in this case the data comes
locally and you specified that up here by saying data type is local. It
came from an array. You have the data in the array, you could have it
anywhere else but in this case it is declared here in the array. You loop
over the array. You use the method addRowData to add the data from the
array into the grid.
Now, I save my file, right click, view in browser. Here is my grid. I will
be able to multi-select. I am able to sort because I specified that. I know
the date in this case is a type of date. The client is test and I am able
to sort those. The amounts are float and I am able to sort those. Same
thing for the tax, same thing for the total but I am not able to sort the
notes, for example, because for the notes I specified over, that the notes
are not sortable.
Multi-select is true. I can make multi-select a false, save, come back here
and F5/refresh the page, reload. Now can I multi-select? Of course I cannot
because notice in here, the check boxes that used to show up on the corner,
they are not there anymore so I am able to sort but I am not able to multi-
select, I can only select one row at a time. Notice when I have it over the
data, it gives me that information about the values.
This is how the jQuery grid works. Of course there are a lot of properties
that we need to talk about, a lot of events, methods and so on that we need
to talk about, about editing the data and eventually I will be able to load
the data from the server using AJAX calls to load the data, I don't have to
have them in an array like you have just seen. I will also be able to edit
that data and save it back to the server. We need to work with all of that
in order to get our grid completely working.
This is about it for this video; please let us know on Mr. Bool website, if
you have any questions. Thank you very much for listening. I am Ayad
Boudiab and you take care.