SharePoint - jquery gridview in webpart sharepoint

Asked By begennerSharpoint on 01-Jun-11 01:43 PM
HI to all ,
Can i use JQGrid in my webpart sharepoint ? i want to create CRUD grid client side ? how can i do this ? thanks 
Jatin Prajapati replied to begennerSharpoint on 01-Jun-11 02:45 PM
You have not mentioned which SharePoint version you are using. if you are using SharePoint 2007, then you have to write the custom web part from scratch and have to include the jQuery and jQGrid related all javascripts and css. then you can implement those in web part.

If you are using SharePoint 2010 then you can use JSGrid. You can get more information from

Feel free to write for further query.
Riley K replied to begennerSharpoint on 01-Jun-11 09:03 PM
The development of custom web parts in SharePoint often brings some questions like – how will I do sorting and searching. How will I support and implement paging, can I have modal pop up with details information presented?
Well, if you need to develop all these features from scratch, you will end up with tons of javascript files and code behind methods for building the complex interface. Most likely you will also have css file with a quite big content. And since the web part is pretty much custom control, debugging what it renders is pain in the butt.
I had the same concerns and decided to implement my web part using jqGrid, which pretty much gives out-of-the-box the sorting, paging and filtering. Plus it is easy configurable in few lines javascript.

refer these links
TSN ... replied to begennerSharpoint on 01-Jun-11 11:57 PM

Simple Gridview Webpart for Sharepoint

Open Visual Studio.....

Click on New >> Project >> and following screen will appear there select "Server controll" give any name you want to give :

then in the solution explorer 1 class file will be created give any suitable name to the class file ; here create a public class for the WebPart and then write following code to create a TextBox inside a Webpart where we will write our Queries to populate the Grid:

The pseudocode for that is as follows:
private string sqlquery;
[Personalizable(), WebBrowsable(true),WebDisplayName("SQLQuery"),Category("Data Properties")]
public string SQLQuery
get { return sqlquery; }
set { sqlquery = value; }

Here in the code above you can see the Text called as "Data Properties" that is the section for the name ; you can give what ever name you want for that section.

Now will create a childcontrol for this.
protected override void CreateChildControls()
GridView grv = new GridView();
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter();
string strConnection = System.Configuration.ConfigurationSettings.AppSettings.Get("connection");
string sql = sqlquery;
//DataTable dt = new DataTable();
//dt = objDB.GetSQlResult(sql);
da = new SqlDataAdapter(sql, strConnection);
da.Fill(ds, "data");
grv.DataSource = ds.Tables[0].DefaultView;
grv.GridLines = GridLines.Horizontal;
grv.CellPadding = 6;
grv.HeaderStyle.BackColor = System.Drawing.Color.LightGray;
catch (Exception ex)

this code will create the Gridview webpart now you can build the solution and you can give the output path of you build to the Bin folder of the sharepoint site or you create a dll with the strogn name.
1. double click on the properties >> signing and it will allow you to give the string name for that.
2. After that deploy that dll to the Windows >> Assembly and then right-click the dll and have a look at the properties there you will find PublicKeyToken.
3. Then go to the Sharepoint's Web.Config file and register this control as Safecontrol it will look something like this:

Here Assembly name basically name of the dll , then version and PublicKeyToken all the information you will find while you will right-click the dll , namespace is the detail you will see inside the .CS file. other are the default values.

Now open the sharepoint site and go to the Site settings >> Web parts >> New

There you will find your web part with the extension (webpart) and checked it and click on the populate gallery.

To check the webpart you create a new web part page and then click on the add web part , it will open a box there you will see your web part. add it to your page it will look something like this:

Here you will have an option of Edit the web part click on that and you will a contex menu on side there you will be able to see the "Data Propertie" under that you will find textbox ; there you can write your Query. and accordingly Data will get populated.

hope this helps you...
Jitendra Faye replied to begennerSharpoint on 02-Jun-11 12:04 AM
For rendering the jqGrid next js functions and styles are used:

• jquery-1.4.2.min.js
• jquery-ui-1.8.5.custom.min.js
• /jqGrid/js/i18n/grid.locale-en.js
• /jqGrid/js/jquery.jqGrid.min.js
• SampleWebPart.js
• OrdersHistoryDetail.js

• jquery-ui-1.8.5.custom.css
• jqGrid/css/ui.jqgrid.css

For example Follow these links-