Actions
Support #5123
openWTableView 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
Updated by Nicole King over 7 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>
Updated by Robin CHARPENTIER over 7 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 ?
Updated by Koen Deforche over 7 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
Actions
#4
Updated by Robin CHARPENTIER over 7 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.
Updated by Robin CHARPENTIER over 7 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