Combine custom toolbar template with default batch edit toolbar.

[Brady]

I have a nice grid set up your using batch edit demo as an example. However, I would now like to add filtering like in your 'Custom Toolbar' demo. Is there as nice way to still keep the three batch edit buttons and add my own filtering dropdown to the toolbar, or do I now have to code my own add/save/cancel UI for my custom toolbar?

I don't wan't to use the built in filtering because I don't want to have to include the column I filter on as a grid column.

SOLUTION SO FAR:
I have achieved much of what I want by 'manually' moving my filter elements into the grid toolbar, like below:

<style>
    #filter-toolbar
    {
        display: inline-block;
        padding: 5px;
    }
</style>
<script>
    $("#department-grid .k-grid-toolbar").prepend($("#filter-toolbar"));
</script>
<div id="department-grid"></div>
<div id="filter-toolbar">

    <label>Company: </label>

    @Html.DropDownList("CompanyId", Model.CompanySelectList)

</div>

<div id="department-grid"></div>

[Rosen]

Hello Brady,

You may achieve this by using custom toolbar command template as shown in the following jsFiddle sample: 

Regards,
Rosen
the Telerik team

[Spirent]

Is there a razor version of this example? I am trying to use the Save command from the toolbar in addition to a template.

[Rosen]

Hello Metrico,

This demo can be seen in out live demos here.
However, in order to show the create and/or the save buttons in the toolbar template of the ASP.NET MVC Grid widget wrapper, CreateButton and SaveButton function should be used. Similar to the following:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            @item.CreateButton()
            @item.SaveButton()

           <div class="toolbar">
                    <label class="category-label" for="category">Show products by category:</label>
                        @(Html.Kendo().DropDownList()
                            .Name("categories")
                            /*..*/
                        )
                        </div>
        </text>);
    })
    /*..*/
)

Regards,
Rosen
Telerik

[Spirent]

Thanks for the help, I didn't realize it was that easy.

[Ian]

Hi

Are you able to provide the syntax for this using the MVC Helpers?

Regards,

[Ian]

Apologies forgot to mention, without using @<text> tags as the grid I want to edit is already within another template within a tabstrip.

There doesn't seem to be a way to edit posts on here from what I can see.

[John]

I had a similar need where I needed @<text> to be imbedded where I already was using the @<text></text> syntax.

You can get around it by using a @helper to define the contents of your tabstrip.

Here is an example

.Items(items =>
{
    items.Add()
        .Text("Routings")
        .Selected(true)
        .Content(@<text>
            @RenderMaterialGrid()
        </text>)
        .ContentHtmlAttributes(new { style = "min-height: auto; height: auto;" });
    ...

   @RenderMaterialGrid() contains the contents you need displayed in the tab

   Here's the syntax

   @helper RenderMaterialGrid()
{
   ... your contents for the tabstrip goes here

       You can define all the html you need along with the kendo grid and any javascript you need for it.
        It gives you the freedom to use any wrappers you may need to use without violating imbedding rules
}

[Chris]

Is there a way to mix the template with the built in .Pdf() and .Excel() buttons?

[Stefan]

Hello Chris,

The desired result can be achieved using two custom buttons in the template and they have to call the corresponding client methods:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveAsExcel

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveAsPDF

Regards,
Stefan
Telerik by Progress