AppenGrid MultiRow Header

[falconOfMarsis]

is it possible with appendGrid as the picture

[hkalbertl]

Hi falconOfMarsis,

appendGrid does not have API to customize the column header like that. Alternatively, you can manually add the group header by jQuery after the grid initialized. It will not exactly the same as shown in your picture but very similar to it. For example:

// Create grid
$('#tblAppendGrid').appendGrid(...);
// Add a table to thead
var $groupedRow = $('<tr></tr>').addClass('columnHead').insertBefore('#tblAppendGrid thead tr.columnHead');
// Add cells to the new row
$('<td></td>').addClass('ui-widget-header').appendTo($groupedRow);
$('<td></td>').addClass('ui-widget-header').attr('colspan', 2).text('Author').appendTo($groupedRow);
$('<td></td>').addClass('ui-widget-header').attr('colspan', 3).text('Periods').appendTo($groupedRow);
$('<td></td>').addClass('ui-widget-header').appendTo($groupedRow);
$('<td></td>').addClass('ui-widget-header').appendTo($groupedRow);

Hope it can help :)

[richb201]

Hi Albert. I have a quick question for you. Do you see any problem with using append Grid in an Android app written in javascript with something like react native?

Thanks,

Rich

PS you can view my use of append grid at the chrome extension store under substantiator.

On January 10, 2019, at 10:49, "Albert L." notifications@github.com wrote:

Hi falconOfMarsis,

appendGrid does not have API to customize the column header like that. Alternatively, you can manually add the group header by jQuery after the grid initialized. It will not exactly the same as shown in your picture but very similar to it. For example:

// Create grid $('#tblAppendGrid').appendGrid(...); // Add a table to thead var $groupedRow = $('').addClass('columnHead').insertBefore('#tblAppendGrid thead tr.columnHead'); // Add cells to the new row $('').addClass('ui-widget-header').appendTo($groupedRow); $('').addClass('ui-widget-header').attr('colspan', 2).text('Author').appendTo($groupedRow); $('').addClass('ui-widget-header').attr('colspan', 3).text('Periods').appendTo($groupedRow); $('').addClass('ui-widget-header').appendTo($groupedRow); $('').addClass('ui-widget-header').appendTo($groupedRow);

Hope it can help :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/hkalbertl/jquery.appendGrid","title":"hkalbertl/jquery.appendGrid","subtitle":"GitHub repository","main_image_url":"https://github.githubassets.com/images/email/message_cards/header.png","avatar_image_url":"https://github.githubassets.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/hkalbertl/jquery.appendGrid"}},"updates":{"snippets":[{"icon":"PERSON","message":"@hkalbertl in #125: Hi falconOfMarsis,\r\n\r\nappendGrid does not have API to customize the column header like that.\r\nAlternatively, you can manually add the group header by jQuery after the grid initialized.\r\nIt will not exactly the same as shown in your picture but very similar to it.\r\nFor example:\r\n\r\njavascript\r\n// Create grid\r\n$('#tblAppendGrid').appendGrid(...);\r\n// Add a table to thead\r\nvar $groupedRow = $('\u003ctr\u003e\u003c/tr\u003e').addClass('columnHead').insertBefore('#tblAppendGrid thead tr.columnHead');\r\n// Add cells to the new row\r\n$('\u003ctd\u003e\u003c/td\u003e').addClass('ui-widget-header').appendTo($groupedRow);\r\n$('\u003ctd\u003e\u003c/td\u003e').addClass('ui-widget-header').attr('colspan', 2).text('Author').appendTo($groupedRow);\r\n$('\u003ctd\u003e\u003c/td\u003e').addClass('ui-widget-header').attr('colspan', 3).text('Periods').appendTo($groupedRow);\r\n$('\u003ctd\u003e\u003c/td\u003e').addClass('ui-widget-header').appendTo($groupedRow);\r\n$('\u003ctd\u003e\u003c/td\u003e').addClass('ui-widget-header').appendTo($groupedRow);\r\n\r\n\r\nHope it can help :)"}],"action":{"name":"View Issue","url":"https://github.com/hkalbertl/jquery.appendGrid/issues/125#issuecomment-453144370"}}} [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/hkalbertl/jquery.appendGrid/issues/125#issuecomment-453144370", "url": "https://github.com/hkalbertl/jquery.appendGrid/issues/125#issuecomment-453144370", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } } ]

[hkalbertl]

Hi richb201,

I have not try appendGrid in that way. I guess it should be fine if the framework that you chose can support jQuery and jQuery UI.

Good luck!