Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
wiki:groupingheadar [2011/10/11 14:28] tony |
wiki:groupingheadar [2011/10/11 14:47] tony |
||
|---|---|---|---|
| Line 24: | Line 24: | ||
| - | ====== Using Headergrouping ====== | + | ====== Using Header Grouping ====== |
| - | Header grouping should be used after the grid is created. For this purpose we have created a method which is called **setGroupHeaders**. \\ | + | Grouping of the header should be used after the grid is created. For this purpose we have created a method which is called **setGroupHeaders**. \\ |
| One typical implementation can look like this | One typical implementation can look like this | ||
| Line 64: | Line 64: | ||
| === setGroupHeaders options === | === setGroupHeaders options === | ||
| - | The setGroupHeader method has the following options | + | The method creates the group of headers in the grid. If the method is called, after the creation of the grouping header we store the group headers options as grid parameter. This grid parameters is called **groupHeader** and can be requested with getGridParam method after it is run and there destroyGroupHeader is not called (see below). \\ \\ |
| + | The setGroupHeader method has the following options\\ | ||
| ^Property^Type^Description^Default^ | ^Property^Type^Description^Default^ | ||
| |useColSpanStyle|boolean| Determine if the non grouping header cell should be have cell above it - falue of false or the column should be treated as one combining boot - true| false| | |useColSpanStyle|boolean| Determine if the non grouping header cell should be have cell above it - falue of false or the column should be treated as one combining boot - true| false| | ||
| |groupHeaders|array| A set of object(s) which describes the header grouping texts and rules. Bellow is the list of the options of every element of this array| empty| | |groupHeaders|array| A set of object(s) which describes the header grouping texts and rules. Bellow is the list of the options of every element of this array| empty| | ||
| + | |||
| + | == groupHeaders element options: == | ||
| + | |||
| + | ^Property^Type^Description^ | ||
| + | |startColumnName| string| The name from colModel from which the grouping header begin, including the same field| | ||
| + | |numberOfColumns|integer| The number of columns which are included for this group. Note that the number start from the startColumnName. If the column is hidden it is skipped and as result the group does not contain the field, but the method count it.| | ||
| + | |titleText| string| The text for this group. The text can contain html tags| | ||
| + | |||
| + | |||
| + | Using the previous example if we change the **useColSpanStyle** to true we will obtain the following picture: | ||
| + | |||
| + | <code javascript> | ||
| + | ... | ||
| + | jQuery("#grid").jqGrid('setGroupHeaders', { | ||
| + | useColSpanStyle: true, | ||
| + | groupHeaders:[ | ||
| + | {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'}, | ||
| + | {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'} | ||
| + | ] | ||
| + | }); | ||
| + | ... | ||
| + | </code> | ||
| + | {{:wiki:grouping3.png|}} | ||
| + | |||
