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

Combine custom toolbar template with default batch edit toolbar.

9 Answers 1209 Views

Grid

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

Brady asked on 16 Apr 2012, 09:50 PM

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>

9 Answers, 1 is accepted

answered on 11 Mar 2014, 09:54 AM

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 02 Apr 2015, 01:51 PM

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
}