Splitter Width, Color, Size Attributes

[Joel]

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>);
          })

[Dimitar]

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