That works perfectly. Not sure why I wasn't able to get it to work before. Will customize this grid and see if I can make it do what I want. Thanks.

TreeGrid doesn't have a mergeCells function.

Hello,

I'm experimenting with a treegrid and I'm noticing that the row height does not adjust to fit objects larger than the default row height. For example, I'm trying to nest a datagrid inside one of the rows in the treegrid, but I only end up seeing the header row of the datagrid.

The image below compares the treegrid with a propertygrid I was experimenting with before. The propertygrid seemed to have no problem accommodating a nested datagrid (i.e. the row height adjusted for the height of the nested datagrid):



Is there a way to get the row containing the datagrid inside the treegrid to adjust to the height of the datagrid?

My bad...

'Children' has upper case 'C' in the last two nodes. Changed to lower case and it was fixed. Didn't catch that.

Hello,

I'm experimenting with treeGrid. I'm wondering if there's a way to merge the cells for the top level nodes.

To go from this:



to this:

Hello,

I'm experimenting with Tree. Here's what it looks like:



Notice that Inherent Causes and Residual Causes have no children. And yet, this is the code:

$('#easyuiTreeList').tree({

            data: [
                {
                    text: 'Safeguards',
                    iconCls: 'icon-save',
                    children: [{
                        text: 'BPCS-CF-AAH-601B...'
                    },
                    {
                        text: 'ROUND - Daily lab rounds'
                    },
                    {
                        text: 'Other - Methanol injection...'
                    },
                    {
                        text: 'BPCS - BL-LAH-019 on 153 and 154...'
                    },
                    {
                        text: 'Other - Field operator deployed...'
                    }]
                },
                {
                    text: 'Recommendations',
                    iconCls: 'icon-add',
                    children: [{
                        text: 'BPCS - CF-AAH-601B...'
                    },
                    {
                        text: 'ROUND - Daily lab rounds.'
                    },
                    {
                        text: 'Other - Methanol injection...'
                    },
                    {
                        text: 'BPCS - BL-LAH-019 on 153 and 154...'
                    }]
                },
                {
                    text: 'Inherent Causes',
                    iconCls: 'icon-remove',
                    Children: [{
                        text: 'Loss of flow from source...'
                    },
                    {
                        text: 'Loss of destination from Sales...'
                    },
                    {
                        text: 'No concerns identified.'
                    }]
                },
                {
                    text: 'Residual Causes',
                    iconCls: 'icon-edit',
                    Children: [{
                        text: 'Loss of flow from source...'
                    },
                    {
                        text: 'Loss of destination from Sales...'
                    },
                    {
                        text: 'No concerns identified.'
                    }]
                }
            ]
        });

Notice that Inherent Causes and Residual Causes DO have children. Why are they not showing up?

Hello,

I'm trying to implement group on my DataGrid but it's not working.

Here's my html:

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

Here's my javascript:

$('#easyuiDataGrid').datagrid({
            columns: [[

      { field: 'label', width: 200 },
                { field: 'value', width: 500, },
                { field: 'rank', width: 100 }
            ]],
       data: [
      { label: '<b>1st Safeguard</b>', value: 'BPCS-CF-AAH-601B...', rank: 3},
                { label: '<b>2nd Safeguard</b>', value: 'ROUND - Daily lab rounds.', rank: 2},
                { label: '<b>1st Safeguard</b>', value: 'Other - Methanol injection...', rank: 1},
                { label: '<b>2nd Safeguard</b>', value: 'BPCS - CF-AAH-601B...', rank: 1 },
                { label: '<b>1st Safeguard</b>', value: 'ROUND - Daily lab rounds.', rank: 2 },
                { label: '<b>2nd Safeguard</b>', value: 'Other - Methanol injection...', rank: 3 },
            ],
            fitColumns: true,
            groupField: 'label',
            view: groupview
        });

If I take out "view: groupview" the grid doesn't group. If I leave it in, the grid doesn't render. I'm not sure what view or groupview is or why it's necessary.

Can anyone see the problem?

Hello,

I can't seem to set the cells in my datagrid to editable. I'm using this as an example:

https://www.jeasyui.com/tutorial/datagrid/datagrid12.php

They say I should be able to do this:

editor: 'text'

Here's how I'm defining my grid:

        $('#ROIDataGrid').datagrid({
            columns: [[

      { field: 'fields', width: 100 },
                { field: 'HAndS', title: 'H&S', width: 100, editor: 'text' }, // <-- making this column editable.
                { field: 'ENV', title: 'ENV', width: 100 },
                { field: 'ECN', title: 'ECN', width: 100 }
            ]],

       data: [

      { fields: '\'You\' project', HAndS: '123.0', ENV: '', ECN: '' },
                { fields: '\'Other\' project', HAndS: '', ENV: '', ECN: '' },
                { fields: 'Colors', HAndS: '<input type="color" value="#FF0000" style="width: 100%;">', ENV: '', ECN: '' }
            ]
        });

Here's what it looks like:



Yet, I can't edit the cell with 123.0 in it. Please advise.

Thanks stworthy! Once again, that works.

Yes, that did the trick! Thanks stworthy.

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?

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 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.

Hello,

Is there a way in the PropertyGrid to hide/show rows?

I'm trying to think of a workaround to the fact that the PropertyGrid doesn't support sub-groups as per my recent question here:

http://www.jeasyui.com/forum/index.php?topic=6740.0

I'm thinking that if I can have certain rows within a group act like headers for a "sub-group" I can just get all rows under them to be hidden until the users clicks on the sub-group header which would trigger a click event which would make all rows under it visible. Another click would hide them again.

Is there a way to hide/show rows?

Perfect! That's exactly what I need.

Hello,

I am experimenting with EasyUI PropertyGrid. Is there a way to get a tooltip on each row. What I'm trying to do is have a way for the user see the full text in the cell. So if the cell displays: "Loss of flow from source...", I want the tooltip when it hovers over that cell to display "Loss of flow from source to the Rundown Butane Storage Vessels group."