Print Page - Datagrid show/hide header columns not correcting parent colspan

I have a datagrid table with columns that need to show/hide based on what data the user requests. When I hide the columns that contain the data the user doesn't want, the parent header doesn't update the colspan appropriately.

Here is an example of what I'm trying to do.

Code:

<title>Column Group - jQuery EasyUI Demo</title>
<body>
     <h2>Column Group</h2>

    <p>The header cells can be merged. Useful to group columns under a category.</p>
    <div style="margin:20px 0;"></div>
    <table id="dg" class="easyui-datagrid" title="Column Group" style="width:400px;height:250px" data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',
toolbar:'#tb'">
        <thead>
            <tr>
                <th id="itemTitle" colspan="2">Item Detailssss</th>
                <th colspan="3">Item Details</th>
            </tr>
            <tr>
                <th data-options="field:'itemid'">Item ID</th>
                <th data-options="field:'productid', hidden:true">Product</th>
                <th data-options="field:'unitcost',align:'right'">Unit Cost</th>
                <th data-options="field:'listprice',align:'right'">List Price</th>
                <th data-options="field:'attr1'">Attribute</th>
                <th data-options="field:'status',align:'center'">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>

        </tbody>
    </table>
    <div id='tb'>
        <a href="#" id="showButton" class="easyui-linkbutton" data-options="iconCls:'icon-ok', plain:true" onclick="showHideButton()">Show/Hide Product</a>
    </div>
</body>

Here is my same javascript

Code:

var showProduct = true;
function showHideButton() {
    if (showProduct) {
        alert('show');
        $('#dg').datagrid('showColumn', 'productid');
        $('#itemTitle).attr('colspan ', 3);
        showProduct = false;
    } else {
        alert('hide');
        $('#dg').datagrid('hideColumn', 'productid');
        $('#itemTitle).attr('colspan ', 2);
        showProduct = true;
     }          
}

Here is the fiddle that I've tried but it just isn't working. http://jsfiddle.net/n4ys8rge/9/

I'm using JQuery 1.3.4.
Any help would be appreciated. Thank you.

I've figured it out. The following code will go through the headers and find the text in the parent column. Once found it will set the colspan.

Code:

function setParentColspan(columnText, colSpan) {
	var dg = $('#dg'),
	    dc = dg.data('datagrid').dc,
	    htable = dc.header2.find('.datagrid-htable');

	htable.find('tr.datagrid-header-row:first td').each(function() {
		var innerHtml = $(this).html();
		if (innerHtml.indexOf(columnText) > -1) {
			$(this).attr('colspan', colSpan);
		}
	});
}

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: bduguay on March 09, 2015, 08:42:52 AM