Telerik Forums
UI for ASP.NET MVC Forum
0 answers
122 views
2 answers
280 views

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>
Sam
Top achievements
Rank 1
 answered on 02 Oct 2019
4 answers
652 views
I'd like to use a splitter control that has two vertical panes.  In the left pane I'd like to have a treeview control.  When the user selects a node in the treeview, I'd like to populate the right-hand splitter pane with a partial view that displays more detail for the selected treeview node.  Please could you provide guidance as to how I can achieve this?
Marin Bratanov
Telerik team
 answered on 26 Feb 2019
1 answer
100 views

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?

 

Marin Bratanov
Telerik team
 answered on 26 Feb 2019
1 answer
127 views

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

 

Dimitar
Telerik team
 answered on 22 Sep 2017
10 answers
155 views
Hi,

Recently we are trying to migrate our existing application from telerik to Kendo ui controls. In one of the page we have telerik splitter and its panel contains telerik tab strip which internally loads telerik grid.

    Now we replaced telerik splitter to kendo ui splitter and remaining are same in telerik. Once after running the application telerik grid is not being loaded properly.

Please guide me here.

Thanks,
Srikanth
Ivan Danchev
Telerik team
 answered on 26 Jul 2017
1 answer
151 views

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:&nbsp;</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>

Ianko
Telerik team
 answered on 09 May 2017
8 answers
84 views

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...

 

Joe
Top achievements
Rank 1
 answered on 04 Apr 2017
5 answers
193 views
My users are complaining that the icons used to resize splitter panes, as well as collapse and expand them are just too small...  How can I make them bigger?
Orlin
Telerik team
 answered on 15 Mar 2017
1 answer
72 views

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

Veselin Tsvetanov
Telerik team
 answered on 02 Mar 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?