Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
igSplitter not rendering

I’m new to ignite UI, knockout, durandal, breeze via hottowel stack and cannot get the splitter to work on the shell.html + shell.js mvvm arrangement at all.

The basic splitter sample instantiates the igSplitter in html script tags like this sample that is on my shell.html page.


    <header data-bind="compose: { view: 'nav' }"></header>

    <div id="splitter">

        <div style="margin-top:80px; overflow: auto">

            <section id="leftnav" data-bind="compose: { view: 'leftnav' }" style="margin-top:80px; overflow: auto"></section>


        <div id="maincontent" style="overflow: auto">

            <section id="content"

                        class="main container-fluid"

                        data-bind="router: { transition: 'entrance', cacheViews: true }"></section>



    <footer data-bind="compose: { view: 'footer' }"></footer>

    <script type="text/javascript">

        $(function () {

            $("#splitter").igSplitter({ height: "800px", panels: [{ size: 250, min: 20, max: 350 }] });





Main.js is called before this as is the index.cshtml before that and all js includes are done in a bundleconfig.cs arrangement.

The $(function(){$”#splitter”) function never gets called…. Perhaps the shell.js composed viewmodel renders this obsolete.  Breakpoint never stops there.

I have managed to get the igGrid working and bound to breeze data and it instantiates through the knockout data-bind property like this next sample, so I’m wondering if the splitter needs to do it the same way.  I cannot find any samples like that though and while I did try that, splitter would not render.

<table id="grid1"

           data-bind="igGrid: { dataSource: data,

                                caption: 'Contracts',…..


Any help greatly appreciated :-)