Toggle Kendo Splitter on button click inside iframe

1 posts, 0 answers
  1. sandeep9164262326
    sandeep9164262326 avatar
    1 posts
    Member since:
    Jul 2015

    Posted 30 Jul 2015 Link to this post

    my Kendo Splitter is as below.

    @(Html.Kendo().Splitter()
          .HtmlAttributes(new { style = "height:590px;", id = "mainSplitter" })
          .Orientation(SplitterOrientation.Horizontal)
          .Panes(horizontalPanes =>
          {
              horizontalPanes.Add()
                  .HtmlAttributes(new { id = "left-pane" })
                  .Size("246px")
                  .Collapsible(true)
                  .Content(@<text></text>);
              horizontalPanes.Add()
                  .HtmlAttributes(new { id = "right-pane", style = "overflow:hidden;" })
                .Content(@<iframe id="tabsContent_iframe" src='' data-src='' style="width:100%;height:100%;"></iframe>
                );
          })
    )

    I have a button outside the splitter used to toggle the left-pane which worked perfectly.
    Now, if I used the same button inside my iframe and make the call. It doesn't work.
    I tried doing it in couple of ways as below:

    1)

     

    var parentSplitterId = parent.$('#mainSplitter').data("kendoSplitter");
     var parentLeftTogglePane = parent.$('#full-pane');// , window.parent.document);
       parentSplitterId[parentLeftTogglePane.width() > 0 ? "collaspe" : "expand"](parentLeftTogglePane);

    2)

     

    var parentSplitterId = window.parent.document.getElementById('mainSplitter');
    var parentLeftTogglePane = $('#full-pane', window.parent.document);
    var splitter = $("#parentSplitterId").data("kendoSplitter");
    splitter[leftTogglePane.width() > 0 ? "collaspe" : "expand"](leftTooglePane);

     

    I am not able to understand where I am going wrong or what I'm missing. Please guide me out here.
    Thanks​​​

Back to Top