This is a migrated thread and some comments may be shown as answers.

Splitter Width, Color, Size Attributes

1 Answer 77 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 03 Apr 2019, 02:13 PM

I would like to make the splitter bend to my will. Can you give me an example on how to do this?:

  • Make Size relative to the host (instead of hard-coded to 440px).  I'd like it to be .25% of the parent/host.
  • Make the bar between the panes wider so its easier to resize it.
  • Turn off the button that closes/opens the pane.  (I don't want this pane to go away)
  • Set a minimum width on the left pane so it must be at least 100px.
  • Change the color of the bar when it is select/not selected. and/or set the background color for ALL Kendo controls.
@(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>);
          })

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 08 Apr 2019, 12:19 PM
Hello Joel,

1) Controlling the Splitter size could be achieved through the Size() property that allows using both pixels and percentage:
pane.Add().Size("25%")

2) Customizing the split bar width could be achieved by the following CSS:
<style>
  .k-splitbar {
    width: 30px;
  }
</style>

3) Preventing the rendering of the button for collapsing/expanding each pane could be achieved through the Collapsible() property:
pane.Add().Size("25%").Collapsible(false)

4) Minimum pane width could be set through the MinSize() property.

5) Changing the background color of the split bar can be achieved by the following CSS:
<style>
  .k-splitbar {      
    background: red;
  }
       
  .k-splitbar.k-state-focused {
    background: orange;
  }
</style>

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Splitter
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Dimitar
Telerik team
Share this question
or