Both ToolBar.Template() and ToolBar.Commands() on the same grid possible?

[Jim]

I did not find any example for this.

When adding both as individual .ToolBar() Definitions only the Template is recognized however the InsertButton does not show up.

Jim

[Ozzy Knox]

Hi Jim (and others who will read this)

I am wanting to do exactly what you are asking.  I have an existing toolbar template which add a ComboBox to my toolbar.  But I now want to also include a standard Insert button so that I can do In-form editing.

My current template code looks as follows:

<% Html.Telerik().Grid<Vigilaris.Booking.Services.ScheduledCourseDTO>()
    .Name("ScheduledCoursesGrid")
    .ToolBar(tb => tb.Template(() => { %>
            <label for="Courses-input" style="vertical-align:middle; padding-right: .4em;">Course:</label>
            <% Html.Telerik().ComboBox()
                    .Name("Courses")
                    .DataBinding(binding => binding.Ajax().Select("_GetCourses", "ScheduledCourse", new { selectedCourseId = (int)ViewData["CourseId"] }))
                    .HtmlAttributes(new { style = "width:300px; vertical-align:middle;" })
                    .ClientEvents(e => e.OnChange("courseChange"))
                    .ClientEvents(e => e.OnLoad("loadCourses"))
                    .Render(); %>
            <% }))
    ....
    .Render();
%>

Is there anybody from Telerik or anybody else out there who can tell us how to add a standard Insert button as well to the Toolbar?

Thanks
Ozzy

[Ozzy Knox]

Okay, it seems like I have found a way to do this for the Insert button.  Try as I may, I cannot get the Template and Insert to work alongside one another, although if I wanted multiple buttons using Insert and Custom, they happily coexist.  What I had to do was to mimic the Insert button by specifically adding the html that is rendered by the Telerik for the normal Insert button to my Template.  The resultant code is as follows (and it works!):

<% Html.Telerik().Grid<Vigilaris.Booking.Services.ScheduledCourseDTO>()
    .Name("ScheduledCoursesGrid")
    .ToolBar(tb =>
        {
            tb.Template(() =>
        { %>
            <a class="t-grid-action t-button t-state-default t-grid-add" href="<%= Url.Content("~/ScheduledCourse?ScheduledCoursesGrid-mode=insert") %>"><span style="MARGIN-LEFT: 0px" class="t-add t-icon"></span></a>
            <label for="Courses-input" style="vertical-align:middle; padding-right: .4em;">Course:</label>
            <% Html.Telerik().ComboBox()
                    .Name("Courses")
                    .DataBinding(binding => binding.Ajax().Select("_GetCourses", "ScheduledCourse", new { selectedCourseId = (int)ViewData["CourseId"] }))
                    .HtmlAttributes(new { style = "width:300px; vertical-align:middle;" })
                    .ClientEvents(e => e.OnChange("courseChange"))
                    .ClientEvents(e => e.OnLoad("loadCourses"))
                    .Render(); %>
            <% });
        })
    ...
    .Render();
%>

Pay special attention to the anchor tag with the span inside of it. Also look at the href attribute and how I have had to specify the grid name and the mode.

I hope this helps you.  If there is another way to do it, I would love to hear.

[Carl]

Using Razor view syntax, and using the latest 2011 Q2 release, the simplest way to use a toolbar that has both templated content and standard command buttons such as the insert button is with the following line of code for the toolbar:

            .ToolBar(tb => tb.Template(@<text><a class="t-button t-grid-add">Add new record</a> <span id="my-status-message"/></text>))

where of course the <span> tag is just a simple example of templated content. However, the insert button may or may not appear identical to other insert buttons added with the standard command:

            .ToolBar(tb => tb.Insert().ButtonType(GridButtonType.Text))

It depends on whether or not you use any master or layout files with CSS styles that affect the coloring of the <a> tag links. In order to assure that the command buttons from the standard commands and the buttons from the templated content have exactly the same appearance, then you must also use the href="#" attribute like so: 

            .ToolBar(tb => tb.Template(@<text><a class="t-button t-grid-add" href="#">Add new record</a> <span id="my-status-message"/></text>))

 
Another alternative that works to assure the same styling and coloring is to use href="?" replacing the # with ? for the value of the attribute. In my experience so far, either way should work but you must use one of them otherwise you will not trigger application of any CSS styles for the <a> tag links that may be called from your master or layout files.

If you would like to see improved support for a better toolbar that enables chaining both standard commands and templated content, please vote for the feature request here: 

http://www.telerik.com/support/pits.aspx#/public/aspnet-mvc/6998   

Thanks for adding your votes to this feature request!!!