Accessing Record Components in a ListGrid

[ls3674]

SmartClient Version: v8.2p_2012-04-26/PowerEdition Deployment (built 2012-04-26)

I have a ListGrid with a custom component of a form with three controls. When an update occurs, the new record is pushed to the datasource cache, and the ListGrid component is redrawn.

When this redraw occurs, the state of the checkbox and the colorpicker in the ListGridField are lost. These fields are not part of the datasource. They are meant for manipulating information that is only relevant on the client, and need not be persisted.

I started to search for a way to traverse the components in the the listgrid, but I couldn't seem to find anything in the documentation that was made for such a thing (basically a for in loop that would allow me to access ListGridFields and their children, e.g. checkboxitem and reset its state).

It appeared that using the recordPoolingMode of RECYCLE might help me accomplish this. However, when implementing that setting, strange behavior occurs in the ListGrid fields. Sometimes the checkboxitem is checked and sometimes it is not.

What would you recommend doing to either keep state even through an update/redraw or traverse the ListGridFields and get access to their children so that I can set the sate of those items? The second option is more preferable, if possible, because it will assist for similar use cases in the application.

@Override
    protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum)
    {
        String fieldName = this.getFieldName(colNum);
        String creator = record.getAttribute("creatorName");
        setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);

        if(fieldName.equals("viewField"))
        {
            HLayout recordCanvas = new HLayout();
            recordCanvas.setWidth100();
            recordCanvas.setHeight(22);
            recordCanvas.setAlign(Alignment.CENTER);

            DynamicForm dfOptions = new DynamicForm();
            dfOptions.setWidth("80%");
            dfOptions.setHeight(22);
            dfOptions.setNumCols(8);

            ButtonItem biDelete = new ButtonItem();
            biDelete.setWidth(22);
            biDelete.setHeight(22);
            biDelete.setColSpan(2);
            biDelete.setIcon("[SKIN]/actions/remove.png");
            biDelete.setEndRow(false);
            biDelete.setStartRow(false);
            if(!GSUI.getUserInfo().getPrincipal().equals(record.getAttributeAsString("creatorName")))
            {
                biDelete.setDisabled(true);
            }
            else
            {
                biDelete.addClickHandler(new com.smartgwt.client.widgets.form.fields.events.ClickHandler()
                {
                    @Override
                    public void onClick(com.smartgwt.client.widgets.form.fields.events.ClickEvent clickEvent)
                    {
                        if(listener != null)
                        {
                            listener.onDeleteStream(record.getAttributeAsInt("id"));
                        }
                    }
                });
            }

            CheckboxItem cbiShow = new CheckboxItem();
            cbiShow.setTitle("");
            cbiShow.setWidth(22);
            cbiShow.setHeight(22);
            cbiShow.setColSpan(2);
            cbiShow.setEndRow(false);
            cbiShow.setStartRow(false);
            cbiShow.addChangedHandler(new ChangedHandler()
            {
                @Override
                public void onChanged(ChangedEvent changedEvent)
                {
                    if(listener != null)
                    {
                        CheckboxItem cbi = (CheckboxItem) changedEvent.getSource();
                        listener.onDisplayCheckChange(cbi.getValueAsBoolean(), record);
                    }
                }
            });

            ColorPickerItem cpiRectangleColor = new ColorPickerItem();
            cpiRectangleColor.setTitle("");
            cpiRectangleColor.setWidth(22);
            cpiRectangleColor.setHeight(22);
            cpiRectangleColor.setColSpan(2);
            cpiRectangleColor.setTextBoxStyle("");
            cpiRectangleColor.setEndRow(false);
            cpiRectangleColor.setStartRow(false);
            cpiRectangleColor.addChangedHandler(new ChangedHandler()
            {
                @Override
                public void onChanged(ChangedEvent changedEvent)
                {
                    ColorPickerItem cpi = (ColorPickerItem) changedEvent.getSource();
                    int id           = record.getAttributeAsInt("id");
                    String hex       = RegexHelper.stripNonAlphaNumericChars(cpi.getValueAsString());
                    long fillColor   = Integer.valueOf(hex,16).intValue() * 256 + 127;  //convert to rgba with .5 opacity
                    long borderColor = Integer.valueOf("000000",16).intValue() * 256 + 255; //rgb black
                    int borderWidth  = 2;
                    listener.onRectangleColorSwatchChanged(id,fillColor,borderColor,borderWidth);
                }
            });

            dfOptions.setItems(cbiShow, cpiRectangleColor, biDelete);
            
            recordCanvas.addMember(dfOptions);
            return recordCanvas;
        }
        else
        {
            return null;
        }
    }

[Isomorphic]

See the docs for RECYCLE mode - if you aren't updating the component properly when updateRecordComponent is called, strange behavior would occur.

As far as accessing recordComponents, you can keep track of them in a simple Map keyed by the rowNum - just update it whenever you return a recordComponent from createRecordComponent or updateRecordComponent.