Duration: 18 minutes
Summary: In this video we continue the set of properties that we can change on a grid that we started in the previous video. If you recall, one of the important properties for the grid is the colModel. In that model you can specify all the column properties (whether they are resizable or hidden, and editable. In our case we changed some of the following properties: multiselect, altRows, cellEdit and cellsubmit(to change values in specific cells), hiddengrid, loadtext, sortscimg, sortdescimg, and toolbar. We also added a div to the html and used the pager property to load the paging controls at the bottom of the grid. We also used the columnchooser to allow the user to choose specific columns to display/hide.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, multiselect, altRows, cellEdit and cellsubmit, hiddengrid, loadtext, sortscimg, sortdescimg, toolbar, colModel, columnchooser, and pager.
Transcript:Welcome back, everyone. This is Ayad Boudiab. I'm a senior .NET application developer and we are continuing our series on jQuery UI. At the end of the series I started talking about the jQuery grid and what the jQuery grid can do for us in terms of displaying tabular data on the website. We went through some of the settings and some of the properties, and some of the data loading that we can do, as far as the jQuery grid is concerned.
In the previous video, I explained to you the purpose and the importance of column names and column models that allow us to specify the column names that we would like to display and the detail of every column name inside the column model by specifying, for example, the sort type, whether it's resizable, the alignment, the width, the index and so on.
I also showed you that I have an array of data that contains the information that I need. I looped through the array, and I used the method addRowData to add the data into the grid. Once that's done, I'm able to view that in the browser, and it should display for me the grid that I'm interested in. You notice in here I can go through these row by row but I cannot select them. That's the purpose of multiselect that you saw here. We turn multiselect to true, and now we are able to display the data and be able to select all the rows or some of the rows, based on our interests.
This is turning multiselect on and off. There are, of course, multiple properties that we can set here. We've already set the caption up top, right? So we can display the information on the top of the grid. Now, I can also specify other things. For example, I can after the comma here, put alt, rows, and then make that two. Basically, the rows will be in an alternating fashion, the way they are displayed. They might be a little bit hard to see as far as the format that we are using, but notice how the second row is wider than the third one.
You can see the color difference that shows when we are looking at them every other row that we display. That's how we can use alt, row. We can turn it on and off for our grid. I'll leave it off for now. I can also make cell editing. I turn cell editing to true, which means I'm able to edit the cells within the grid. Cell, edit, make that true. Now I'm able to edit the cells within the grid. I'll show you that in a moment because I also need to make additional changes in the column model in order for this to happen.
Also with the cellEdit, there is a cell submit that we can use. The values for the cell submit is client array and remote. This usually works with the cellEdit. Basically, it does what type of data you are submitting. This is just to modify the local array or some multiple that you are trying to make. This is the cell submit property that we can use. I'm not writing that here because I don't need it right now. I'm not submitting any changes.
The other option that I can turn on and off is for example, hiddengrid. I can turn the grid to be a hiddengrid. Hiddengrid. I can turn that to be true. When I try to display that in the browser, it gives me the grid originally hidden. You see the button on the right that you can display the grid and hide it. Initially, the grid will display hidden like you see here. This hiddengrid property works with the hide-a-grid. By default, the hide-a-grid is set to true so that's why you'll be able to get it to work. Make sure that you coordinate between hide-a-grid and hiddengrid to be able to get this to work correctly.
Since hide-a-grid is true by default, this hiddengrid will simply work by setting the property hiddengrid to true. For example, if you are loading data from the server, and that takes some time. For example, you can set load text. Load text. You can set that to the text that you want to display to show the user that the data is loading. For example, something like loading data, right? That will show the user that something's actually taking place if you're loading some data that takes time from the server. You can also turn the sort ascending and sort descending images to choose which images you want to use on your grid. For example, this case, sort ascending image, the original value for this one is actually the sort ascending.giv.
The other one for the sort descending image, this is set to sort descending.giv. What I'm talking about in here, if you load the grid in the browser, initially hidden, show it, you'll notice that we need to sort the data, you notice those images here. You see those? Sort ascending, sort descending. You can change those images to specific images that you would like. In this case, we use the default for sort ascending .giv and sort descending.giv, but you can change those if you would like to.
There's also a toolbar that displays some of the tools. For example, paging through the grid. You can display that tool bar. First, you can choose whether you want to display it or not. The second thing is whether you want to display it on the top or o the bottom. There are two values that are associated with displaying the toolbar; you display that as an array. Toolbar, specify that as array values.
Then you can say, for example, true. Yes. I want to display the toolbar. I want to display the toolbar on the top like so. Now, when you try to preview that ion the browser, you should be able to see. See that area for the toolbar up here? That's the toolbar that was not shown before. You notice if I turn this value to false, means I don't want to show the toolbar and try to preview that in the browser, you will notice that we don't have a toolbar, right? You see that it's gone from here. I want to show the toolbar and set that to true.
As I mentioned earlier, showing the toolbar, I can for example display a pager. That basically helps me page through the data. In the body of the page, you had the table, if you scroll down here. You've got the table in the body that displays your grid. You can add an additional div in here to help you for the paging. Text align to the center. The classic scroll for scrolling, and that's just the selected text that came from the CSS. There's id called "pager". Again, you can name that anything you want.
If you go up now to the properties, and you need to turn that property on, you can say for example, "pager" and then you specify what pager that you're getting. I say for example, "dollar sign" and then I say in here "#" because I want to refer to it by ID. Then I say "pager". That should pick up the pager div from below and display the pager for me so it can page through the data.
Of course in here, I have nine rows so I don't have the paging capabilities. At least it will display on the toolbar. If I try to view that in the browser, and here's the grid, you notice my pager is showing up, right? I can move to the first one or to the last one and I can also do page one of one or something like but in this case there is only one page. There's nothing else to that.
I'm sorry. I made a mistake in here. The toolbar is showing up on the top but the pager is separately showing up at the bottom. This is different than the actual toolbar that you see here. If you want to display the pager, you simply add a div down here in the body. You name it anything you want. In this case, we called it "pager" and when we set the property to go get that pager, it will add that pager to the grid. Now I can page through the data.
What other things can we do, as far as this grid is concerned? Let's scroll up here and look at the column models that we have. Now, for these columns, there are multiple properties that I can set. I made it resizable to be false. I cannot resize that. One more property that I'd like to add, I can say something like "hide dialogue" to be true. You might ask me, "Where'd this come from? What does it do? What's the "hide dialogue"?" Well, one thing that you can do is you can give the user the option of telling you which columns they'd like to see on the grid.
How do we do that? Down here in the code I can basically load the column chooser. I can use the dollar sign. Basically, I'm referring in this case to my grid, "#myGrid". That gives me myGrid. I've got the grid object. Then I can call the column chooser, and the column chooser takes an options array. In this case, my options array is empty, so I can just declare a "var options equal empty". There are no options that I'm passing to this column chooser. You're just taking the simple one. What does it do? It allows me to select columns that I would like to display on the grid. When would that happen? That happens when the dom is ready. As soon as my page is ready and displays, it will give me a way to choose columns.
Can I choose any column that I want? No, because in the column model we specified that this ID is hidden from the dialogue so it will not allow the user to choose it as part of the IDs of the various column display. Let's first set it to false. I should be able to choose any column that I want. Let's preview that in the browser.
Now when it displays it says, "What columns would you like to display?" I can say for example, "date, amount and total." I get date, amount and total. Let's go ahead and close that for a second. Let's turn hide dialogue to true. Let's go ahead and load that in the browser.
It tells me "What columns would you like to choose?" but it didn't give me the ID as part of my selection. It's hidden from the user. I don't want to see it. Show me all of them. Now I get, part of the ID is actually part of the dialogue, so it will display, but if I take the other ones for example, go ahead and refresh the page.
Then take client, total, notes, and I should be able to see clients, total and notes. The ID is not part of the selections for the user. The user cannot choose whether to show this one or not. It's part of the grid being displayed. I don't give the user the option of choosing that specific column.
Again, that's done through the hide dialogue true or false. Now, I should be able to give the user the option of choosing specific columns to display.
Back to the column model, what else can we do with the column model? We already specified the sort type. We can sort through the data, whether it said date, expenditure or so on. Now, remember when I told you about the cellEdit? Make it true. There's one more option that I'd like to turn on for a specific column that allows me to make this column editable. For example, the name column. You see that in here with the width 100? I want to make that editable. So comma, editable, and that will make it true.
Now, I'm making the column as editable, the name column is editable and I also set cellEdit to true. When I load that in the browser, that's fine, the client name is editable, test, let's make that test five. Hit enter. It says no error, no URL, so it will not allow me to set it. At least, I'm able to change that value. We'll talk about URLs and how we can save that data when it's changed.
I can fix one more thing that I believe would resolve this issue. Remember the cellsubmit that I showed you earlier? Let's see if we can mess with that a little bit. Let's go down here, and we specified the cellEdit to be true. How about if we specify the cellsubmit value. The cellsubmit value can be remote or it can be client array, right? I'm changing something locally in here. I'm going to specify as client array, comma.
Now I set cellsubmit. When we need to submit the changes to the local array, don't submit them remotely. Let's see if this helped me a little bit with the changes. Now I can say, "OK. Display them all." OK. Here's the client. That's the name. I can change that to five. Hit enter. Now it's changed because it's changing locally to the array, not to the remote.
To the remote one, I didn't see a URL. It says you cannot submit anything to a URL because you didn't give me anything, a URL to submit to. In this case, when we set cellsubmit to client array, now it's changing the values locally. Now, I can modify those by setting the cellEdit to true, the cellsubmit to client array, and for that specific column in the column model, we make that editable to true. That will allow us to change some of the data.
There's more as far as the columns are concerned, there are more things that we can change. I will show you that in the upcoming videos. Please stay tuned on Mr. Bool website. Thank you very much for listening. I'm Ayad Boudiab and you take care.