Scenario
I wanted to do some conditional formatting on my rows of data using the gridComplete method. In order for me to do conditional formatting, I need to be able to access any column for a given row, so I can affect the cell contents. Now, from a jqGrid wiki/documentation perspective, there appears to be two different methods we could use: setCell or setRowData.

setRowData is what we’re going to talk about here. Consider the following code:

gridComplete: function() {
    var rowData = $("#backlog").getRowData();
 
    for (var i = 0; i < rowData.length; i++) 
    {
        $("#backlog").jqGrid('setRowData', rowData[i], false, {color:'red'});
    }
},

Now before we get into what this does specifically, the above won’t work, and you won’t have a clue why. No error messages, nothing in the Firefox console, nada. I really scratched my head over this for a while, until I started to notice that users on forums and stackoverflow were using getDataIDs, not getRowData. So re-written as follows, it works:

gridComplete: function() {
    var rowData = $("#backlog").getDataIDs();
 
    for (var i = 0; i < rowData.length; i++) 
    {
        $("#backlog").jqGrid('setRowData', rowData[i], false, {color:'red'});
    }
},

So while the above does work, it’s important to understand why the previous bit of code did not. If you want to use getRowData, then when a method like setRowData asks for rowID, instead of passing in rowData[i], you need to specify rowData[i].ID. That’s the key differentiator. If we use getDataIDs, obviously we can use rowData[i] because the array only contains IDs, instead of the entire row object.

Now, what does the above do. Well, it iterates through all the rows for your grid, and set’s the color of each cell text to red.

One other thing to note, if you want to set a different style like background-color, you won’t be able to set it by simply replacing color with background-color, you’ll need to set a class and define your background-color in your class:

.myclass td {
    font-weight : bold !important;
    background-color: red !important;
    color: white !important;
}	
 
...
 
gridComplete: function() {
    var rowData = $("#backlog").getDataIDs();
 
    for (var i = 0; i < rowData.length; i++) 
    {
        $("#backlog").jqGrid('setRowData', rowData[i], false, 'myclass');
    }
},

It’s important to note that the false parameter simply means that I want to affect the entire row, if you wanted to single out a particular column FOR ALL ROWS, it would look like this:

gridComplete: function() {
    var rowData = $("#backlog").getDataIDs();
 
    for (var i = 0; i < rowData.length; i++) 
    {
        $("#backlog").jqGrid('setRowData', rowData[i], {Title:'some new content for cell'}, 'myClass');
    }
},

Hopefully that was helpful!

Shereen

So what is all this ajax hype? Let’s break it down based on the great summary from Yahoo:

In a traditional, non-AJAX web world, if your web application needs to get new data to update itself — even if that’s just a tiny bit of data — you write your page so that when new data is required a user action (a button click, for example) triggers the browser to make an HTTP connection (a form submission) back to the web server. The problem is that with each HTTP connection, a new page is reloaded. All the elements of the page are broken down and recreated each time while the user waits for the network and waits for the page to redraw. Its incredibly inefficient, slow, and not much fun for the user.

Great explanation.

Now, we use a lot of Ajax in our applications here at Black Ninja because of it’s efficiency, ease of use and simplicity. What I’d like to point out are the options and gotchas for parsing the XMLHttpRequest object (directly from the Yahoo article credited above, but summarized in bullet form. Anything in green are my comments):

1. After the XMLHttpRequest call is complete, the response data is contained either in the responseText property, the responseXML property, or both. So if for example, you’re alerting on your response object, and the message box returns “[object XMLHttpRequest]“, the response data is either in response.responseText or response.responseXML.
2. If the data you get back from the web service is in XML format, both responseXML and responseText are filled.
3. If the data is in any other format, responseText is filled. However, whether responseXML gets filled is dependent on the browser and the Content-type the server returns (text/xml or application/xml). In practice, responseText seems to be more reliably filled across browsers and web services.
4. If the responseXML property is filled by the XMLHttpRequest object, that property contains a Document object whose elements you can access in JavaScript using standard DOM methods (getElementsByTagName, etc).
5. If your response format was XML but all you have is responseText, you will need to use an XML parser to get the information you need out of the XML text. Both Mozilla and Internet Explorer have XML parsers built in; see this tutorial from www.faqts.com for help in getting started.
6. If your response was in JSON format parsing is perhaps easiest of all. JSON is short for JavaScript Object Notation — JSON is JavaScript. To interpret a JSON response just eval the response, and you’ll get a JavaScript object back:

   var myObj = eval ( xmlhttp.responseText );

   Once you have the data in hand you can update the page with standard JavaScript and DHTML methods. No need to reload or redraw the entire page — just modify the part of the page that needs the new data.

Super great summary, thank you Yahoo Developer Center!

