I have an MVC project that implements a database-driven questionnaire
for legal contracts using Kendo MVC for ASP.NET version 2016.2.714. I am
running into an odd rendering problem with the Tab Strip when I mix
programmatic tab selection with manual tab selection.
The questionnaire is arranged into sections, sub-sections,
and questions with answers. The user is expected to read a contract presented
on the page and answer all of the “required” questions. Because there are about
100 questions on this thing (lawyers!), we allow the user to save a
partially-entered questionnaire and return to it later. Because there are so
many questions, there is a lot of vertical scrolling going on.
My page uses a vertically-arranged Kendo Splitter to separate
the questionnaire from the contract document. Inside the Splitter, a Kendo Tab
Strip organizes the questionnaire’s sections, which contain varying numbers of
questions. Many partial views are used to render the questionnaire’s overall structure
and content. A Kendo Progress Bar is used to display the user’s progress in
answering all required questions, and we also prompt the user when they submit
to remind them when the questionnaire isn’t 100% entered. If the user cancels
that prompt, they can continue answering questions.
During testing, our customer observed that when “required”
questions haven’t been answered, the user didn’t know where to look for a
missing answer in the sea of questions. So I am implementing a mechanism to display
the first unanswered question. I do this by scrolling the Kendo Tab’s DIV that
is containing my questionnaire’s section content. So far, so good.
It’s all working perfectly except for one strange thing… the
Tab Strip control. I knew that if the first unanswered question was on a
different section (i.e. another Kendo Tab) than the one being viewed, that I
would have to programmatically select that tab before scrolling its contents. Unfortunately,
I have encountered a dramatic sizing anomaly in Kendo.
Out of the three questionnaire sections, one is very tall
and the other two are short. I have discovered that if I am viewing either of
the two short sections, then initiate the code to bring me to the first
unanswered question (which is in the tallest section), the tall section shows
just fine. But if I then click the Tab Strip to view the short section I just
came from, it’s totally empty! The remaining short section is unaffected until
I perform the same sequence of steps on that section. When I do, both short
sections become zero pixels tall.
What I observed by using Internet Explorer’s DOM explorer
was something strange happening to the “k-content” DIV in the Tab Strip when I
my scripts runs, it gets a “height: auto” attribute added to it (where none
existed before). The Tab Strip then switches to the desired tab as expected. But
if I then manually click back to that original tab, its “height: auto”
attribute is replaced with a “height: 0px” attribute and I see no content under
If I use the DOM explorer to remove the height attribute
altogether, the content under that tab is restored to its normal appearance.
But if I continue to click on tabs, the “height” attribute is immediately
None of this “height” attribute stuff happens if I click on the
tabs manually. Only if I programmatically select one with script does the
The Razor for my Tab Strip looks like this (see below). This
code actually lives in a partial view that the Kendo Splitter presents, so
basically the Tab is surrounded by the Splitter. I experimented with using no tab
animation, to no avail.
.Animation(a => a.Open(e =>
foreach (SectionViewModel sectionViewModel in
Model.QuestionnaireRevision.Sections.OrderBy(s => s.SortOrder))
essentials (and hard-coded stuff just in case), and what I was left with
I am switching to. I removed all the code that tries scrolling.
sectionId = 2;
tabStrip = $("#uxSections").kendoTabStrip().data("kendoTabStrip");
= tabStrip.tabGroup.find("#uxSectionTab" + sectionId);
If I click on one of the short sections and trigger this
code (which takes me to the tall section), then when I manually click back on
the short section’s tab, its contents are zero pixels tall.