Disable column in popup grid

[Machriza]

Hi,

 

I have some question,how to disable column in popup grid.I have code :

View:

@model DevRedsMk3.Models.NpvCalculation

<style>
    .k-grid {
        font-size: 12px;
    }
</style>

<div>
    @(Html.Kendo().Grid<DevRedsMk3.Models.NpvCalculation>()
        .Name("NpvCalculation")
        .Columns(columns =>
        {
            columns.Bound(p => p.NpvCalculationId).Hidden();
            columns.ForeignKey(p => p.TransactionId, (System.Collections.IEnumerable)ViewData["custTrans"], "TransactionId", "TransactionId").Title("TransactionId ID");
            columns.Bound(p => p.LastPayment).Title("Last Payment");
            columns.Bound(p => p.OutstandingAmount).Title("Outstanding Amount");
            columns.Bound(p => p.Installment).Title("Installment");
            columns.Bound(p => p.Interest).Title("Interest");//Title("Interest").Editable(false)

            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
            columns.Command(c => c.Custom("OK").Text("OK").Click("OK"));
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
        })
        .Events(e => {  e.DataBinding("onchangeevent"); })
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Scrollable(s => s.Height(570))
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(datasource => datasource
             .Ajax()
             .ServerOperation(false)
             .Model(model =>
             {
                 model.Id(p => p.NpvCalculationId);

                 model.Field(p => p.Interest).Editable(false);

             })

             .Read(read => read.Action("List", "NpvCalculations"))
             .Update(update => update.Action("Update", "NpvCalculations"))
             .Create(create => create.Action("Create", "NpvCalculations"))
             .Destroy(destroy => destroy.Action("Destroy", "NpvCalculations"))

        )
    )

    <script type="text/javascript">
        function OK(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            
            $.ajax({
                url: "/NpvCalculations/GenerateNpvBaru",
                //data: dataItem.id,
                //data: { 'TransactionId': dataItem.TransactionId },
                data: { TransactionId: dataItem.TransactionId },
                success: function (response) {
                    //$('#viewDetails').html(response);
                    //alert('Approve done...');
                }
            });
        }
    </script>

    <script>
        function onchangeevent() {
            $('#OutstandingAmount').val("10000");
            //document.getElementById("OutstandingAmount").value = "10000";
        }

    </script>

</div>

I want in field Interest column disable,i have write code  => model.Field(p => p.Interest).Editable(false) but it did not work.

 

Can you help me.

 

Thanks,

 

Regadrs,

 

Machriza

 

[Viktor Tachev]

Hi Machriza,

By default when PopUp edit mode is used for the Grid an EditorForModel will be used. This will generate an editor for each field in the Model. 

In order to customize the popup you should define an editor template. Check out the example below that illustrates the approach for implementing the feature. This way you can define editors only for some of the fields. 

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor

Regards,
Viktor Tachev
Progress Telerik

[Joel]

You gave an example that is not .NET Core.  I'm attempting to get a PopUp to work but it seems the default PopUp continues to get posted.  Here is my Grid:

@(Html.Kendo().Grid<GsiPortal.Models.Customer>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.Name);
          columns.Bound(p => p.DisplayName).Title("Display Name");
          columns.Bound(p => p.AddTimestamp).Format("{0:MM/dd/yyyy}");
          columns.Command(command => command.Edit()).MinResizableWidth(75);
          columns.Command(command => command.Destroy()).MinResizableWidth(75);
      })
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          //toolbar.Save();        //Enable the Add New Record, Save Changes and Discard Changes buttons on the toolbar
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomerEdit")) //Turn on the inline cell editing by setting
      .Pageable()
      .Selectable(select => select.Mode(GridSelectionMode.Single))
      .PersistSelection(true)
      .Navigatable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .HtmlAttributes(new { style = "height:550px;" })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .ServerOperation(false)
          .Events(events => events.Error("error_handler"))
          .Create("CreateJson", "Customers")
          .Read("IndexJson", "Customers")
          .Update("EditJson", "Customers")
          .Destroy("DeleteJson", "Customers")
      ))

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

 

I previously had the .Model defined that disabled the Id and Timestamp fields.  But, they weren't disabled.  That would be the best scenario for telerik... just to get that working.  It looked fine for in-line but it doesn't get applied to PopUp.

Now, I have the above defined with an EditorTemplates folder inside the Customers folder (see picture).  The CustomerEdit.cshtml looks like this:

@model GsiPortal.Models.Customer

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
    <label asp-for="Name" class="control-label"></label>
    <input asp-for="Name" class="form-control" />
    <span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="DisplayName" class="control-label"></label>
    <input asp-for="DisplayName" class="form-control" />
    <span asp-validation-for="DisplayName" class="text-danger"></span>
</div>

 

How can I get this working for ASP.NET Core 2.1?

Thanks,

Joel

 

 

[Joel]

Once again, because a .NET Core question was asked and an MVC provided answer (pictured) doesn't apply.  I found on another post that the PopUp cshtml must be defined under the Shared/EditorTemplates folder.

[Viktor Tachev]

Hello Joel,

Indeed when using .NET Core the custom popup template should be placed in ~/Views/Shared/EditorTemplates folder. I apologize for not explaining that in the previous post. 

With that said, I updated the example so that it should not cause such confusion in the future. 


Regards,
Viktor Tachev
Progress Telerik