Actions
Support #5123
open
NK
KD
WTableView Column headers
Support #5123:
WTableView Column headers
Start date:
07/24/2016
Due date:
% Done:
0%
Estimated time:
Description
I've been having enormous trouble with table views and models. I cribbed some code from the widget gallery pie chart example, and modified it slightly.
With this class
class ShowRoles: public Wt::WContainerWidget {
public:
ShowRoles(Wt::WContainerWidget *parent);
private:
void onLayoutChanged();
private:
Wt::WTableView *view_;
Wt::WStandardItemModel *model_;
};
and this function
static constexpr int const NAME_COLUMN__ = 0;
static constexpr int const TYPE_COLUMN__ = 1;
static constexpr int const CRITICAL_COLUMN__ = 2;
static constexpr int const COLUMN_COUNT__ = 3;
static constexpr int const VALUE_DATA_ROLE__ = Wt::ItemDataRole::UserRole;
ShowRoles::ShowRoles(Wt::WContainerWidget *parent) :
Wt::WContainerWidget(parent), view_(new Wt::WTableView(this)), model_(new Wt::WStandardItemModel) {
std::list<Role*> roles = DbSession::instance()->load<Role>();
CHECK(model_->insertColumns(model_->columnCount(), COLUMN_COUNT__));
model_->setHeaderData(NAME_COLUMN__, _("Name", "credentials"));
model_->setHeaderData(TYPE_COLUMN__, _("Type", "credentials"));
model_->setHeaderData(CRITICAL_COLUMN__, _("Critical", "credentials"));
CHECK(model_->insertRows(model_->rowCount(), static_cast<int>(roles.size())));
int row = 0;
for (Role const *role : roles) {
CHECK(model_->setData(row, NAME_COLUMN__, role->get_name(), Wt::ItemDataRole::DisplayRole));
CHECK(model_->setData(row, TYPE_COLUMN__, SmartEnumTraits<RoleType>::toString(role->get_type()), Wt::ItemDataRole::DisplayRole));
CHECK(model_->setData(row, CRITICAL_COLUMN__, std::to_string(role->get_critical()), Wt::ItemDataRole::DisplayRole));
row++;
}
view_->setSelectionMode(Wt::NoSelection);
view_->setAlternatingRowColors(true);
view_->setModel(model_);
view_->setHeaderHeight(28);
}
CHECK is a macro that asserts the argument. SmartEnumTraits is a template class that provides introspection to enums.
The problems I have are:
- The column headings do not appear using the bootstrap theme.
- he rows are not alternating colours - they don't even have different CSS classes.
Files
NK Updated by Nicole King about 10 years ago
Here is the generated HTML captured from Firebug
<div id="oefutas" style="box-sizing: border-box; position: absolute; width: 1008px; left: 205px; height: 573px; top: 112px;">
<div id="oefut5e">
<div id="oefut5c" class="Wt-itemview Wt-tableview unselectable" style="position: relative; min-width: 0px; min-height: 0px; height: 261px;" unselectable="on" onselectstart="return false;">
<div id="oefut4q" style="position:absolute;left:0;right:0;">
<div id="oefut4y" class="Wt-header Wt-headerdiv headerrh tcontainer" style="display: none; box-sizing: border-box; position: absolute; left: 0px; top: 0px;"></div>
<div id="oefut51" class="Wt-header headerrh tcontainer" style="overflow: hidden; box-sizing: border-box; position: absolute; width: 1008px; left: 0px; top: 0px; margin-right: 0px;">
<div id="oefut54" class="Wt-headerdiv headerrh" style="width:471.0px;">
<div id="oefut4a" class="Wt-tv-c1 Wt-tv-c headerrh" style="float:left;width:151.0px;">
<div id="oefut4b" class="Wt-tv-rh Wt-tv-br headerrh" style="margin-top:0.0px;margin-right:0.0px;margin-bottom:0.0px;margin-left:0.0px;" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}{var f=function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').resizeHandleMDown(obj, event);};f(o,e);}"></div>
<div id="oefut49" style="text-align:left;overflow-x:hidden;overflow-y:hidden;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.update(o,'s106',e,true);" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.saveDownPos(event);Wt3_3_5.capture(this);Wt._p_.update(o,'s105',e,true);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}if(Wt3_3_5.isDblClick(o, e)) {Wt._p_.update(o,'s107',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;Wt._p_.update(o,'s104',e,true);},200);}">
<div id="contents_oefut4e" style="margin-top:0.0px;margin-right:0.0px;margin-bottom:0.0px;margin-left:0.0px;">
</div>
</div>
<div id="oefut44" class="Wt-tv-c2 Wt-tv-c headerrh" style="float:left;width:151.0px;">
<div id="oefut45" class="Wt-tv-rh Wt-tv-br headerrh" style="margin-top:0.0px;margin-right:0.0px;margin-bottom:0.0px;margin-left:0.0px;" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}{var f=function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').resizeHandleMDown(obj, event);};f(o,e);}"></div>
<div id="oefut43" style="text-align:left;overflow-x:hidden;overflow-y:hidden;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.update(o,'s10f',e,true);" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.saveDownPos(event);Wt3_3_5.capture(this);Wt._p_.update(o,'s10e',e,true);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}if(Wt3_3_5.isDblClick(o, e)) {Wt._p_.update(o,'s110',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;Wt._p_.update(o,'s10d',e,true);},200);}">
<div id="contents_oefut48" style="margin-top:0.0px;margin-right:0.0px;margin-bottom:0.0px;margin-left:0.0px;">
<div id="sort_oefut47" class="Wt-tv-sh Wt-tv-sh-none"></div>
<div id="t_oefut46" class="Wt-label">Type</div>
</div>
</div>
</div>
<div id="oefut3y" class="Wt-tv-c3 Wt-tv-c headerrh" style="float:left;width:151.0px;">
<div id="oefut3z" class="Wt-tv-rh Wt-tv-br headerrh" style="margin-top:0.0px;margin-right:0.0px;margin-bottom:0.0px;margin-left:0.0px;" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}{var f=function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').resizeHandleMDown(obj, event);};f(o,e);}"></div>
<div id="oefut3x" style="text-align:left;overflow-x:hidden;overflow-y:hidden;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.update(o,'s118',e,true);" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.saveDownPos(event);Wt3_3_5.capture(this);Wt._p_.update(o,'s117',e,true);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}if(Wt3_3_5.isDblClick(o, e)) {Wt._p_.update(o,'s119',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;Wt._p_.update(o,'s116',e,true);},200);}">
<div id="contents_oefut42" style="margin-top:0.0px;margin-right:0.0px;margin-bottom:0.0px;margin-left:0.0px;">
</div>
</div>
</div>
</div>
<div id="oefut4v" class="tcontainer" style="position: absolute; overflow: hidden; display: none; box-sizing: border-box; left: 0px; top: 1px; margin-bottom: 0px;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.update(o,'sf6',e,true);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}if(Wt3_3_5.isDblClick(o, e)) {Wt._p_.update(o,'sfe',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;Wt._p_.update(o,'sf5',e,true);},200);}">
<div id="oefut4w" style="position:relative;width:0.0px;height:260.0px;line-height:20.0px;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.update(o,'sf4',e,true);" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.saveDownPos(event);Wt3_3_5.capture(this);Wt._p_.update(o,'sf3',e,true);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}if(Wt3_3_5.isDblClick(o, e)) {Wt3_3_5.cancelEvent(e,0x1);Wt._p_.update(o,'sfc',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;Wt._p_.update(o,'sf2',e,true);},200);}">
<div id="oefut4x" class="Wt-tv-contents" style="position:absolute;width:0.0px;height:260.0px;left:auto;right:auto;top:0.0px;bottom:auto;background-image:url("/resources/themes/bootstrap/stripes/stripe-20px.gif");"></div>
</div>
</div>
<div id="oefut4z" class="tcontainer" style="position: absolute; overflow: auto; box-sizing: border-box; width: 1008px; left: 0px; top: 1px;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.update(o,'sef',e,true);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}if(Wt3_3_5.isDblClick(o, e)) {Wt._p_.update(o,'sfd',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;Wt._p_.update(o,'see',e,true);},200);}" onscroll="var e=event||window.event,o=this;(function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').onContentsContainerScroll(obj, event);})(o,e);">
<div id="oefut50" class="Wt-spacer" style="position:relative;width:471.0px;height:260.0px;line-height:20.0px;" onmouseup="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}(function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').mouseUp(obj, event);})(o,e);Wt3_3_5.cancelEvent(e,0x1);Wt._p_.update(o,'sed',e,true);" onmousedown="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt._p_.saveDownPos(event);Wt3_3_5.capture(this);(function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').mouseDown(obj, event);})(o,e);Wt3_3_5.cancelEvent(e,0x1);Wt._p_.update(o,'sec',e,true);" onkeydown="var e=event||window.event,o=this;(function(obj, event) {jQuery.data(Wt3_3_5.$('oefut5c'), 'obj').onkeydown(obj, event);})(o,e);" onclick="var e=event||window.event,o=this;if($(o).hasClass('Wt-disabled')){Wt3_3_5.cancelEvent(e);return;}Wt3_3_5.cancelEvent(e,0x1);if(Wt3_3_5.isDblClick(o, e)) {Wt3_3_5.cancelEvent(e,0x1);Wt._p_.update(o,'sfb',e,true);}else{if (Wt3_3_5.isIElt9 && document.createEventObject) e = document.createEventObject(e);o.wtE1 = e;o.wtClickTimeout = setTimeout(function() {o.wtClickTimeout = null; o.wtE1 = null;(function(o, e) { $(document).trigger('click', e);})(o,e);Wt3_3_5.cancelEvent(e,0x1);Wt._p_.update(o,'seb',e,true);},200);}">
<div id="oefut53" class="Wt-tv-contents" style="position:absolute;width:471.0px;height:260.0px;left:0.0px;right:auto;top:0.0px;bottom:auto;background-image:url("/resources/themes/bootstrap/stripes/stripe-20px.gif");">
<div id="oefut3j" class="Wt-tv-c1" style="position:absolute;width:157.0px;height:260.0px;left:0.0px;right:auto;top:0.0px;bottom:auto;overflow-x:hidden;overflow-y:hidden;">
<div id="t_oefut3w" class="Wt-tv-c" style="height:20.0px;">admin</div>
<div id="t_oefut3v" class="Wt-tv-c" style="height:20.0px;">deleteschedule</div>
<div id="t_oefut3u" class="Wt-tv-c" style="height:20.0px;">createschedule</div>
<div id="t_oefut3t" class="Wt-tv-c" style="height:20.0px;">updateschedule</div>
<div id="t_oefut3s" class="Wt-tv-c" style="height:20.0px;">deleteclient</div>
<div id="t_oefut3r" class="Wt-tv-c" style="height:20.0px;">createclient</div>
<div id="t_oefut3q" class="Wt-tv-c" style="height:20.0px;">updateclient</div>
<div id="t_oefut3p" class="Wt-tv-c" style="height:20.0px;">deletecarer</div>
<div id="t_oefut3o" class="Wt-tv-c" style="height:20.0px;">createcarer</div>
<div id="t_oefut3n" class="Wt-tv-c" style="height:20.0px;">updatecarer</div>
<div id="t_oefut3m" class="Wt-tv-c" style="height:20.0px;">deletefunder</div>
<div id="t_oefut3l" class="Wt-tv-c" style="height:20.0px;">createfunder</div>
<div id="t_oefut3k" class="Wt-tv-c" style="height:20.0px;">updatefunder</div>
</div>
<div id="oefut35" class="Wt-tv-c2" style="position:absolute;width:157.0px;height:260.0px;left:157.0px;right:auto;top:0.0px;bottom:auto;overflow-x:hidden;overflow-y:hidden;">
<div id="t_oefut3i" class="Wt-tv-c" style="height:20.0px;">admin</div>
<div id="t_oefut3h" class="Wt-tv-c" style="height:20.0px;">deleteschedule</div>
<div id="t_oefut3g" class="Wt-tv-c" style="height:20.0px;">createschedule</div>
<div id="t_oefut3f" class="Wt-tv-c" style="height:20.0px;">updateschedule</div>
<div id="t_oefut3e" class="Wt-tv-c" style="height:20.0px;">deleteclient</div>
<div id="t_oefut3d" class="Wt-tv-c" style="height:20.0px;">createclient</div>
<div id="t_oefut3c" class="Wt-tv-c" style="height:20.0px;">updateclient</div>
<div id="t_oefut3b" class="Wt-tv-c" style="height:20.0px;">deletecarer</div>
<div id="t_oefut3a" class="Wt-tv-c" style="height:20.0px;">createcarer</div>
<div id="t_oefut39" class="Wt-tv-c" style="height:20.0px;">updatecarer</div>
<div id="t_oefut38" class="Wt-tv-c" style="height:20.0px;">deletefunder</div>
<div id="t_oefut37" class="Wt-tv-c" style="height:20.0px;">createfunder</div>
<div id="t_oefut36" class="Wt-tv-c" style="height:20.0px;">updatefunder</div>
</div>
<div id="oefut2r" class="Wt-tv-c3" style="position:absolute;width:157.0px;height:260.0px;left:314.0px;right:auto;top:0.0px;bottom:auto;overflow-x:hidden;overflow-y:hidden;">
<div id="t_oefut34" class="Wt-tv-c" style="height:20.0px;">Yes</div>
<div id="t_oefut33" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut32" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut31" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut30" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2z" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2y" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2x" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2w" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2v" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2u" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2t" class="Wt-tv-c" style="height:20.0px;">No</div>
<div id="t_oefut2s" class="Wt-tv-c" style="height:20.0px;">No</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
RC Updated by Robin CHARPENTIER almost 10 years ago
Hi,
I have the same problem. I found that the problem came from a div that take the place of the header.
In your file, it's the line 15 :
(But i don't know why there's only "Type" in your file and not "Name" and "Critical")
Is there a solution for this problem ?
KD Updated by Koen Deforche almost 10 years ago
- Status changed from New to Feedback
- Assignee set to Koen Deforche
Hey,
The original problem seems to me a missing 'resources' directory or not correclty configured theme?
Your problem might not be the same, can you share more details on what you're observing?
Koen
RC Updated by Robin CHARPENTIER almost 10 years ago
- File Wtableview_header_problem_1.png Wtableview_header_problem_1.png added
- File Wtableview_header_problem_2.png Wtableview_header_problem_2.png added
Hi,
I don't think my problem is with the resources directory, I have this on command argument : ---docroot .;/favicon.ico,/resources,/style,/res ---http-address localhost ---http-port 8080
And I have no error message on the console.
My code to create the WTableView :
Journal::Journal(Wt::WContainerWidget *parent) : WContainerWidget(parent)
{
Wt::Dbo::Session& session = MyApp::instance()->session;
{
Wt::Dbo::QueryModel<Wt::Dbo::ptr<JournalEntry> > *query = new Wt::Dbo::QueryModel<Wt::Dbo::ptr<JournalEntry> >();
query->setQuery(session.find<JournalEntry>().orderBy("numero_chrono DESC").limit(10));
query->addAllFieldsAsColumns();
Wt::WTableView *wtv = new Wt::WTableView(this);
wtv->setModel(query);
wtv->setRowHeight(30);
}
}
Datas are print but not headers. When I delete the node of the blank header, the text takes the place where it should be. I try to modify multiple options of the WTableView without success. The two headers cells take headerHeight for height.
RC Updated by Robin CHARPENTIER almost 10 years ago
Hi,
I found the problem. I am just an idiot, that's why.
It's because I didn't copy the files on my project directory.
Thanks for your help.
Actions