Project

General

Profile

Support #5123

WTableView Column headers

Added by Nicole King over 5 years ago. Updated about 5 years ago.

Status:
Feedback
Priority:
Normal
Assignee:
Target version:
-
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:

  1. The column headings do not appear using the bootstrap theme.
  2. he rows are not alternating colours - they don't even have different CSS classes.

Files

zz.png (19.8 KB) zz.png Part of screen showing table in context Nicole King, 07/24/2016 06:17 PM
Wtableview_header_problem_1.png (40.1 KB) Wtableview_header_problem_1.png The blank header that takes the place of the text Robin CHARPENTIER, 10/21/2016 04:39 PM
Wtableview_header_problem_2.png (46.2 KB) Wtableview_header_problem_2.png The text is below the blank header and behind the data Robin CHARPENTIER, 10/21/2016 04:39 PM
#1

Updated by Nicole King over 5 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>
#2

Updated by Robin CHARPENTIER about 5 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 ?

#3

Updated by Koen Deforche about 5 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

#4

Updated by Robin CHARPENTIER about 5 years ago

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.

#5

Updated by Robin CHARPENTIER about 5 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.

Also available in: Atom PDF