First, sorry for the long post. I’m facing an issue using Dthmlx Grid with salesforce. We are creating the grid by first building a standard table and then using dhtmlXGridFromTable to attach the grid. The issue I’m facing is with the checkbox column.
If I set the column header as type=”ch”, it doesn’t matter what element I use in the row, whether I use input type=”checkbox” value=”0” checked=”false” or apex:inputcheckbox value=”false” all checkboxes show up as checked. I’m trying to pass in a variable to determine whether or not the checkbox should show as checked or un-checked on load.
If you look at the code below. It currently has the header type set to “ch” and is using an apex:inputcheckbox to bind the value to {!col.m_bIsSelected}. The controller sets ever other record to selected, but this page will render with all checkboxes checked. If I change the type to “ro” the below code will work. However, if I enable paging, it breaks again as the binding only works for items on the current page. So if I check one item on page one and then one item on page 3, only the item in page 3 is saved as long as I don’t change pages again.
If I remove the apex:inputcheckbox and change the header column type to “ch”, all the checkboxes appear checked and face issues getting the values to the controller.
Does anyone have any advice for working with checkboxes and the Dhtmlx grid?
<apex:page controller="SimpleVFPageController">
<apex:form >
<apex:pageBlock html-class="measureGuidePageBlock" title="testGrid" id="measureProgramSelection">
<apex:pageBlockButtons location="bottom">
<apex:commandButton action="{!testValuesCorrect}" value="test" />
</apex:pageBlockButtons>
<apex:pageBlockSection title="Test Grid" columns="1" html-class="measureGuideColumnHeader" collapsible="false">
<apex:outputText escape="false" value="Test Grid" style="padding-left:0px important!;" />
</apex:pageBlockSection>
<apex:outputPanel layout="none">
<apex:includeScript value="{!URLFOR($Resource.DHTMLxTreeGrid, 'dhtmlx.js')} "/>
<apex:stylesheet value="{!URLFOR($Resource.DHTMLxTreeGrid, 'dhtmlx.css')}" />
<body>
<p>
<div>
<table forceCellTypes="true" id="gridMeasures" name="gridMeasures" onbeforeinit="gridBeforeInit(gridMeasures);" oninit="gridAfterInit(gridMeasures);" style="display:none;" class="gridTable dhtmlxGrid">
<thead>
<tr>
<th align="center" type="ch" id="selectcol" sort="na" >
</th>
<apex:repeat value="{!m_lstHeaderCols}" var="colVal">
<th id="{!colVal.m_strApiName}" sort="{!colVal.m_strColSort}" header="
{!colVal.m_strFilterHeader}" type="{!colVal.m_strColType}" align="{!colVal.m_strColAlign}">
{!colVal.m_strHeaderValue}
</th>
</apex:repeat>
</tr>
</thead>
<tbody>
<apex:repeat value="{!m_lstPrograms}" var="rec">
<tr>
<td checked="false">
<apex:inputCheckbox value="{!rec.m_bIsSelected}" />
</td>
<td class="PMColumnData" width="25%">
{!rec.m_strObjName}
</td>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
</p>
</body>
</apex:outputPanel>
<div id="ProgramsDisplay"></div>
<div id="recInfoArea"></div>
</apex:pageBlock>
<script>
var measureGrid = dhtmlXGridFromTable('gridMeasures');
function gridBeforeInit(grid)
{
grid.enableStableSorting(true);
grid.setImagePath('{!URLFOR($Resource.DHTMLxTreeGrid, "/imgs/")}');
// grid.enablePaging(true, 3, 10, 'ProgramsDisplay',true,'recInfoArea');
}
function gridAfterInit(grid)
{
grid.enableAutoHeight(true, 200);
grid.enableMultiline(true);
grid.setSizes();
grid.changePage(1);
}
</script>
</apex:form>
public with sharing class SimpleVFPageController {
public List<HeaderColWrapper> m_lstHeaderCols {get;set;}
{m_lstHeaderCols = new List<HeaderColWrapper>();}
public List<RowWrapper> m_lstPrograms {get;set;}
{m_lstPrograms = new List<RowWrapper>();}
public SimpleVFPageController() {
HeaderColWrapper wrap = new HeaderColWrapper();
wrap.m_strHeaderValue = 'Program Name';
wrap.m_strAPIName = 'Name';
wrap.m_strWidth = '22%';
wrap.m_strColAlign = 'left';
wrap.m_strColType = 'ro';
wrap.m_strColSort = 'str';
wrap.m_strFilterHeader = '#text_filter';
m_lstHeaderCols.add(wrap);
for(integer i=0; i< 11; i++)
{
RowWrapper rw = new RowWrapper();
rw.m_strObjName = 'Obj' + i;
rw.m_bIsSelected = math.mod(i,2) == 0 ? true:false;
m_lstPrograms.add(rw);
}
}
public void testValuesCorrect()
{
for(RowWrapper rw: m_lstPrograms)
{
System.Debug('rw: ' + rw.m_strObjName + ' : ' + rw.m_bIsSelected);
}
}
public class HeaderColWrapper
{
public String m_strHeaderValue {get;set;}
public String m_strColSort {get;set;}
public String m_strColType {get;set;}
public String m_strColAlign {get;set;}
public String m_strFilterHeader {get;set;}
public String m_strWidth {get;set;}
public String m_strAPIName {get;set;}
}
public class RowWrapper
{
public Boolean m_bIsSelected {get; set;}
public String m_strObjName {get;set;}
}
}