click event doing weird things to my datagrid nested in propertygrid

[gib65]

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:



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):



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



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?

[stworthy]

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

Code:

$('#pg').propertygrid({
	onBeforeEdit: function(index,row){
		if (index==16){
			return false;
		}
	}
});

[gib65]

Thanks stworthy! Once again, that works.