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

ExpandBar Template in Kendo Grid

3 Answers 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
venkata
Top achievements
Rank 1
venkata asked on 01 Oct 2013, 09:35 AM
Hi,

I have a requirement of having collapsible panel in the header part of kendo grid.
It should be able to expand and collapse as well. I need this to be implemented using HTML Extension helper class.
Please provide the sample. Looking forward.

Sample code:
public static GridBuilder<T> CreateToolbarBuilder<T>(this GridBuilder<T> builder) where T : class
        {
            //add options
            return builder
                    .ToolBar(toolBar => toolBar.Template(@"@(Html.Kendo().PanelBar()
                                                                .Name('panelbar')
                                                                .ExpandMode(PanelBarExpandMode.Multiple)
                                                                .Items(panelbar =>
                                                                {
                                                                    panelbar.Add().Text('Quick Find')
                                                                   .Expanded(true)
                                                                   .Content(@<div class='toolbar'>
                                                                            <label class='category-label' for='category'>Quick Find:</label>
                                                                            <input type='search' id='category' style='width: 300px'/>
                                                                        </div>);
                                                                })
                                                            )"));
        }

Thank you.

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 03 Oct 2013, 06:25 AM
Hello Venkata,

RazorEngine does not support nested Inline markup blocks, that is why I would recommend passing the PanelBar content as a string. Here is an example:  
.ToolBar(t => t.Template(@<text>
           @(Html.Kendo().PanelBar()
                .Name("panelbar")
                .ExpandMode(PanelBarExpandMode.Multiple)
                .Items(panelbar =>
                {
                    panelbar.Add().Text("Quick Find")
                        .Expanded(true)
                         .Content("<div class='toolbar'>"
                                + "<label class='category-label' for='category'>Quick Find:</label>"
                                + "<input type='search' id='category' style='width: 300px'/></div>");
                })
            
 
</text>))

 

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 03 Oct 2013, 07:03 AM
Hi,

Thanks for input, I wanna achieve same thing from static html helper class and also I need two toolbars, one at top header and other at footer section.
If you look into below code, you can see I have created static html helper c# class, and trying to create header toolbar from c# code.
could you please give me a solution fom c# code.

Thanks.

public static GridBuilder<T> CreateToolbarBuilder<T>(this GridBuilder<T> builder) where T : class
        {
            //add options
            return builder
                    .ToolBar(toolBar => toolBar.Template(@"@(Html.Kendo().PanelBar()
                                                                .Name('panelbar')
                                                                .ExpandMode(PanelBarExpandMode.Multiple)
                                                                .Items(panelbar =>
                                                                {
                                                                    panelbar.Add().Text('Quick Find')
                                                                   .Expanded(true)
                                                                   .Content(@<div class='toolbar'>
                                                                            <label class='category-label' for='category'>Quick Find:</label>
                                                                            <input type='search' id='category' style='width: 300px'/>
                                                                        </div>);
                                                                })
                                                            )"));
        }
0
Alexander Popov
Telerik team
answered on 04 Oct 2013, 12:54 PM
Hello Tim,

Having two toolbars is currently not supported out of the box, however this small example demonstrates such behavior.
Supporting custom builders and HTML helpers is out of the scope of our standard support service as it covers the built-in functionality of the controls only. If you'd like to receive custom code from Telerik, I would suggest to check our premium services.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
venkata
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Tim
Top achievements
Rank 1
Share this question
or