Telerik Grid: обрабатывать событие нажатия на толстую кнопку в пользовательском шаблоне, открытом по команде редактирования - PullRequest
Новая
       51

Telerik Grid: обрабатывать событие нажатия на толстую кнопку в пользовательском шаблоне, открытом по команде редактирования

0 голосов
/ 31 января 2020

Я использую сетку Telerik в представлении ASP. NET MVC. Я совершенно новичок в Telerik.

Моя сетка Telerik выглядит следующим образом: 

@(Html.Telerik().Grid<MyDTOs.DetalleDTO>()
                        .Name("GridActividadesOferta")
                        .DataKeys(keys =>
                        {
                            keys.Add(d => d.indiceInterno).RouteKey("indiceInterno");
                        })
                        .Columns(columns =>
                        {
                            columns.Bound(cl => cl.nombreActividad).Title(Inspecciones.lblGridActividad.ToUpper()).ReadOnly(true).HtmlAttributes(new { @class = "actividad-column" });
                            columns.Bound(cl => cl.nombreSubActividad).Title(Inspecciones.lblGridSubActividad.ToUpper()).ReadOnly(true);
                            columns.Bound(cl => cl.articuloId).Title(Inspecciones.lblGridArticulo.ToUpper()).ReadOnly(true);
                            columns.Bound(cl => cl.CCAA_Expediente).Title("Expediente".ToUpper()).ReadOnly(false).Width(100);
                            columns.Bound(cl => cl.CCAA_Instalacion).Title("Instalación".ToUpper()).ReadOnly(false).Width(100);
                            columns.Bound(cl => cl.importeArticulo).Title("Importe".ToUpper()).ReadOnly(false).Width(100).Format("{0:c}").ClientFooterTemplate("<#= $.telerik.formatString('Total factura') #>");
                            columns.Bound(cl => cl.importeTasa).Title(Resources.Inspecciones.lblGridImporteTasa.ToUpper()).ReadOnly(false).Aggregate(aggr => aggr.Sum().Count())
                                    .Width(100)
                                    .Format("{0:c}")
                                //.ClientFooterTemplate("<#= $.telerik.formatString('{0:c}'," + Model.totalFactura + ")#>")
                                .ClientFooterTemplate("<#= '<span id=spanTotalFactura>' + $.telerik.formatString('{0:c}'," + Model.totalFactura + ") + '</span>' #>")
                                    .Width(100)
                                    .Format("{0:c}");
                            columns.Command(commands =>
                            {
                                commands.Edit().ButtonType(GridButtonType.Image);
                                commands.Delete().ButtonType(GridButtonType.Image);
                            }).Width(100).Visible(!ViewBag.readOnly);
                        })
                        .DataBinding(dataBinding =>
                        {
                            dataBinding.Ajax()
                                .Select("SelectGridVacias1", "Expedientes", new { ofertaComercialId = @Model.ofertaComercialId })
                                .Update("UpdateGridActividadesRegularizables1", "Expedientes", new { ofertaComercialId = @Model.ofertaComercialId })
                                .Delete("DeleteGridActividadesRegularizables1", "Expedientes", new { ofertaComercialId = @Model.ofertaComercialId })
                                ;
                        })
                        .ClientEvents(events => events.OnDataBinding("onDataBindingArticulosGrid").OnDataBound("onDataBoundWrapper").OnEdit("onEditDatosArticulo")
                            .OnRowDataBound("onRowDataBound").OnDelete("onDelete").OnError("onErrorGrid"))
                        .HtmlAttributes(new { @class = "center-columns" })
                        .Selectable()
                        .Editable(editing =>
                        {
                            editing
                                .Mode(GridEditMode.PopUp)
                                .TemplateName("DatosArticuloTemplate1")
                                .InsertRowPosition(GridInsertRowPosition.Top);
                        })
            )

Как вы можете видеть выше, у меня определены две команды, Edit и Delete. Кнопка редактирования имеет собственный шаблон, указанный в «.Editable». Этот шаблон называется «DatosArticuloTemplate1» и выглядит следующим образом: 

<div style="width:800px">
    <div class="row-fluid">
        <div class="span12">
            @Html.Label("nombreArticulo", "Descripcion actual".ToUpper())
            @Html.TextAreaFor(m => m.nombreArticuloFacturacion, new { style = string.Format("width:{0}px; ", 800) })
            @Html.ValidationMessage("instalacionId")
        </div>
    </div>
    <div class="row-fluid">
        <div class="span2">
            @Html.Label("importeArticulo", "Importe".ToUpper())
            @(Html.Telerik().NumericTextBoxFor(model => model.importeArticulo).EmptyMessage("Importe").DecimalDigits(2).InputHtmlAttributes(new { style = "width:90px;" }))
        </div>
        <div class="span3">
            @Html.Label("importeTasa", "Importe de tasa".ToUpper())
            @(Html.Telerik().NumericTextBoxFor(model => model.importeTasa).EmptyMessage("Importe").DecimalDigits(2).InputHtmlAttributes(new { style = "width:90px;" }).Value(0))
        </div>
        <div class="span7">
            @Html.Label("unidades", "Instalación".ToUpper())
            @{Html.RenderAction("DropDownListInstalaciones", "SeleccionarInstalacionButton",
                        new
                        {
                            area = "",
                            clienteId = Model.OfertaComercial == null ? "" : Model.OfertaComercial.clienteId,
                            actividadId = Model.actividadId,
                            subActividadId = Model.subActividadId,
                            sociedadId = Model.OfertaComercial == null ? "" : Model.OfertaComercial.sociedadId,
                            dataBindTo = "instalacionId"
                        });
            }
        </div>
    </div>
</div>

Этот пользовательский шаблон выглядит следующим образом:

enter image description here

Как видно из нижнего левого угла пользовательского шаблона, есть две кнопки: одна для подтверждения введенных значений (толстая кнопка), а другая для отмены. Эти кнопки от Telerik.

Теперь я пытаюсь обработать событие нажатия на толстую кнопку. В событии клика я хочу проверить значение, введенное для поля «ИМПОРТ». Если значение, введенное для этого поля, равно 0, тогда я хочу открыть модальное окно javascript. Это окно предупреждения должно уведомлять пользователя о том, что для этого поля должно быть введено значение больше 0. Кроме того, пользовательское окно шаблона «DatosArticuloTemplate1» не должно закрываться, пока пользователь не введет правильное значение (значение> 0) в поле «ИМПОРТ». Так как я могу это сделать?

...