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