Multiple overloads for Kendo grid Toolbar?

Question

I'm trying to configure a Kendo grid toolbar to have the Kendo "Create" function within the grid, as well also have custom buttons located within. Here is what I have so far:

   @(Html.Kendo().Grid<VIEWMODELHERE>()
            .Name("UserProfileGrid")
            .Resizable(c => c.Columns(true))
            .Selectable()
            .Filterable()
            .Groupable()
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("UserCreateTemplate"))

            .ToolBar(x => x.Create(), x.Template(@<text>

                    @(Html.Kendo().Button()
                    .Name("ButtonAddUser")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("downloads")
                    .Content("Add User")
                    .Events(e => e.Click("createUser")))

                    @(Html.Kendo().Button()
                    .Name("ButtonEditUser")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("settings")
                    .Content("Edit User")
                    .Events(e => e.Click("Edituser")))

                    @(Html.Kendo().Button()
                    .Name("ButtonRefreshPage")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("Refresh Page")
                    .Events(e => e.Click("RefreshPage")))

                    @(Html.Kendo().Button()
                    .Name("ButtonDeleteUser")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("Delete a user")
                    .Events(e => e.Click("DeleteUser")))

                    @(Html.Kendo().Button()
                    .Name("ButtonAbout")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("About")
                    .Events(e => e.Click("aboutButtonClick")))
            </text>)));

The problem is that I cannot seem to use the lambda functions to create the button correctly because it does not read the create function correctly.

Answer 1

Prashant you are correct! For future users who have this problem, you can do this easily:

<a class='k-button k-grid-add' href='#'>Add new User</a>

so I now have:

  toolbar.Template(@<text>


                    <a class='k-button k-grid-add' href='#'>Add new User</a>

                    @(Html.Kendo().Button()
                    .Name("ButtonEditUser")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("settings")
                    .Content("Edit User")
                    .Events(x => x.Click("Edituser")))

                        @(Html.Kendo().Button()
                    .Name("ButtonRefreshPage")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("Refresh Page")
                    .Events(x => x.Click("RefreshPage")))

                        @(Html.Kendo().Button()
                    .Name("ButtonDeleteUser")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("Delete a user")
                    .Events(x => x.Click("DeleteUser")))

                        @(Html.Kendo().Button()
                    .Name("ButtonAbout")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("About")
                    .Events(x => x.Click("aboutButtonClick")))
                    </text>);})

Maybe not pretty, the blending of razer and html... but it works for our Agile environment.

Answer 2

As you know, you have a syntax problem. Since you are using more than one command inside the Toolbar command (x.Create and x.Template), you need to turn that into a block by wrapping the body in the "{}". After x.Create() goes a ";" to end the line.

.ToolBar(x =>
{
    x.Create();
    x.Template(@<text>

        @(Html.Kendo().Button()
    .Name("ButtonAddUser")
    .HtmlAttributes(new { type = "k-button" })
    .Icon("downloads")
    .Content("Add User")
    .Events(e => e.Click("createUser")))
    </text>);
})