EasyUI Forum

Hello,

I'm experimenting with adding a DataGrid into a PropertyGrid. Here's my HTML:

<div>

   <table id="easyuiPropertyGrid" style="width: 800px;"></table>

</div>

And here's my Javascript:

$('#easyuiPropertyGrid').propertygrid({
            showGroup: true,
            showHeader: false,
            columns: [[
                { "field": "name", "width": 200 },
                { "field": "value", "width": 500 },
                { "field": "position", "width": 100, "editor": {"type": "text" } }
            ]],
            onSelect: function(rowIndex, rowData)
            {
                alert(rowIndex + ": " + rowData);
            }
        });



var data = {
            "total": 22,
            "rows": [
                { "name": "<b>1st Safeguard</b>", "value": "<div class='title' title='BPCS - CF-AAH-601B (online product analyzer) alarm with operator action.'>BPCS - CF-AAH-601B...</div>", "position": "300", "group": "Safeguards" },
                { "name": "<b>2nd Safeguard</b>", "value": "ROUND - Daily lab rounds.", "group": "Safeguards" },
                { "name": "<b>3rd Safeguard</b>", "value": "Other - Methanol injection...", "group": "Safeguards", "editor": {"type": "text"} },
                { "name": "", "value": "BPCS - BL-LAH-019 on 153 and 154...", "group": "Safeguards" },
                { "name": "", "value": "Other - Field operator deployed...", "group": "Safeguards" },
                { "name": "<b>1st Rec</b>", "value": "BPCS - CF-AAH-601B...", "group": "Recommendations" },
                { "name": "<b>2nd Rec</b>", "value": "ROUND - Daily lab rounds.", "group": "Recommendations" },
                { "name": "<b>3rd Rec</b>", "value": "Other - Methanol injection...", "group": "Recommendations" },
                { "name": "", "value": "BPCS - BL-LAH-019 on 153 and 154...", "group": "Recommendations" },
                { "name": "<b>1st Cause</b>", "value": "Loss of flow from source...", "group": "Inherent Cause" },
                { "name": "<b>2nd Cause</b>", "value": "Loss of destination from Sales...", "group": "Inherent Cause" },
                { "name": "<b>3rd Cause</b>", "value": "No concerns identified.", "group": "Inherent Cause" },
                { "name": "<b>1st Cause</b>", "value": "Loss of flow from source...", "group": "Residual Cause" },
                { "name": "<b>2nd Cause</b>", "value": "Loss of destination from Sales...", "group": "Residual Cause" },
                { "name": "<b>3rd Cause</b>", "value": "No concerns identified.", "group": "Residual Cause" },
                { "name": "<b>Return on Investment</b>", "value": "", "group": "Metrics" },
                { "name": "<table id='ROIDataGrid' style='width: 402px;'></table>", "value": "", "group": "Metrics" },
                { "name": "<b>Equipment Threats</b>", "value": "", "group": "Metrics" },
                { "name": "<b>Human Threats</b>", "value": "", "group": "Metrics" },
                { "name": "<b>Reliance on Recommendations</b>", "value": "", "group": "Metrics" },
                { "name": "<b>Reliance on Personnel</b>", "value": "", "group": "Metrics" },
                { "name": "<b>Inherent High Risk</b>", "value": "", "group": "Metrics" },
            ]
        };


        $('#easyuiPropertyGrid').propertygrid('loadData', data);


        // Return on Investment header
        $('#easyuiPropertyGrid').propertygrid('mergeCells', {
            index: 15,
            field: 'name',
            colspan: 3
        });



// Return on Investment DataGrid

$('#easyuiPropertyGrid').propertygrid('mergeCells', {
            index: 16,
            field: 'name',
            colspan: 3
        });

$('#ROIDataGrid').datagrid({
            columns: [[
      { field: 'fields', width: 100 },
                { field: 'HAndS', title: 'H&S', width: 100 },
                { field: 'ENV', title: 'ENV', width: 100 },
                { field: 'ECN', title: 'ECN', width: 100 }
            ]],
      data: [
      { fields: '\'You\' project', HAndS: '', ENV: '', ECN: '' },
                { fields: '\'Other\' project', HAndS: '', ENV: '', ECN: '' },
                { fields: 'Colors', HAndS: '<input type="color" value="#FF0000" style="width: 100%;">', ENV: '', ECN: '' }
            ]
   });

Here's the end result:

(http://www.shahspace.com/acm/json viewer harness testing/datagrid in propertygrid causing scrollbar.png)

Notice that I have a click event on the PropertyGrid:

            onSelect: function(rowIndex, rowData)
            {
                alert(rowIndex + ": " + rowData);
            }

This is resulting in some weird behavior with my nested DataGrid.

When I click on the row with the DataGrid, the row becomes highlighted and the entire PropertyGrid is displayed (i.e. no more scrollbar):

(http://www.shahspace.com/acm/json viewer harness testing/datagrid in propertygrid first click.png)

I can live with this. The real issue is what happens when I click on it again:

(http://www.shahspace.com/acm/json viewer harness testing/datagrid in propertygrid second click.png)

As you can see, the grid disappears, leaving just a normal sized empty row (and the column span is undone--it now consists of three columns just like all the other rows.

I'm guess that after a mouse click event, the propertyGrid is re-initialized and re-rendered, only this time it doesn't run the initialization code that I explicitely wrote (i.e. so it doesn't convert the DataGrid into an actual DataGrid). But then why doesn't it do this for the first mouse click, only for the second?

There's also this oddity: the mouse click event responds on the DataGrid headers but not the body. Why is this?

You can prevent from editing the special row in the propertygrid.

Thanks stworthy! Once again, that works.