jqGrid Quick Tips

AlexCode

Rate me:

4.91/5 (8 votes)

21 Aug 2011CPOL2 min read

jqGrid quick tips

I'll use this post as a repository of quick tips so I'll be updating it on a regular basis... keep posted!
Get It!
The Blog Features Download Documentation On StackOverflow

Licensing and Flavours

jqGrid is an open-source control registered under the GPL and MIT lincenses. Basically this means that it's FREE! and you can do quite anything with it. Read more about this here.

If you want to use the "side" versions of this control, specially wrapped and packaged for PHP, ASP.NET Webforms and ASP.NET MVC, then you have to pay for them... but trust me when I say that all you need is on the free package!!

See the price list here. You can also access the paid versions website here. The feature set is a huge list and has an awesome community on Stackoverflow that replies to your questions in no time.

Columns

1. Hide a Column

I'm putting this on here just because it's not the instinctive visible, it's called hidden!

JavaScript

Copy Code

colModel: [{ name: 'colName', hidden: true }]

Data

1. Refresh Grid

If you need to refresh the grid from code, just call:

JavaScript

Copy Code

$("#grid1").trigger("reloadGrid");

The tricky, and not too well documented part is if you want to refresh and select the desired page:

JavaScript

Copy Code

$("#grid1").trigger("reloadGrid", [{page:3}]);

This will refresh the grid and show it on page 3. With this, you can refresh the current page:

JavaScript

Copy Code

var currentPage = $('#grid1').getGridParam('page');
$("#grid1").trigger("reloadGrid", [{page: currentPage }]);

You can also keep the current selection:

JavaScript

Copy Code

$("#grid1").trigger("reloadGrid", [{current:true}]);

Note that both page and selection settings can be used together.

NavBar

1. Add Custom Buttons to the NavBar

JavaScript

Copy Code

/* Add this line to allow advanced search using the toolbar button */
$('#grid1').navGrid('#grid1pager', { search: true, edit: true, add: true, del: true }, 
{}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true });

/* Add this line to include a separator between buttons */
$('#grid1').navSeparatorAdd("#grid1pager", { sepclass: 'ui-separator', sepcontent: '' });

/* Add this line to include custom buttons on the toolbar */
$('#grid1').jqGrid('navButtonAdd', "#grid1pager", { caption: "", buttonicon: 
"ui-icon-plusthick", onClickButton: function () { alert('Exporting!!!!!'); }, 
position: "last", title: "Export to Excel", cursor: "pointer" })

Search

1. Show the Advanced Search Dialog from an External Button

JavaScript

Copy Code

function OpenSearchDialog() {
     $("#grid1").jqGrid(
          'searchGrid', { multipleSearch: true, overlay: false });
}

2. Show the Filter Toolbar

The filter toolbar is a bar that appears right below the column captions that allow filtering by each column. To make this toolbar visible, use the following:

JavaScript

Copy Code

$('#grid1').jqGrid('filterToolbar', 
            { stringResult: true, searchOnEnter: false });

Selection

1. Get the ID of the Selected Row

JavaScript

Copy Code

$('#grid1').jqGrid('getGridParam', 'selrow')

2. Get the Row Data

JavaScript

Copy Code

var rowData = $("#grid1").jqGrid('getRowData', rowid);

rowid: is the id value set on the data source, NOT the index of the row. This returns an object with the column names and value like:

JavaScript

Copy Code

{name="alex", address="here and there", age=34}

so it's easy than the get a value using:

JavaScript

Copy Code

var myName = rowData.name;

Be aware that the object will only have the columns configured on the colModel. Everything that may come on the datasource won't appear here. If you want to have values here that you don't want to show on the grid, you must add the column to the colModel collection and set it to hidden: true.

This article was originally posted at http://www.instanceofanobject.com/feeds/posts/default

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

AlexCode

	Architect
	Switzerland

Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

Comments and Discussions

Hi
i am new in jqGrid . i try to use it but my data is not bound. my aspx page like

ASP.NET

Copy Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqGrid_Dynamic.aspx.cs"
	Inherits="DynamicjqGrid.jqGrid_Dynamic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

	<script src="Scripts/json2.js" type="text/javascript"></script>
	<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
	<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
	<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
    <link href="themes/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
	
    
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<script type="text/javascript">          
		$(document).ready(function () {
		   jQuery("#list2").jqGrid({
	                //url:'jqGrid_Dynamic.aspx/GetData',
	                datatype: "jsonstring",
                    data: {"page":"1", "total":2, "records":"13", "rows":<%=GetData() %>}, 
	                colNames:<%=GetColumnName() %>, 
	                colModel: <%=GetColumnInfo() %>, 
	                rowNum:10,
	                rowList:[10,20,30],
	                pager: '#pager2',
	                sortname: 'ID',
	                viewrecords: true,
	                sortorder: "desc",
                    grodview:true,
	                caption:"JSON Example"
                });
                jQuery("#list2").jqGrid('navGrid','#pagersg11',{edit:false,add:false,del:false},{},{},{}, {multipleSearch:true});               
        });
		</script>
		<table id="list2">
		</table>
		<div id="pager2">
		</div>
	</div>
	</form>
</body>
</html>

and my .cs code like

Copy Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Serialization;


namespace DynamicjqGrid
{
    public partial class jqGrid_Dynamic : System.Web.UI.Page
    {
        string connection = System.Configuration.ConfigurationManager.ConnectionStrings["connection"].ToString();
        protected void Page_Load(object sender, EventArgs e)
        {

        }

       [WebMethod]
        public string GetData()
        {
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            string result = string.Empty;
            try
            {
                using (jqGridDataDataContext db = new jqGridDataDataContext(connection))
                {
                    var info = (from a in db.Emp_Msts
                                select new
                                {
                                    ID = a.id,
                                    Name = a.emp_name + " " + a.emp_lname,
                                    City = a.city
                                }
                                );                   

                  result = serializer.Serialize(info);

                }
            }
            catch (Exception ex)
            {
               // Debug.WriteLine(ex);
            }
            finally
            {
                //if (db != null) db.Dispose();
            }

           // return result;

            return result;
        }
      


       [WebMethod]
       public string GetColumnName()
       {
           return "['ID','Name','City']";
       }

       [WebMethod]
       public string GetColumnInfo()
       {
           return "[ { name: 'ID', index: 'ID', width: 55, search: false },{ name: 'Name', index: 'Name', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }, { name: 'City', index: 'City', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }]";
           
       }
    }
}

can you help me ? or provide source code.

General

News

Suggestion

Question

Bug

Answer

Joke

Praise

Rant

Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tagged as

Stats

jqGrid Quick Tips

Get It!

Licensing and Flavours

Columns

1. Hide a Column

Data

1. Refresh Grid

NavBar

1. Add Custom Buttons to the NavBar

Search

1. Show the Advanced Search Dialog from an External Button

2. Show the Filter Toolbar

Selection

1. Get the ID of the Selected Row

2. Get the Row Data

License

Share

About the Author

Comments and Discussions