Toggle Kendo Splitter on button click inside iframe

Question

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>
            );
      })
)

In my POC, I had 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

In the code you tried, does the `parentSplitterId` variable get its value? — chiapa, Jul 31 '15 at 10:32
Yeah. I'm able to get the instance of the `parentSplitterId`. But the last line is where I'm getting this error: `parentSplitterId[(intermediate value)(intermediate value)(intermediate value)] is not a function` — San, Jul 31 '15 at 10:48
Wow! Thanks a ton . Can't believe I was working on this for days :/ — San, Jul 31 '15 at 11:27

score 0 · Accepted Answer · answered Jul 31 '15 at 11:54

0

The solution is simple as you misspelled the word collapse, you wrote collaspe instead.

answered Jul 31 '15 at 11:54

chiapa

4,362
11
66
106

Toggle Kendo Splitter on button click inside iframe

1 Answers1