Problems updating the content of a Kendo UI TabStrip without AJAX?

Question

I have a small console that displayed the output of certain actions in my website, the need to have another console that would display a different kind of output made me want to combine both consoles in a Kendo UI TabStrip, the thing is that the information displayed on the console isn't received with AJAX so when I started to insert the HTML elements like before, the tab didn't got updated.

This is how I initialize the tab:

    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects:'fadeIn'
            }
        }
    });

This is how my HTML looks:

<div id="tabConsole">
      <ul>
           <li class="k-state-active">Salida</li>
           <li id="notificacionTab">Notificaciones</li>
      </ul>
      <div id="userConsole"></div>
      <div id="notificationConsole"></div>
</div>

This is how I try to update it:

function appendToConsole(content, type, optional) {
//code to append to console
    var actualDate = new Date();
    var prevContent = $('#userConsole').html();
    if (typeof prevContent === 'undefined') {
        prevContent = '';
    }
    var strType = '';
    var iconType = '';
    var moreOutput = '';
    if (type == 1) {
        strType = 'infoConsole';
        iconType = 'infoIcon.png';
    } else if (type == 2) {
        strType = 'warningConsole';
        iconType = 'warningIcon.png';
        moreOutput = '<img id="viewDetails" value="' + optional + '" class="moreConsole" src="../Content/images/icons/arrow.png">';
    } else if (type == 3) {
        strType = 'errorConsole';
        iconType = 'errorIcon.png';
    }
    var iconOutput = '<img class="iconConsole" src="../Content/images/icons/' + iconType + '">';
    var dateOutput = '<div class="dateConsole">' + iconOutput + ' ' + actualDate.toLocaleDateString() + ', ' + actualDate.toLocaleTimeString() + ' : </div>';
    var consoleOutput = prevContent + '<div class="outputConsole">' + dateOutput + content + moreOutput + '</div>';
    $('#userConsole').html(consoleOutput.toString());
    var height = $('#userConsole')[0].scrollHeight;
    $('#userConsole').scrollTop(height);
//my try to update the tab
    var tabStrip = $('#tabConsole'),
        selectedIndex = tabStrip.data('kendoTabStrip').select().index(),
        clone = original.clone(true);
    clone.children('ul')
    .children('li')
    .eq(selectedIndex)
    .addClass('k-state-active')
    .end();
    tabStrip.replaceWith(clone);
    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects: 'fadeIn'
            }
        }
    });
}

How can I update the contents of the DIV that are inside the TabStrip?

EDIT

It seems Kendo UI renames the DIVs' ids that represent the tabs to tabConsole-1 and tabConsole-2, explaining why the update wasn't working, still there's a lot of strange behavior, I had to specify the height for each DIV so the overflow propety would work, also the images with id viewDetails and class moreConsole when set to position absolute, get rendered outside the DIV that represents the tab, but if I change the position property to relative, the images stay inside the DIV but are displayed not at the end of the DIV like I want to, but relative to the size of the DIV that comes before them.

I'm really confused as to how to set the styles so the contents are displayed properly.

Answer 1

Adding content to a tabStrip can be achieved using:

$(tabConsole.contentElement(idx)).append(newContent)

where:

• idx is the tab index,
• newContent is what you want to add to the existing content and
• tabConsole is the variable set to $("#...").kendoTabStrip(...).data("kendoTabStrip"); .

You don't need to create a new tabStrip (in addition you should not re-create KendoUI elements since this is a pretty expensive operation).

About using multiple tags with the same id ... you should not use it, use class instead. id s should be unique.

I'm still trying to understand your problem with the styling.