Kendo Panel bar child right indented

[abdul]

How to make the Kendo Panel Bar children as right indented.

 

For example I have PanelBar called  Interest Rates and 3 children. I want the 3 children as below right indented.

 

Interest Rates

Default Rates

Negative Carry

Cash FTP

 

Thanks

Abdul Ashad

 

 

[Tsvetomila]

Hi Abdul,

Thanks for reaching out.

To attain the intended result, I recommend employing the HtmlAttributes() API configuration to add an extra class "k-level-2" to the items. This way, the child item will be intended to the right.

For example:

    @(Html.Kendo().PanelBar()
        .Name("panelbar")
           // ...
                projects.Add()
                    .Text("Default Rates")
                    .HtmlAttributes(new { @class = "k-level-2" });
           // ...

Follow the Telerik REPL for ASP.NET Example to review the implementation in practice.

Furthermore, the "k-level-2" class will intend the items once,  "k-level-3" once more. If you need a more specific distance, try applying a style attribute instead:

.HtmlAttributes(new { style="margin-left:30px;"}); 

I look forward to hearing whether the solution helped achieve the desired result.

Regards,
Tsvetomila
Progress Telerik

[abdul]

Thanks for providing the solution. It's working as expected.