jqGrid, setRowData and GridComplete

On September 15, 2010, in Web Design, by shereen

I had such a hard time getting this to work, it most definitely deserved a blog post. Hopefully others can make sense of this by reading this post.

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

2 Comments
Leave A Response

Tagged with:  

SharePoint 2010 Schema.xml, Onet.xml and Toolbar Type

On September 1, 2010, in SharePoint 2010, by shereen

I’ve been working pretty heavily the last couple weeks with List Definitions, List Instances and Site Definitions in SharePoint 2010. I’m documenting my process because I was hard pressed to find a solid example of this on the web. I’m mostly concerned with documenting the areas that I found difficult, like the View definition in the Schema.xml and the changes to the Onet.xml Modules element in 2010. What I won’t cover is how to use Visual Studio 2010 to create a new Site Definition project, and add List Definitions to it. Perhaps in another post I’ll try to outline the whole process in more detail.

Let me setup the scenario:

1. I am using Visual Studio 2010 to build a Site Definition that will contain a List Definition and an instance of that List.
2. I want the instance of the List that I create to show up on the default.aspx page of my site automatically when I provision a site using this definition.
3. Finally, I want to display a full toolbar so users can add items directly from the default.aspx page.

Schema.xml

<View BaseViewID="50" Type="HTML" MobileView="TRUE" MobileDefaultView="TRUE" ImageUrl="/_layouts/images/generic.png" WebPartZoneID="Main" WebPartOrder="1" Url="Forms/Last Modified.aspx" SetupPath="pages\viewpage.aspx">
        <Toolbar Type="None" />
        <XslLink>main.xsl</XslLink>
        <Query>
          <OrderBy>
            <FieldRef Name="Modified" Ascending="False"/>
          </OrderBy>
        </Query>
        <ViewFields>
          <FieldRef Name="DocIcon"></FieldRef>
          <FieldRef Name="LinkFilename"></FieldRef>
          <FieldRef Name="_UIVersionString"></FieldRef>
          <FieldRef Name="Editor"></FieldRef>
          <FieldRef Name="Status"></FieldRef>
          <FieldRef Name="Category"></FieldRef>
        </ViewFields>
        <RowLimit Paged="FALSE">5</RowLimit>
        <Aggregations Value="Off" />
</View>

So some things to note in the above.

  1. The Toolbar Type attribute caused a bit of confusion for me because the schema complains that it’s invalid if I set it to a value of None. It works for me anyway. There is a ton of information on the web that describes what these values are allowed to be. I find the following article from MS documents the options well:
    • Standard —The most common type of toolbar, which is used, for example, in the All Items views for most lists, and which corresponds to Full Toolbar in the Web Part tool pane.
    • FreeForm —Used in Default.aspx and Web Part Pages and corresponds to Summary Toolbar in the Web Part tool pane.
    • None —No toolbar is used in the view, corresponding to No Toolbar in the Web Part tool pane.
  2. When adding elements to this xml file, ensure that the Name you specify is the Internal name of that field, not the display name. For things like Version, I was assuming the internal name was Version when it fact it was _UIVersionString or _UIVersion. I haven’t found a neat way to discover these internal names for system or hidden fields, but if I do, I’ll update this post.
  3. Make sure you add a SetupPath tag that points to “pages\viewpage.aspx” so it knows where to go to generate your view.
  4. Finally, be really careful not to set the DefaultView property on more than one View element. I find by doing that, it creates a completely separate list, instead of a view within the current list.

Onet.xml

Ok so when we’re ready to add our List Definition to the Onet.xml, a few things slowed me down that I want to point out here. I’m going to show two ways that you would add a list/view to the default.aspx page:

<View List="Project Documents" BaseViewID="1" WebPartZoneID="Right" WebPartOrder="1" />

The above code references a List Definition I have already created called Project Documents, I’m looking for the BaseViewID of 1 (this should be defined in the Schema.xml) and I’m specifying where to position my web part. This technique works really well for me, except, I am not able to set things like the Title of the web part or it’s Chrome.

So I could have done the following:

<View List="Project Documents" Name="Last Modified Project Documents" DisplayName="Last Modified Project Documents" BaseViewID="50" WebPartZoneID="Right" WebPartOrder="2">
          <![CDATA[
              <webParts>
                  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
                      <metaData>
                          <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" />
                          <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
                      </metaData>
                      <data>
                          <properties>
                              <property name="Title">Last Modified Project Documents</property>
                              <property name="AllowConnect" type="bool">True</property>
                              <property name="AllowClose" type="bool">False</property>
                          </properties>
                      </data>
                  </webPart>
              </webParts>
          ]]>
</View>

The above now let’s me set things like Title and Chrome.

Lastly, be sure NOT TO DO THIS in SharePoint 2010:

<View List="Project Documents" BaseViewID="50" DisplayName="Last Modified Project Documents" Name="Last Modified Project Documents" RecurrenceRowset="TRUE" WebPartZoneID="Right" WebPartOrder="2">
  <![CDATA[
             <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">
                  <Assembly>Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
                  <TypeName>Microsoft.SharePoint.WebPartPages.ListViewWebPart</TypeName>
                  <Title>Last Modified Project Documents</Title>
             </WebPart>
      ]]>
</View>

The above will work fine in SharePoint 2010, but there will be some inconsistency and it won’t behave quite right. If you edit the web part, you’ll notice it’s missing a few of the options that the 2010 ones do.

2 Comments
Leave A Response