kendo-ui - example - kendo ui asp mvc

Cómo agregar una plantilla a una barra de herramientas de la red Kendo

Question

Estoy tratando de agregar una plantilla personalizada a la cuadrícula Kendo MVC. Mi plantilla debe contener 2 cosas

1. Crear botón para agregar nuevo registro a la grilla
2. Cuadro de autocompletar para filtrar los datos en la cuadrícula.

Estoy intentando el siguiente código:

.ToolBar(toolbar =>
{
    toolbar.Template(@<text>
                <div class="toolbar">
                    <label class="category-label" for="category">Filter by name:</label>
                    @(Html.Kendo().AutoComplete()
                            .Name("employees")
                            .DataTextField("empName")
                                      .Filter("contains")
          .MinLength(3)
          .Events(e => e.Change("nameChange"))
                            .DataSource(ds =>
                            {
                                ds.Read("FilteringList", "Employee");
                            })

                        )
                </div>
                </text>);
    toolbar.Create().Text("New Record");

})

Pero esto no está funcionando. Solo puedo ver el cuadro de autocompletar.

¿Alguna idea sobre cómo puedo cumplir mis requisitos?

Answer 1

Retire la línea debajo

toolbar.Create().Text("New Record");

de la sección ToolBar y agrega el botón dentro de la plantilla. Por favor vea el siguiente código:

.ToolBar(toolbar =>
{
toolbar.Template(@<text>
            <div class="toolbar">
                <a class="k-button k-button-icontext k-grid-add" href="/YourControllerName/YouCreateActionResultJsonName?grdSearch-mode=insert">New Record</a>
                <label class="category-label" for="category">Filter by name:</label>
                @(Html.Kendo().AutoComplete()
                        .Name("employees")
                        .DataTextField("empName")
                                  .Filter("contains")
      .MinLength(3)
      .Events(e => e.Change("nameChange"))
                        .DataSource(ds =>
                        {
                            ds.Read("FilteringList", "Employee");
                        })

                    )
            </div>
            </text>);
})

Answer 2

La respuesta de Nitin Mall se puede simplificar reemplazando

<a class="k-button k-button-icontext k-grid-add"   
href="/YourControllerName/YouCreateActionResultJsonName?grdSearch-mode=insert">
New Record</a>

con

<a class=''k-button k-button-icontext k-grid-add'' 
href=''#''><span class=''k-icon k-add''></span>Add new record</a>

Esto funciona porque la cuadrícula usa el delegado de jquery para adjuntar el controlador de eventos de clic de la cuadrícula que llama al método AddRow para el elemento con la clase "k-grid-add"