I'm working in a migration to MVC .NET6 from .NET Framework, so in the Layout we use the following
@Html.Kendo().Splitter().Name("Splitter").Panes(p => {
p.Add().Content(RenderSection("Header", true).ToHtmlString());
p.Add().Content(RenderSection("Content", true).ToHtmlString());
});
As you can see we are using RenderSection() to take the HTML defined in other view. For each page we have the following code
But in .NET6 the same RenderSection() renders the content of the section. (has other behaviour)
There is other way to get the HTML from the sections?
Version: Telerik.UI.for.AspNet.Core.2020.2.513
MVC
I have an odd behavior with the splitter. I'd like to know how to get this to work. For some reason the Label is aligned to the left off the page. How do I get around this behavior?
Splitter Definition:
@(Html.Kendo().Splitter()
.Name("splitter")
.HtmlAttributes(new { style = "height: 150px;" })
.Panes(panes =>
{
panes.Add()
.HtmlAttributes(new { id = "top_pane" })
.Collapsible(true)
.Content(@<
p
>@Html.Partial("_SplitterWorkPanel1")</
p
>);
panes.Add()
.HtmlAttributes(new { id = "bottom_pane" })
.Collapsible(true)
.Content(@<
p
>@Html.Partial("_SplitterWorkPanel2")</
p
>);
}))
Partial Views (both are the same):
@{ Layout = null; }
<
div
class
=
"row"
>
<
label
class
=
"col-form-label"
>Date Range</
label
>
</
div
>
<
div
class
=
"row"
style
=
"margin-top: 5px;"
>
<
label
class
=
"col-form-label"
>Status</
label
>
</
div
>
I have a grid with a details panel.
The details panel has the following template:
<
script
id
=
"SuggestionGridDetailsTemplate"
type
=
"text/kendo-tmpl"
>
@(Html.Kendo().Splitter()
.Name("sug-splitter-#=SuggestionID#")
.HtmlAttributes(new { style = "height: 500px;" })
.Orientation(SplitterOrientation.Vertical)
.Panes(verticalPanes =>
{
verticalPanes.Add()
.HtmlAttributes(new { id = "sug-top-#=SuggestionID#" })
.Collapsible(false)
.Size("#if(Status == 0){#54px#}else{#100px#}#")
.Content(@<
div
class
=
"container"
>
<
div
class
=
"row"
>
#if(Status == 0){#
<
div
class
=
"col-2 offset-10 float-right"
>
@(Html.Kendo().Button()
.Name("DeleteSuggestionBtn-#=SuggestionID#")
.HtmlAttributes(new { type = "button", @class = "k-btn-danger mt-2 float-right" })
.Events(e => e.Click("DeleteSuggestionBtnClick"))
.Content("Delete").ToClientTemplate())
</
div
>
#} else {#
<
div
class
=
"col-4"
>
<
label
>Actioned by:</
label
>
<
p
>#=ActionedBy#</
p
>
</
div
>
<
div
class
=
"col-8"
>
<
label
>Comments:</
label
>
<
p
>#=Comments#</
p
>
</
div
>
#}#
</
div
>
</
div
>);
verticalPanes.Add()
.HtmlAttributes(new { id = "sug-bottom-#=SuggestionID#", @class="iv-pane-no-overflow" })
.Resizable(false)
.Collapsible(false);
}).ToClientTemplate()
)
</
script
>
The grid has a DetailExpand event that will populate the bottom pane of the "sug-splitter" with a partial view from the controller using AJAX. The content all loads, but the script generated to make the splitter look like a splitter does not fire. If I copy the jQuery call into the console and run it, the splitter turns into what I am expecting.
<
script
>kendo.syncReady(function(){jQuery("#vertical-18b41377-7c46-4e83-b72c-84e9a6589135").kendoSplitter({"panes":[{"collapsible":false,"scrollable":false},{"collapsible":false,"resizable":false,"size":"100px"}],"orientation":"horizontal"});});</
script
>
I have loaded content with a splitter in it previously, although this was into a window, not a grid details area.
What can I do to get the splitter to load and not just be a bunch of divs on page?
I am trying to load a partial view inside of one of the splitter panes. I have done this previously using the HTML helpers in an old project, but I am having troubles replicating this with Tag Helpers.
If I use content-url, I get the page inside of an iframe, which doesn't have my styles applied and the iframe only takes up a small amount of the pane with overflow scrollers. The HTML Helper in the old project loaded the returned html in the pane.
How can I load the partial view using ajax with the tag helpers?
Hi,
How do I put the renderbody function inside a splitter pane?
Thanks ... .Ed
I would like to make the splitter bend to my will. Can you give me an example on how to do this?:
@(Html.Kendo().Splitter()
.Name("splitter")
.HtmlAttributes(new { id = "vertical" })
.Panes(panes =>
{
panes.Add().Collapsible(true).HtmlAttributes(new { id = "vertical" }).Size("440px").Content(
@<
div
>
... content
</
div
>);
panes.Add().Content(
@<
div
>
... content
</
div
>);
})