I found a ton of useful info on the jqGrid forums but it didn’t quite get me there.

The forum article in the above link suggests that you add the follwing CSS to your page:

1
2
3

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
}

The above worked great for FF, but in IE, it would wrap the content, but the cell height would not auto adjust and therefore you really couldn’t see the full content. So I made a couple more changes as per the code snippet below and this seemed to work for me.

So the height:auto forces the cell height to auto adjust based on the size of the wrapped content. I haven’t noticed any side effects of changing this. If anyone has I’d love to hear about it. The vertical-align:top ensures that the text positions at the top so that the cells with less content don’t disappear in the centre due to the larger cell blocks. And finally, I added a bit of padding so that my cells don’t look oddly aligned due to the vertical-align bit, but that’s optional. It’ll work without it.

1
2
3
4
5
6

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

If anyone else has run into this issue or has had to make a similar change, add your contribution to the comments below.

1
2
3
4

<div id="thisismydiv1"></div>
<div id="thisismydiv2"></div>
<div id="thisismydiv3"></div>
<div id="thisismydiv4"></div>

To return an array of all divs that start with ‘thisismydiv’, you would use the following:

1

var divList = $("div[id^='thisismydiv']");

The above translates to, find me all divs whose id starts with ‘thisismydiv’. You could now do something cool like add a class to all those divs:

1

$("div[id^='thisismydiv']").addClass('myClass');

Now after doing a bit of digging, I learned that this is actually functionality that is in the works for future releases of jQuery UI. Ticket 3924 is currently open and in development, which is a good sign. Further investigation landed me on this page: http://jsbin.com/uqage which is a fantastic example of how the Closable Tabs concept could work.

My final solution involved me tweaking the above to work as follows:

Setting Up the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="mytabs"> 
   <ul>
      <li><a href="#tabs-home">My Projects Home</a></li>
   </ul>
   <div id="tabs-home">
      <h3>Welcome to My Projects Home</h3>
      <p><a href="#" onclick="addTab('myActiveProjects', 'My Active Projects', 'RadGrid1')">My Active Projects</a></p>
      <p><a href="#" onclick="addTab('mySalesActivities', 'My Sales Activities', 'RadGrid2')">My Sales Activities</a></p>
   </div>
</div>
<div id="tabs-myActiveProjects" style="display:none;">
<h3>My Active Projects</h3>
 
</div>
<div id="tabs-mySalesActivities" style="display:none;">
<h3>My Sales Activities</h3>
 
</div>

Wiring Up the Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(document).ready(init);
 
function init() {
 
    // tabs init with a custom tab template and an "add" callback filling in the content
    var $tabs = $("#mytabs").tabs({
        tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-test"><img src="images/cross.png" /></span></li>'
    });
 
    // close icon: removing the tab on click
    // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
    $('#mytabs span.ui-test').live('click', function() {
        var index = $('li',$tabs).index($(this).parent());
        $('#mytabs span.ui-test').parent().remove();
        $("#mytabs").tabs('select', 0);
    });
}
 
function addTab(tabID, tabName, grid) 
{
    // double check to see if tab is already open
    if($("a[href^=#tabs-"+ tabID +"]").length > 0)
    {
        $("a[href^=#tabs-"+ tabID +"]").parent().show();
    } else {
        currentTabID = tabID;
 
        // this will add a tab via the standard method
        $("#mytabs").tabs("add","#tabs-" + tabID,tabName);
        $("#tabs-" + tabID).css("display","block");
    }
 
    $("#mytabs").tabs('select', tabID);
}

Finalizing the Styles

1
2
3
4
5
6
7

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="styles/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<style type="text/css">
    #mytabs { margin-top: 1em; }
    #mytabs li .ui-test { float: left; margin: 0.5em 0.4em 0 0; cursor: pointer; }
</style>

Please, please leave a comment if you have any difficulty with this and I’ll do my best to help!

To find out more visit this url: http://party.cuga.ca/Home.aspx

Anyone else planning to go?

I’ll caution everyone that’s it meant to be a guide, and not something we need to live by to the letter. Feedback is most welcome!

Greetings everyone! I am very excited to annouce that I have been selected to speak at the DevTeach conference that will be held here in Vancouver from June 8-12. I spend a great deal of time blogging about working with the Telerik web controls in my SharePoint development, so I figured this would be a good opportunity to share some of the things I’ve learned and to demonstrate how easy it is to integrate these into your projects.

This is a great conference that promises to be the biggest developer, DBA and ITPro conference in Canada. It’s jam-packed with advanced sessions (level 300 and 400) all on the latest versions of Microsoft products and technologies. I encourage you all to at least check it out and see if some of the other sessions or topics might appeal to you.

Hope to see you there!