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

Combine custom toolbar template with default batch edit toolbar.

9 Answers 677 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brady
Top achievements
Rank 1
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

Sort by
0
Rosen
Telerik team
answered on 18 Apr 2012, 10:02 AM
Hello Brady,

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



Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Spirent
Top achievements
Rank 1
answered on 10 Mar 2014, 07:34 PM
Is there a razor version of this example? I am trying to use the Save command from the toolbar in addition to a template.
0
Rosen
Telerik team
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!
0
Spirent
Top achievements
Rank 1
answered on 11 Mar 2014, 01:21 PM
Thanks for the help, I didn't realize it was that easy.
0
Ian
Top achievements
Rank 1
answered on 20 Mar 2014, 10:28 AM
Hi

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

Regards,
0
Ian
Top achievements
Rank 1
answered on 20 Mar 2014, 10:30 AM
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.
0
John
Top achievements
Rank 1
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
}
0
Chris
Top achievements
Rank 1
answered on 18 Apr 2017, 08:52 AM
Is there a way to mix the template with the built in .Pdf() and .Excel() buttons?
0
Stefan
Telerik team
answered on 21 Apr 2017, 07:55 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Brady
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Spirent
Top achievements
Rank 1
Ian
Top achievements
Rank 1
John
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or