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 the scrollbar. I want to get rid of this. I would like the propertyGrid to take up whatever height it needs to in order to be fully displayed. My feeling is that its height is being set before the grid is made into a DataGrid, meaning that initially, the row that the dataGrid sits in is no higher than any of the other rows, and the full height of the PropertyGrid is set based on this. When the grid is made into a DataGrid, the height of the PropertyGrid expands but instead of displaying the whole propertyGrid it just adds a scroll bar.

I've played around with the div surrounding the propertyGrid (trying different values for overflow, display, min-height, etc.) but to no avail. PropertyGrid must override these settings.

Please call 'resize' method after the inner datagrid loads data successfully.

Yes, that did the trick! Thanks stworthy.