× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to jqGrid - Course Introduction to jQuery UI - Part 13 | web Developer courses

In this video I will start the introduction to jqGrid. We use this grid to display tabular data on the page.


Duration: 16 minutes

Summary: In this video I will start the introduction to jqGrid. We use this grid to display tabular data on the page. The definition from the Trirand website is as follows: "jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. jqGrid uses a jQuery Java Script Library and is written as plugin for that package."
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?

Well of course, in a sense I could being using ASP.NET and I just drop a grid, and make sure that I can get some type of database, and display that tabular data within ASP.NET grid. So what's the difference between that and the jQuery grid that I see here? Well first of all, jQuery grid, by the definition in here on the wiki, on the trirand website, a jQuery grid is an Ajax-enabled JavaScript control. So it's JavaScript, Ajax-enabled, right? So that helps me make async calls back to the server, display data, change data, and so on. It's JavaScript, so it's on the client side, using Ajax, that means it's fast. If I'm comparing that to an ASP.NET control, it's faster.

So in that case, then, I'll be able to work with many different server technologies like php, ASP, ASP.NET, Java servelets, JSP, ColdFusion, Pearl, I'll be able to call the server for some data and display that data on my grid. okay, so then it helps me in the sense that I can drop that grid, I can add that grid on my web site, and using some type of JavaScript I can change some of the properties for that grid. I can call some methods for that grid, I can call some events for that grid. So the user can change some data and then I can make Ajax controls, Ajax calls back to the server and be able to change that data. So in the sense of using a jQuery grid, I want to show you just one difference between it and the ASP.NET grid. So let me go ahead and load Visual Studio in here for a second. I have an ASP.NET website called GridTest, and I would like to add a new item to it. That's a webform, I don't want to have a master page. Let's call that mygridtest, or simply mygrid, that's fine. Add that page. Right now the page has nothing on it. Within the form, within the div, I'm going to go to my data tab on the left-hand side and grab a grid-view and display that over, and drop that on the page. I could use the other elements but in this case then I would just need a grid-view

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.

Now let me go back to the VisualStudio for a second. I have a jQuery grid here. I will discuss the code later. We'll talk a lot more about the code later, but let me show you something. If I try to view that in the browser that's what I end up with. I have a grid that displays the data. You are familiar with this theme, right? This is the Dark Hive that I discussed with you when we were talking about jQuery UI. I'm able to show and hide the grid. I have some caption on the top of the grid. You see that. I have some place down here that goes way before a toolbox, so I can browse the data, go to other pages in the grid. As I go through the records they are highlighted. I am able to select one or unselect it or select all of them unselect all of them. I can sort, ascending and descending with the invoice number, with the date, with the data here, the amounts, the tax, the total, the notes. I'm not able to sort the notes and we'll see how we can do that later. So in this case then I simply loaded a grid and this grid, if I view the page source I have some references, I have some JavaScript code, and that' about it. Look at the body. The body just says table mygrid. That's the only thing that's available in this case.

So it's fast, it's powerful, you will be writing some JavaScript code. You'll notice I have here a bunch of JavaScript code, using jQuery. And I'll be able to use the data. Of course in here we are, I'll discuss that again later, but I have the data right on the page. I am not calling any web service to provide me the data yet. So this is how the jQuery grid would look like. And in the upcoming videos I'll be taking a tour on adding properties and see how the properties affect the grid. I'll be able to make calls to some methods. I'll also be handling events to see how all this works with a jQuery grid. And again this jQuery grid is very powerful and as far as performance it's great. Because all that I'm using is, Ajax calls to the server to be able to save data, load data, and so on. I don't depend on the view-state, that I just showed you, when I display an ASP.NET grid.

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.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login