Блог

У нас есть сетка Kendo со встроенным редактированием, допустим, у нас есть две строки, доступные в сетке. Мы редактируем первую строку и, не сохраняя эту строку, редактируем другую доступную строку (вторая строка). В этом случае для действия первой строки будут доступны три кнопки: Редактировать, Отмена, Undo.

У нас есть поле Id, доступное в модели для этой сетки. И у нас есть функция на стороне клиента для всех событий crud для выполнения функции раскраски в этой сетке.

Код сетки доступен ниже :

 @(Html.Kendo().Grid<ProviderHealthPlanGridDTO>(Model.NewModel.ProviderHealthPlans)
.Name("healthplansGrid")
.Columns(cols =>
{
    cols.Bound(p => p.HealthPlanId).Hidden();
    cols.Bound(p => p.PendingChangeId).Hidden();
    cols.Bound(p => p.ProviderProfileFormFieldOptionSetting).HtmlAttributes(new { @class = "ProviderProfileFormFieldOptionSetting" }).Hidden();
    cols.Bound(p => p.ProviderId).Hidden();
    cols.Bound(p => p.HealthPlanProviderId).Hidden();
    cols.Bound(p => p.IsRemoved).Hidden();
    cols.Bound(p => p.IsAdded).Hidden();
    cols.Bound(p => p.IsChanged).Hidden();
    cols.Bound(p => p.HealthPlanCompanyId).Hidden();
    cols.Bound(p => p.HealthPlanCompanyName).Width("20%").Title("Company Name").EditorTemplateName("HealthPlanCompanyAutoComplete").Sortable(true)
        .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)))
        .HtmlAttributes(new { @class = "HealthPlanCompanyName" }).ClientTemplate
        (
            @"<span>#: (HealthPlanCompanyName != null) ? HealthPlanCompanyName : '' #</span>"
        );

    cols.Bound(p => p.HealthPlanName).Width("20%").Title("Health Plan Name").EditorTemplateName("HealthPlanAutoComplete").Sortable(true)
        .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)))
        .HtmlAttributes(new { @class = "HealthPlanName" }).ClientTemplate
        (
            @"<span>#: HealthPlanName #</span>"
        );
    cols.Bound(p => p.InitialDate).Title("Initial Date").HtmlAttributes(new { @class = "InitialDate" }).ClientTemplate("#= (InitialDate != null) ? kendo.toString(InitialDate, "MM/dd/yyyy") : '' #").EditorTemplateName("Date").Width("10%");
    cols.Bound(p => p.MostRecentDate).Title("Most Recent Date").HtmlAttributes(new { @class = "MostRecentDate" }).ClientTemplate("#= (MostRecentDate != null) ? kendo.toString(MostRecentDate, "MM/dd/yyyy") : '' #").EditorTemplateName("Date").Width("10%");
    cols.Bound(p => p.NextActionDate).Title("Next Action Date").HtmlAttributes(new { @class = "NextActionDate" }).ClientTemplate("#= (NextActionDate != null) ? kendo.toString(NextActionDate, "MM/dd/yyyy") : '' #").EditorTemplateName("Date").Width("10%");
    cols.Bound(p => p.TerminationDate).Title("Termination Date").HtmlAttributes(new { @class = "TerminationDate" }).ClientTemplate("#= (TerminationDate != null) ? kendo.toString(TerminationDate, "MM/dd/yyyy") : '' #").EditorTemplateName("Date").Width("10%");
    cols.Bound(p => p.TierModel.Value).Width("5%")
                    .EditorTemplateName("DDL_TierModel")
                    .Title("Tier").HtmlAttributes(new { @class = "TierModel" });
    cols.Bound(p => p.AcceptingOptionModel.Value).Width("15%")
                    .EditorTemplateName("DDL_AcceptingNewPatient")
                    .Title("Accepting Patients").HtmlAttributes(new { @class = "AcceptingOptionModel" });
    cols.Command(command =>
    {
        command.Edit().UpdateText("Save").HtmlAttributes(new { @class = !Model.HealthPlansFormField.IsEditOnLanding ? "k-state-disabled" : "", @style = !Model.HealthPlansFormField.IsEditOnLanding ? "pointer-events: none;" : "" });
        command.Custom("Undo").Click("onUndoHealthPlanRemove").HtmlAttributes(new { @class = !Model.HealthPlansFormField.IsEditOnLanding ? "k-state-disabled" : "", @style = !Model.HealthPlansFormField.IsEditOnLanding ? "pointer-events: none;" : "" });
        command.Custom("Remove").Click("onHealthPlanRemove").HtmlAttributes(new { @class = !Model.HealthPlansFormField.IsEditOnLanding ? "k-state-disabled" : "", @style = !Model.HealthPlansFormField.IsEditOnLanding ? "pointer-events: none;" : "" });
    }).Title("Action").Width("20%");
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable => pageable
    .Refresh(true))
.Scrollable()
//.HtmlAttributes(new { style = "height:550px;" })
.Events(events =>
{
    events.DataBound("onHealthPlanGridDataBound");
    events.Edit("onEditHealthPlanGridRow");
    events.Save("onSaveHealthPlanGridRow");
    events.Cancel("onCancelHealthPlanGridRow");
    events.Remove("onHealthPlanRemove");
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(ev => ev.RequestEnd("onRequestEnd"))
    .PageSize(10)
    .ServerOperation(false)
    .Model(model =>
    {
        model.Id(p => p.HealthPlanId);
        model.Field(p => p.TierModel).DefaultValue(defaultTier);
        model.Field(p => p.AcceptingOptionModel).DefaultValue(defaultAcceptingOption);
        //model.Field(p => p.TierModel).DefaultValue(new TierModelDTO());
        //model.Field(p => p.AcceptingOptionModel).DefaultValue(new AcceptingNewPatientModelDTO());
    })
    .Create(create => create.Action("AddHealthPlan", "ProviderUpdate").Data("sendAntiForgery"))
    .Update(update => update.Action("UpdateHealthPlan", "ProviderUpdate").Data("sendAntiForgery"))
))
  

Пожалуйста, предложите и дайте мне знать, нужны ли вам также фрагменты кода на стороне клиента.

Ниже приведен снимок :