MVC Grid: Toolbar Template AND Insert Button

[Lasse]

How do I add BOTH a toolbar template AND the Insert Command Button to the Grid?
 Calling the .Toolbar() two times like below doesn't work - probably one overwrites the other...

Html.Telerik().Grid<Address>(Model)
  .Name("AddressGrid")
  .DataKeys(keys => keys.Add(c => c.Id))
  .ToolBar(toolBar => toolBar.Template(() =>
    {
      Response.Write("Name: ");
      Response.Write(" <input type=\"text\" id=\"txtAddressSearch\" value=\"\" onkeyup=\"addressSearch()\" class=\"t-widget t-autocomplete t-input\" style=\"width: 200px; margin-top:1px;\" />");
    })
  )
  .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text))
  .Columns(columns =>
  {
    columns.Bound(a => a.Name).Width(120);
    columns.Bound(a => a.Street).Width(150);
    columns.Bound(a => a.ZipCode).Width(60);
    columns.Bound(a => a.City).Width(100);
    columns.Bound(a => a.State).Width(90);
    columns.Bound(a => a.Country).Width(90);
    columns.Command(commands =>
    {
      commands.Edit().ButtonType(GridButtonType.Text);
      commands.Delete().ButtonType(GridButtonType.Text);
    }).Width(175).Title("");
  })
  .DataBinding(dataBinding =>
  {
    dataBinding.Ajax().Select("_AddressGrid", "Address").Enabled(true)
      .Insert("_GridInsert", "Address")
      .Update("_GridSave", "Address")
      .Delete("_GridDelete", "Address");
  })
  .Selectable()
  .Editable(editing => editing.Mode(GridEditMode.InLine))
  .ClientEvents(events => events.OnRowSelect("addressOnRowSelected"))
  .Scrollable(scrolling => scrolling.Enabled(true))
  .Sortable(sorting => sorting.Enabled(true))
  .Pageable(paging => paging.Enabled(true))
  .Filterable(filtering => filtering.Enabled(true))
  .Groupable(grouping => grouping.Enabled(true))
  .Reorderable(reorder => reorder.Columns(true))
  .Footer(true)
  .Render();

[Ryan]

.ToolBar(toolbar => {
    toolbar.Template = "xyz";
    toolbar.Insert();
});

You should only have one .ToolBar call.  See code snippet above.

[Lasse]

That didn't quite answer my question - How do I add BOTH a toolbar template AND the Insert Command Button to the Grid?

[Rosen]

Hi Mikkel,

Indeed, having both ToolBar template and an insert button is not available. However, you can achieve similar functionality by adding a button (with the correct css classes) to the template itself, similar to the following:

.ToolBar(toolBar => toolBar.Template(() =>
{%>
      <a href="#" class="t-grid-action t-button t-state-default t-grid-add">Add new record</a>
       some other content...
<%}))

Please note that this will work only if the grid is populated through ajax binding.

Greetings,
Rosen
the Telerik team

[Troy]

I too would have liked to see a more built-in solution to this. Is this feature  on the product road map? I am sure it is a very common need.

[Carl]

There is a PITS feature request for this issue. Vote for it here:

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

See also discussion here:

http://www.telerik.com/community/forums/aspnet-mvc/grid/both-toolbar-template-and-toolbar-commands-on-the-same-grid-possible.aspx#1727355

[Kien]

nice, thanks Rosen