Duration: 16 minutes
To illustrate its use I will compare the ASP.NET grid to the jqGrid. I will show you the viewstate information going back and forth between the client and the server for every request when using an ASP.NET grid. jqGrid on the other hand does not use viewstate. I will also show you the installation steps and how to get started using the grid. In the upcoming videos we will delve into the details of creating a jqGrid and changing it properties and responding to its events.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, jqGrid, Ajax, ViewState, css, ASP.NET.
Transcript Welcome back everyone. This is Ayad Boudiab. I'm a senior .NET application developer. And we've been discussing jQuery UI. And in the previous videos I've discussed with you some of the features that I'd like to use within jQuery UI. We talked about widgets, we talked about effects, we talked about drag-and-drop, and sorting, and moving elements and so on. So we know how jQuery UI works. But one of the key features that I'd like to discuss is how can I display tabular data on the website?
On the design section, I have the grid, and then I can select a data source. I need to point to some type of database so I can display the data. Just in this case, as I said, just any data source that I can find and can work with. In this case I'm using a SQL server. So I'm going to select one of those tables. Connections. I'm going to go with AdventureWorks. Okay. Keep everything as-is. It will show up momentarily and then I'll be able to select data from a specific table and display that data on the page. So it looks out to AdventureWorks, it picks up all the tables, all the views, everything I can use. For example the address. And select them all. Click next. That's fine, let's go ahead and click next. And I need to make sure first where the address is because these are driven by schema so I need to make sure that I get the correct address. So I loaded SQL Server, and in SQL server I notice that within AventureWorks address is in the person scheme. Just to make sure that I get the right query that I want I can just do some selectdump1000 if I'm interested, give me the top 1000 rows from that table. Well of course there might not be 1000, but in this case there is, and here is my select state. So I should say person.address, because it is in the person scheme. Right now what I have in here is select everything from address, so that query may not give me the right data that I want, but I can fix that shortly and I'll show you. That's not the key point. I just need to show you something different to illustrate using the ASP.NET grid versus the jQuery grid. So in this case then, if I view the source, I get my grid-view and I also get my select command. Select everything from address, well we know this should have been person.address. Let's go ahead and view that in the browser. I should be able to display the grid with all the data in it that I got from the address table within the person scheme. So that's within Google Chrome, that's the default browser. So it needs to display that data for me. It takes a little bit of time. First of all it's the first hit, second is that we have a bunch of data in here. So this is the table of all the data that I have from the address. Well taking that, that will be the actual page with all the data in it, and it will be done shortly. I need to view the source and see what kind of source I have on that page. So view page source. That should show me the html with everything that comes in with that page, that was served when I make a request for mygrid that ASPX page. When I view that data I should be able to see the information that keeps going back and forth between the client and the server. Well in this case, I paused the video for a second and I went back to SQL Server. Because the page is taking some time to load, and it's my bad. Because in here I notice that if I select the count start from address, I have about 19,614 rows. So I don't want that much. I just need to illustrate a point in here, I don't want to wait for it to load, so I'm going to select top 100, and again I'm just illustrating a point, so I don't want to waste my time on the specific ASP.NET grid. I just need to show you the view-state information that I care about. So I view that in the browser, selecting top 100. Of course it's going to give me 100 records and then I view the source. Well notice in here what I have. Of course the data is underneath, here's the data. But look at the view-state information for this specific page that's going back and forth between the client and the server. And this if for the top 100 rows and imagine if I need to be selecting more, imagine the impact on the performance of your page.
That's what you get with the view-state. For an ASP.NET page, in order to remember the information, in order to remember some specific criteria about the page and your request and what columns you have and so on, all this is saved here. Well I don't want this much information to go back and forth between the client and the server. Of course I can use Ajax in here, but the solution that the jQuery grid provides me, is a solution that does not use view-state So I can use Ajax, I can make calls to the server, I can retrieve my data. I can also use Ajax to make the calls to the server to update my data, adding new rows and so on, and I don't have to depend on view-state. Which is very helpful, very powerful, performance is excellent. So let me go back in here for a second and show you where I can get the jQuery. Well if you go first to the trirand website, you notice that you can get the jQuery grid. And you can go to the, and you notice in here that's the link on the top, if you go to the downloads you have one for PHP, one for ASP.NET, one for MVC, but this is a thirty day trial. So I don't want to go here. I'm going to go to this link which is the one that you see on the top, I have the download for the jQuery grid plug-in, that's what I'm interested in. And then on the plug-in you will have all the features that you can add to this grid, the format, the methods, common jQuery grid, form edit, and so on. I keep everything selected, and I download that. I download that and I end up with something like this.
Over here I have the zip file, I unzip it and it gives me those folders. And the CSS I have view either jQuery grid, I also added the custom that I got from my jQuery UI previous discussions. When I was talking about Dark Hive, that's the custom CSS that I'm interested in using in my jQuery grid. So that's what I have in this folder. I also have in the JS folder I have the jQuery grid min, I have simply jQuery itself. I need that because that's what jQuery grid depends on. And I also have the jQuery grid UI custom made, as well. So in this case then, I also have the plug-ins for add-ons, multiselect, and search filters and context menus and so on. We'll discuss those later. But these are part of the plug-ins that come with this download. And then I also have the cell edit, the common, the custom, the filter. I also have the i18n folder which contains the local specific information. If you're providing grid in French and other languages, you can get that from here. I'll show you how we reference the English one so we can provide the English version of the grid.
So these are the information that I have when I downloaded the jQuery grid 4.3.1 and I, basically what I did is I unzipped that in the specific folder. This is the folder where I have my other pages. So when a specific page needs to reference something in the JS folder it will say JS/jQuerygrid.min.js. So this is where my folders are, and this is where my pages are. They reference the data or the other files in that folder.
This is the intro to jQuery. Again, don't forget to go to this link with the jQuery grid plug-in and download the free version of this plug-in Once you download that free version you unzip it to a specific folder. In this case, this is where my folders are, all my pages are in the same directory where my folders are. So please keep that in mind when we are discussing the code later because you will see my references appear on the top. You will see that in the top here. You will see my references for CSS, JS, and so on. I'll talk to you about those a lot later. So that's it for the introduction to the jQuery grid. And thank you very much for listening. I'm Ayad Boudiab, and you take care.