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 page.
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 js/i18n/grid.locale-en.js.
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 to work.
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 work.
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 am displaying.
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 integers.
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.