This is a migrated thread and some comments may be shown as answers.

Disable column in popup grid

4 Answers 286 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Machriza
Top achievements
Rank 1
Machriza asked on 17 Nov 2017, 02:28 AM

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

 

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 21 Nov 2017, 02:13 PM
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. 



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 30 Nov 2018, 07:49 PM

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

 

 

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 30 Nov 2018, 08:10 PM
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.
0
Viktor Tachev
Telerik team
answered on 05 Dec 2018, 12:17 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Machriza
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or