Foreign key column disabled in edit mode but editable in add mode

[Vlad]

Hi,
I have a Kendo grid that looks like :
@(Html.Kendo().Grid<UserHolidayRightDto>()
.Name("gridHoliday")
.ToolBar(tool=>tool.Create())
 
.Columns(columns =>
{
columns.Bound(p => p.Date).Format("{0:MM/dd/yyyy}").Title("Date added");
columns.Bound(p => p.ValidForYear).Title("For year");
columns.ForeignKey(p => p.RightTypeId, (System.Collections.IEnumerable)@Model.HolidayRightsView, "Id", "Name").Title("Right type").HtmlAttributes(new{@Id="HolidayRightsDropDown"});
columns.Bound(p => p.Days).Title("Days");
columns.Bound(p => p.Comment).Title("Comment");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
})
.Scrollable(s=>s.Height(200))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(e=>e.Edit("edit"))
.Events(e=>e.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
// .Batch(true)
// .ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.ValidForYear).Editable(false).DefaultValue(@DateTime.Now.Year);
model.Field(p => p.Date).Editable(false);
})
.Events(e=>e.RequestEnd("UpdateWindow"))
.Read(read=>read.Action("ReadData","HolidayRights",new {id=@Model.Employee.PersonID}))
.Create(update => update.Action("EditingInline_Create", "HolidayRights",new {personId=@Model.Employee.PersonID}))
.Update(update => update.Action("EditingInline_Update", "HolidayRights"))
.Destroy(update => update.Action("EditingInline_Destroy", "HolidayRights"))
 ))

I would like to make my foreign key column editable in create mode and disabled in edit mode.  I've tried solutions like :
$("#HolidayRightsDropDown").attr("readonly", true);

and
var d = document.getElementById("HolidayRightsDropDown");
 d.disabled = true;

but without success.

Any suggestions?

[Jayesh Goyani]

Hello,

Please replace below function in to demo.

function onGridEdit(arg) {
        // i have assumed that newly addded row have ID field's value is Zero.
        if (arg.model.ID) {
            var _id = parseInt(arg.model.ID);
            if (_id != 0) {
                if (arg.container.find("input[name=FID]").length > 0) {

                    $("#MyGrid").data("kendoGrid").closeCell(arg.container)

                }
            }
        }

    }

you can download full code in below link.

Set column editable mode based on another column value changes in kendo UI

Thanks,
Jayesh Goyani

[Vlad]

Hi,

Thank you for your reply. Now I receive the following error:  "Unable to get value of the property 'template': object is null or undefined". I see that you are using InCell editing and I use InLine editing.
 
Do you think that this is the problem?

Thank you,
Vlad

[Jayesh Goyani]

Hello,

I am not able to reproduce such type of issue. By using below code.

VIEW

<div>
    @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Name);
            columns.Bound(p => p.IsActive);
            columns.ForeignKey(p => p.FID, (System.Collections.IEnumerable)ViewData["TestList"], "Value", "Text");

        })
                .ToolBar(tool => tool.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Events(e => e.Edit("onGridEdit"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("errorHandler"))
            .Model(model =>
            {
                model.Id(p => p.ID);
                model.Field(p => p.ID).Editable(false);
            })
        .Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
        .Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
                .Create(update => update.Action("ForeignKeyColumn_Update", "Home"))
        )
    )
</div>

<script type="text/javascript">

    function errorHandler(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);
        }
    }

    function onGridEdit(arg) {
        // i have assumed that newly addded row have ID field's value is Zero.
        if (arg.model.ID) {
            var _id = parseInt(arg.model.ID);
            if (_id != 0) {
                if (arg.container.find("input[name=FID]").length > 0) {

                    $("#MyGrid").data("kendoGrid").closeCell(arg.container)

                }
            }
        }

    }
</script>

MODEL

public class TestModels
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public int FID { get; set; }
    }

CONTROLLER

public ActionResult Index()
        {

            List<SelectListItem> items = new List<SelectListItem>();

            for (int i = 1; i < 6; i++)
            {
                SelectListItem item = new SelectListItem();
                item.Text = "text" + i.ToString();
                item.Value = i.ToString();
                items.Add(item);
            }

            ViewData["TestList"] = items;

            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

public ActionResult ForeignKeyColumn_Read([DataSourceRequest] DataSourceRequest request)
        {
            List<TestModels> models = new List<TestModels>();

            for (int i = 1; i < 6; i++)
            {
                TestModels model = new TestModels();
                model.ID = i;
                model.Name = "Name" + i;

                if (i % 2 == 0)
                {
                    model.IsActive = true;
                    model.FID = i;
                }

                models.Add(model);
            }

            return Json(models.ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ForeignKeyColumn_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<TestModels> tests)
        {
            if (tests != null && ModelState.IsValid)
            {
                // Save/Update logic comes here
            }

            return Json(ModelState.ToDataSourceResult());
        }

Let me know if any concern.

Thanks,
Jayesh Goyani

[Vlad]

Sorry, but I receive the same error even if I run your code. I'm using the following scripts:
jquery-1.9.1.js, kendo.all.min.js, kendo.aspnetmvc.min.js, and I receive the error in kendo.all.min.js

[Jayesh Goyani]

Hello,

Sorry but Can you please download demo from below link and check in to this issue?

https://skydrive.live.com/redir?resid=977B16A5E89A5236!107&authkey=!AIA_AIL-NfmBPBg

Thanks,
Jayesh Goyani

[Vlad]

Hi,
I still receive the same error when I try to call closeCell function.

Regards,
Vlad Cristea

[Jayesh Goyani]

Hello,

Can you please submit your project?

Thanks,
Jayesh Goyani