kendo-ui - mvc - kendo grid pageable jquery
Cómo actualizar la fila de Kendo Grid desde la ventana (3)
La puesta en marcha:
- Proyecto ASP MVC
- Kendo Grid en una vista a través de Razor
- Comando personalizado de columna, llamadas ...
- JavaScript que abre la ventana de Kendo con refresh () URL a la vista parcial como formulario personalizado
- El formulario tiene un tipo de entrada = botón que llama a JavaScript
La barrera:
¿Cómo actualizar la fila (dataItem?) De Grid con el nuevo modelo (desde la ventana / formulario javascript). No puedo obtener un identificador para segmentar DataItem. Seleccionar () no es aplicable aquí porque la fila no está seleccionada. En cambio, un evento de botón personalizado abre la ventana de cuadrícula modal que tiene los campos y comandos para actualizar, cerrar, etc.
Podría usar el Edit de Grid nativo, pero lo que estoy tratando de lograr es una forma de tener una personalización completa de una ventana emergente que muestra una vista parcial que puede usarse para presentar acciones de CRUD.
Por cierto: La razón de esto es optimizar el espacio en una fila de la grilla que normalmente se consumiría con botones innecesarios para la edición y eliminación, establecidos mediante el uso de las propiedades de control nativo de Kendo. Creo que esto se presenta mejor en una vista de detalles separada, como una ventana de rejilla modelo, en mi caso.
Nuevamente, al no usar Seleccionar (), no puedo entender cómo obtener un identificador, dentro de la ventana / formulario JavaScript, a la fila de la cuadrícula desde la que se invocó, a los fines de actualizar la fila con los datos del nuevo modelo.
Gracias por tu tiempo.
Esta demostración muestra cómo obtener la referencia del elemento de datos vinculado a la columna donde se presiona la tecla de comando personalizada, y muestra la información respectiva en una ventana. También puede usar el elemento de datos para actualizar la Cuadrícula:
http://demos.telerik.com/kendo-ui/grid/custom-command
Aquí hay un ejemplo también:
http://dojo.telerik.com/abUHI Eche un vistazo a la función showDetails
Mis descubrimientos desde que publiqué esto ...
Soy nuevo con el desarrollo de presentaciones web, por lo tanto, captar la distinción entre los elementos del lado del cliente y del servidor y el alcance de ese punto clave. Además, aprender los diversos detalles de la rejilla Kendo también fue útil.
Continuando con mi solución actual ...
Obtener un control sobre el elemento de la fila seleccionado desde el evento de comando personalizado no hecho con Seleccionar () porque la fila no está siendo seleccionada. Como se indicó anteriormente en otras publicaciones, esto fue solo una parte del trabajo necesario. En el JavaScript del controlador de eventos del comando personalizado (se ve de nuevo en la solución completa a continuación):
var detailDataItem = this.dataItem($(e.target).closest("tr"));
MI SOLUCIÓN:
En la ventana primaria que aloja la Kendo Grid:
@* Declare modal Kendo Grid window control *@
@helper ClientGrid()
{
@(Html.Kendo().Grid<Purevision.Models.Person>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.FirstName).Width(100);
columns.Bound(c => c.LastName).Width(130);
columns.Bound(c => c.Email).Width(140);
columns.Bound(c => c.Phone).ClientTemplate("#= (data.Phone) ? formatPhoneNumber(data.Phone) : ''none'' #").Width(130);
columns.Bound(c => c.Comments).Hidden().Width(140);
columns.Bound(c => c.UserId).Hidden();
columns.Bound(c => c.Id).Hidden();
columns.Command(command =>
{
command.Custom("Archive").Click("archiveCommand");
command.Custom("Detail").Click("detailCommand");
}).Width(90);
})
.ToolBar(toolbar => toolbar.Create())
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Events(e => e.Change("onChange").DataBound("onDataBound").DataBinding("onDataBinding"))
.Scrollable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Edit"))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.Id))
.Create(create => create.Action("People_Create", "Clients"))
.Read(read => read.Action("People_Read", "Clients"))
.Update(update => update.Action("People_Update", "Clients"))
.Destroy(update => update.Action("People_Destroy", "Clients"))
)
)
}
@* Declare modal Kendo Grid window control; MUST be named ''detailWindow'' as referenced by partial view script *@
@(Html.Kendo().Window().Name("detailWindow")
.Title("Client Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(400)
.Content(@<text>
@Html.Partial("_edit", new Person())
</text>
)
<script type="text/javascript">
function detailCommand(e) {
var window = $("#detailWindow");
var kWnd = window.data("kendoWindow");
var data = this.dataItem($(e.target).closest("tr"));
e.preventDefault();
kendo.bind(window, data);
kWnd.center().open();
}
</script>
En la vista parcial _edit.cshtml se presenta en la ventana modal de Kendo:
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-4">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
<input type="button" id="updateButton" value="Update2" class="btn btn-default" />
Convierta el evento de botón durante el formulario listo, que obtiene un control del control de cuadrícula que aún está en el alcance en el lado del cliente:
<script type="text/javascript">
// as mentioned by Tarek, bind each control''s value attribute
$("#detailWindow [name]").each(function () {
var name = $(this).attr("name");
$(this).attr("data-bind", "value:" + name );
});
$(document).ready(function (e) {
var window = $("#detailWindow");
var grid = $("#grid").data("kendoGrid");
$("#updateButton").click(function (e) {
grid.saveChanges();
window.data("kendoWindow").close();
});
});
</script>
Estoy abierto a sugerencias de refactorización aquí. Parece que hay mucha codificación del lado del cliente en JavaScript para realizar actividad personalizada contra la Cuadrícula de Kendo. (suspiro) Sin embargo, estoy feliz de tener la versatilidad. (sonreír)
Requería mucha reedición para poder obtener esta respuesta útil. Házmelo saber. ;)
REFERENCIAS: Telerik Forums / Kendo UI Forum / Grid / ¿Cómo actualiza Grid su dataSource?
Usando su método, usted está haciendo una solicitud doble, así que sugiero: Al editar, abra una ventana enlazada a la fila a través de MVVM:
function edit(e) {
//get the row which belongs to clicked edit button
var item = this.dataItem($(e.currentTarget).closest("tr"));
//bind the window to the item via mvvm http://docs.telerik.com/kendo-ui/framework/mvvm/overview
kendo.bind($("#window"), item);
}
La ventana contiene una plantilla de editor (Shared / EditorTemplates / Client.cshtml):
@(Html.Kendo().Window().Name("window")
.Title("Client Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(400)
.Content(@<text>
@Html.Partial("EditorTemplates/Client", new Product())
</text>))
//Put in every element in the window data-bind="value:INPUT NAME"
//<input name="price" /> become <input name="price" data-bind="value: price" />
$("#window [name]").each(function () {
var name = $(this).attr("name")
$(this).attr("data-bind", "value:" + name );
});
La plantilla del editor:
@model Product
@Html.TextBoxFor(m => m.Name)