i am getting the error when i use @html.kendo()
it showing are you missing any directives
>please suggest any solution
I am trying to set up my index page such that it has a splitter with two horizontal panes, left and right. Each pane gets its contents from a partial view. The left pane should contain a text box, button and a TreeView. The right pane is a map. If I try to load the partial view in the left pane, the page does not display correctly. If I only have a simple string in the left pane content, the page (and map) work. Please advise.
Index.cshtml:
@(Html.Kendo().Splitter()
.Name("splitter")
.Orientation(SplitterOrientation.Horizontal)
.Panes(hPanes =>
{
hPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.Size("25%")
.Scrollable(false)
.Collapsible(true)
.Content(Html.Partial("_TreeView").ToHtmlString());
//.Content("<
h1
>TEST</
h1
>");
hPanes.Add()
.HtmlAttributes(new { id = "right-pane" })
.Size("75%")
.Scrollable(false)
.Collapsible(false)
.Content(Html.Partial("_MapView").ToHtmlString());
})
)
<
style
>
#splitter {
height: 100vh;
/*width: 100vw;*/
padding: 0;
margin: 0;
}
#left-pane {
color: #000;
background-color: #ccc;
}
#right-pane {
color: #000;
background-color: #aaa;
}
</
style
>
<
script
>
</
script
>
_TreeView.cshtml:
@{
Html.Kendo().TextBox()
.Name("searchTextBox");
Html.Kendo().Button()
.Name("SearchTrigger")
.Content("Search");
}
_MapView.cshtml:
@(Html.Kendo().Map()
.Name("map")
.Center((double)ViewBag.BicLat, (double)ViewBag.BicLong)
.Zoom(14)
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bing)
.ImagerySet(MapLayersImagerySet.AerialWithLabels)
.Key("ApiZL7kfQK2OAVUEfEtIUds-61ZYq1QHeX8DF6fm7kKWlLuzreW4anD5v8DeuvEu");
//.Type(MapLayerType.Tile)
//.UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
//.Subdomains("a", "b", "c");
})
.Markers(markers =>
{
markers.Add()
.HtmlAttributes(new {id = "bicMarker" })
.Location((double)ViewBag.BicLat, (double)ViewBag.BicLong)
.Shape(MapMarkersShape.PinTarget)
.Tooltip(tooltip => tooltip.Content("BIC"));
})
)
<
style
>
#map {
height: 100%;
margin: 0;
padding: 0;
}
</
style
>
Does anybody know where a complete working MVC sample exists that demonstrates a treeview in one pane and detail in another pane when a tree node is clicked on?
Hello,
In my view there is a kendotreeview and kendo tab inside which i have Kendo splitter with 2 panes each. Pane 1 and pane4 load partial view when a node in Kendo treeview selected depending on what is selected on node. On main view i have 2 save button. Button1 Contents of form inside pane1(formid: frmObjdetails) in splitterchild and other button to save Content from pane 4 form inside splitterchild1(formid:frmDoc). If i have only pane 1 form loaded then clicking Button1 submits the data perfectly. But when i have both forms loaded then clicking on Button 1 post pane 4 form data and not pane 1 form data. though both forms have specific id
Here are my codes
@helper ObjectDetailContentTemplate()
{
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.SelectedIndex(0)
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add().Text("ObjektDetail")
.Selected(true)
.Content(@<text>
@ObjectDetailContentSplitterTemplate()
</text>);
tabstrip.Add().Text("Objekt-Aktivitat")
.Content(@<text>
@ObjectActivityContentSplitterTemplate()
</text>);
})
)
}
@helper ObjectDetailContentSplitterTemplate()
{
@(Html.Kendo().Splitter()
.Name("splitterchild")
.HtmlAttributes(new { style = "height: 800px;" })
.Orientation(SplitterOrientation.Vertical)
.Panes(panes =>
{
panes.Add()
.Scrollable(false)
.Size("290px")
.HtmlAttributes(new { id = "pane1" })
.Collapsible(false)
.LoadContentFrom("Index", "ObjectDetail", new { id = ViewBag.SelectedObjectID });
panes.Add()
.Scrollable(false)
.HtmlAttributes(new { id = "pane2" })
.Content(@<text>
@ObjectAddressGrid()
</text>);
}))
}
@helper ObjectActivityContentSplitterTemplate()
{
@(Html.Kendo().Splitter()
.Name("splitterchild1")
.HtmlAttributes(new { style = "height: 100%;" })
.Orientation(SplitterOrientation.Vertical)
.Panes(panes =>
{
panes.Add()
.Size("400px")
.HtmlAttributes(new { id = "pane3" })
.Collapsible(false)
.Content(@<text>
@DocumentGrid()
</text>);
panes.Add()
.Size("200px")
.HtmlAttributes(new { id = "pane4" })
.Collapsible(false);
}))
}
When treeview node is selected i call ajaxrequest for loading the partialviews with forms
function onSelect(e) {
var nodeid = $("#treeview").getKendoTreeView().dataItem(e.node).id;
var splitter = $("#splitterchild").data("kendoSplitter");
var splitterch = $("#splitterchild1").data("kendoSplitter");
splitter.ajaxRequest("#pane1",rootDir + "ObjectDetail/Index", { id: nodeid });
splitterch.ajaxRequest("#pane4", rootDir + "Document/Index", { id: nodeid, DocumentID: nodeid });
}
here is partial view Content for pane1
@using (Html.BeginForm("SubmitObjectCollection", "ObjectDetail", FormMethod.Post, new { @name = "frmObjdetails", Id = "frmObjdetails" }))
{
}
here is partial view Content for pane4
@using (Html.BeginForm("SubmitFormCollection", "Document", FormMethod.Post, new { data_ajax = "false", @name = "frmDoc", id = "frmDoc" }))
{
}
In main view on button 1 click i do
var dataPost = $('#frmObjdetails').serialize();
$.ajax({
cache: false,
async: false,
url: "@Url.Action("SubmitObjectCollection", "ObjectDetail")",
type: 'POST',
data: dataPost,
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {
}
}
});
and button2 click
var dataPost = $('#frmDoc').serialize();
$.ajax({
cache: false,
async: false,
url: "@Url.Action("SubmitFormCollection", "Document")",
type: 'POST',
data: dataPost,
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {
// alert(data);
}
}
});
But when both panes are loaded clicking button 1 submit frmDoc .
What is causing this Problem. How can i post correct form on respective button click
Thanks
Anamika
I want to put a splitter in a bootstrap collapse panel. This works fine when the collapse panel is loaded open (ie a class of collapse in). However when the page loads with the collapse is loaded closed, the splitter does not render. Is there a way to make this work short of having a document ready function that has $(".collapse").collapse('hide');?
Thank-you
Here is the cshtml code.
<div class="panel-heading" style="background-color: #717174;height: 35px;color:white;font-size:11px;width:100%;">
<div class="panel-title">
<div class="row">
<div class="col-md-6">
<form id="form1" name="form1">
<div class="input-group input-group-sm input">
<span style="color:white;font-size:12px;font-weight:bold;">Account: </span>
<input id="selacct" class="form-control" name="selacct" placeholder="Search Account #..." style="width:120px;font-size:10px;height:20px;vertical-align:middle;float:none">
<a href="#" style="color:white;height:20px;"><span class="glyphicon glyphicon-search"></span></a>
<div class="col-md-1" style="border-left:1px solid #cccccc;">
<a data-toggle="collapse" href="#collapse1" style="text-decoration:none;color:white;font-weight:bold;font-size:14px;"><span class="glyphicon glyphicon-menu-down"></span></a>
</div>
<!-- /.end see more -->
</div>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse col-md-12">
<div class="panel-body" style="background-color: #999999;height: 250px;color:white;font-size:12px">
@(Html.Kendo().Splitter()
.Name("vertical")
.Orientation(SplitterOrientation.Vertical)
.Panes(verticalPanes =>
{
verticalPanes.Add()
.HtmlAttributes(new { id = "top-pane" })
.Scrollable(false)
.Collapsible(false)
.Content(
Html.Kendo().Splitter()
.Name("horizontal")
.HtmlAttributes(new { style = "height: 100%;" })
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.Size("220px")
.Content(@<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>);
horizontalPanes.Add()
.HtmlAttributes(new { id = "right-pane" })
.Size("220px")
.Content(@<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>);
}).ToHtmlString()
);
})
)
</div>
</div>
When the page loads that has my Splitter on it, it shows up as un-formatted. After a second or two, the page then changes to show the correct splitter panel layout. How can I change this so that it doesn't show the un-formatted splitter first? See attached screen shots...
I have a splitter with two windows, left holds a treeview, the right a partial view that depends on the selected node in the treeview to select the content (via an onSelect event).
The problem is that this code sometimes works perfectly and sometimes does not - specifically it renders the "parent" page (including the splitter, treeview etc) inside the right hand pane.
I'm a newbie with MVC, javascript etc so have no idea where the problem is - nor can I reproduce it at will.
The javascript snippit is:
function onSelect(e) {
try {
var treeView = e.sender;
var text = treeView.text(e.node);
var data = treeView.dataItem(e.node);
var id = data.id;
console.log(id, text);
var parent = null;
try {
parent = treeView.text(e.node.parentNode);
} catch (e) {
console.log(e.message);
}
$("#splitter").kendoSplitter();
var splitter = $("#splitter").data("kendoSplitter");
switch (text) {
case "Case":
splitter.ajaxRequest("#right-pane", "PartialCase", { id: id });
break;
And using the F12 debug I can follow it to the "splitter.ajaxRequest" line at which point it populates the right window with the parent page.
I hope this is something stupid.
Thanks