[Solved] Grid Editor not working as expected

[Shreesh]

I want to use GridEditmode as Popup. I want to hide some of the fields and some to be disabled while editing in PopUP. ScaffoldColumn works properly. The problem is with Kendo grid options.
I found following things are not working:
- .Events for edit event is not fired
- Field did not become Non-editable. model.Field ().Editable(false) is not working
- how to change the field name (can we give title) shown in the popUp?

Please let me know the solution. I have given the Grid code along with model below:



  @{Html.Kendo().Grid<ERPLiteModelsServices.Areas.Sales.Models.Product>()
            .Name("KendoGrid1")
            .Columns(columns =>
            {
                
                columns.Bound(c => c.ItemName).Title("ProductName").Width("8%");
                columns.Bound(c => c.Description).Title("Description").Width("20%");
                columns.Bound(c => c.ProductOrServiceName).Title("Product").Width("8%");
                columns.Bound(c => c.CurrentPrice).Title("CurrentPrice").Width("15%");
                columns.Command(commands =>
                {
                    commands.Edit();
                    commands.Destroy();
                }).Title("Commands").Width("16%");
                    

            })
            
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            
            //.Events(e => e.Edit("HidePopupFields"))
            .Pageable()
            .Filterable()
            .Sortable()
            .Resizable(config =>
                {
                    config.Columns(true);

                })
            .Reorderable(config =>
                {
                    config.Columns(true);
                })
            .Groupable()
            
            .DataSource(source => source
               // .Server()
               .Ajax()
              // .Events(e => e.Change("HidePopupFields"))
             
               .Model(model =>
                   {
                       model.Id(m => m.ItemId);
                       
                       model.Field(m => m.ProductOrServiceName).DefaultValue("Product").Editable(false);
                       
                   })
                   
               .Read(read => read.Action("ReadList", "Products", new { area = "Sales" }))
               .Create(create => create.Action("Insert", "Products", new { area = "Sales" }))
               .Update(update => update.Action("Update", "Products", new { area = "Sales" }))
               .Destroy(update => update.Action("Delete", "Products", new { area = "Sales" })) )
            .Render();
            
                
            }
                
            
    


</div>



}

<script >
    function HidePopupFields(e) {
        alert("HidePopUp");
        $("#ItemId").hide();
        $("label[for='ItemId']").hide();
    }


    $("#KendoGrid1").kendoGrid({
        edit: function (e) {
            e.container.find("input:first").hide();
        }
    });

</script>

Model class:
public class Item
    {
        public const int PRODUCT = 1;
        public const int SERVICE = 2;
       
        private long _ItemId = 0;

        [ScaffoldColumn(false)]
        public long ItemId
        {
            get { return _ItemId; }
            set { _ItemId = value; }

        }
        
        private int _ProductOrServiceId = PRODUCT;
        [ScaffoldColumn(false)]
        public int ProductOrServiceId
        {
            get { return _ProductOrServiceId; }
            set { _ProductOrServiceId = value; }
        }

        public string ProductOrServiceName
        {
            get { return _ProductOrServiceId == PRODUCT ? "Product" : "Service"; }
        }

        private string _ItemName = string.Empty;
        public string ItemName
        {
            get { return _ItemName; }
            set { _ItemName = value; }
        }

        private string _Description = string.Empty;
        public string Description
        {
            get { return _Description; }
            set { _Description = value; }
        }
}

[Alexander Popov]

Hello Shreesh,

In the current scenario I would recommend using a custom Editor Template instead. For example: 

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("testTemplate"))

...
Views\Shared\EditorTemplates\testTemplate.cshtm:



@model ERPLiteModelsServices.Areas.Sales.Models.Product

 

@Html.EditorFor(x => x.ItemName);
@Html.Kendo().NumericTextBoxFor(x=>x.CurrentPrice)


...

That would allow you to customize the Edit popup so it fits your requirements.
Lastly, I did not found any reason for the Edit event to not be triggered. Could you please confirm that by adding an alert() function in the handler?


Regards,
Alexander Popov
Telerik