Combine custom toolbar template with default batch edit toolbar.

9 posts, 0 answers
  1. Brady
    Brady avatar
    34 posts
    Member since:
    Mar 2009

    Posted 16 Apr 2012 Link to this post

    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>
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 Apr 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Spirent
    Spirent avatar
    13 posts
    Member since:
    Apr 2012

    Posted 10 Mar 2014 Link to this post

    Is there a razor version of this example? I am trying to use the Save command from the toolbar in addition to a template.
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 11 Mar 2014 Link to this post

    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!
  6. Spirent
    Spirent avatar
    13 posts
    Member since:
    Apr 2012

    Posted 11 Mar 2014 in reply to Rosen Link to this post

    Thanks for the help, I didn't realize it was that easy.
  7. Ian
    Ian avatar
    8 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2014 in reply to Rosen Link to this post

    Hi

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

    Regards,
  8. Ian
    Ian avatar
    8 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2014 in reply to Ian Link to this post

    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.
  9. John
    John avatar
    1 posts
    Member since:
    Jul 2013

    Posted 02 Apr 2015 in reply to Ian Link to this post

    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
    }
  10. John
    John avatar
    1 posts
    Member since:
    Jul 2013

    Posted 02 Apr 2015 in reply to Ian Link to this post

    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
    }
Back to Top
Kendo UI is VS 2017 Ready