Splitter not activating

[Johannes]

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?

[Ivan Danchev]

Hello,

The issue was caused by invalid template. The template syntax and more precisely the  # symbols (hash literals) here in this line:

.Size("#if(Status == 0){#54px#}else{#100px#}#")

should be escaped, because this is a template in another template (the detail template of the Grid). For more details on escaping hash literals see the documentation: https://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals

This topic has also been discussed in another forum thread: https://www.telerik.com/forums/conditional-client-template-in-razor-hierarchical-grid

Regards,
Ivan Danchev
Progress Telerik

[Johannes]

I am pretty new with the templates, but I am usually told pretty quickly by the browser when I have created an invalid template. The template that I have shown doesn't come up with any console issues.

I have tried escaping the hash literals in the line, but the pane width does not change based on the value of "Status". It is always the same size of 248px.

I have also moved this to a method that returns the correct value and the pane resizes correctly. If I try and escape this, the pane size goes to 248px, and the splitter that I load with AJAX still doesn't get created.

.Size("#=SuggestionGridDetailsSplitterPaneHeight(data)#")

 

I must be doing something wrong. Could you give me an example of what part should be escaped?

[Johannes]

I just made the size of the splitter pane static to take away the issue of having to escape any hash literals. The splitter still does not activate.

[Ivan Danchev]

Hello Johannes,

I've attached the sample project I tested the Splitter in.

Regards,
Ivan Danchev
Progress Telerik

[Johannes]

I have updated the project to show the issue.I can't attach it here because "The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .jpg, .jpeg, .gif, .png, .zip).".

How can I get the project to you so that you can see what I am experiencing?

[Ivan Danchev]

Hello Johannes,

Most likely the packages have made the project too big. I assume the changes are only in the view. Could you attach only the modified view and I will try it out in the sample project at my end?

Regards,
Ivan Danchev
Progress Telerik

[Johannes]

I have attached the updated files. This also includes some new files that I added to reproduce the issue.

The splitter that is on the _ExtraDetails.cshtml view does not activate.

[Ivan Danchev]

Hello Johannes,

Loading the "_ExtraDetails" view's Html like in the pane like this:

document.getElementById('sug-bottom-' + data.SuggestionID).innerHTML = data.View;

won't work for components. This will load the Html the view contains, but will bypass the initialization of the components.

So instead consider initializing the Splitter after loading the Html of the view. Instead of a tag helper add the following Html to the "_ExtraDetails" view:

@model int

@{
    var uniqueVal = Guid.NewGuid();
}

<div id="splitter" class="k-splitter" style="height: 100%">
	<div id="edit-left-@uniqueVal">
		<p>Left side splitter for @Model</p>
	</div>
	<div id="edit-right-@uniqueVal">
		<p>Right side splitter for @Model</p>
	</div>
</div>

Then in the success callback of the AJAX request (in the onDetailsExpanded handler), after you load the view's Html, find the div element with "k-splitter" class and initialize the Splitter from it:

success: function (data, textStatus, jqXHR) {
	document.getElementById('sug-bottom-' + data.SuggestionID).innerHTML = data.View;

	$("#sug-bottom-" + data.SuggestionID).find(".k-splitter").kendoSplitter({
		orientation: "horizontal"
	});
},

Regards,
Ivan Danchev
Progress Telerik