Allow editing of column in Row only if it is a new entry

[Lars1603]

Hello everyone,

I have a little problem with editing my grid and I hope you can help me.

I am currently developing a grid (Telerik UI for ASP.NET MVC Grid) in which you can open another grid using a button at the end of the row. In this second grid it is possible to select one or more employees (Inline Editing with a DropDown) for the previous entry. In addition to the actual employee, there is another column where you can set a checkbox to "true" or "false". You can create a new entry with the button on the top left and you can edit or delete it with the two buttons on the right in the line.

Now to my question: My plan is that the name of the employee can only be changed when creating the entry. If you click on Edit, the name should no longer be editable, only the checkbox should be.

How exactly do I do this?

I had the idea to set the field "UserId" to .Editable(false) under .Model. But if I do that, I can neither change the value when creating nor when editing. When creating the entry, the drop-down menu for selecting an employee should be available, but not when editing.

In the attachments I have pictures showing the grid exactly.

Thanks in advance
Lars

 

@(Html.Kendo().Grid(Model)
    .Name("AssignmentsGrid")
    .Columns(c =>
    {
        c.ForeignKey(m => m.UserId, (IEnumerable) ViewData["users"], "Id", "Name").EditorTemplateName("ProjectUserDropdown");
        c.Bound(m => m.Resigned).ClientTemplate("<input type='checkbox' #= Resigned ? checked='checked' :'' # disabled='disabled' />");
        c.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .ToolBar(t => t.Create())
    .Events(events =>
    {
        events.Edit(@<text>function(e) { if(e.model.isNew()) { e.model.set('ProductionOrderId', @ViewData["productionOrderId"]); } else { $('[name="ProjectManagerId"]').attr("readonly", true); }} </text>);
    })
    .DataSource(s => s
        .Ajax()
        .Create(c => c.Action("UserAssignmentAdd", "ProductionOrder", new {area = "Sktcrm"}))
        .Read(r => r.Action("UserAssignmentRead", "ProductionOrder", new {area = "Sktcrm"}).Data(@<text>function(e) { return { productionOrderId: @ViewData["productionOrderId"] }; }</text>))
        .Update(u => u.Action("UserAssignmentUpdate", "ProductionOrder", new {area = "Sktcrm"}))
        .Destroy(d => d.Action("UserAssignmentDelete", "ProductionOrder", new {area = "Sktcrm"}))
        .Model(m =>
        {
            m.Id(model => model.UserId);
            //m.Field(t => t.UserId).Editable(false);
        })
        .ServerOperation(false))
    .Scrollable()
    .Sortable()
    .Filterable())

[Lars1603]

Hello Eyup,

Thank you for your help and implementation.
Unfortunately, the code shown did not lead to success and instead throws a server error.
[The parameter dictionary contains a NULL entry for the "productionOrderId" parameter of type "System.Int64" which does not allow NULL, for the method "UserAssignmentRead(Kendo.Mvc.UI.DataSourceRequest, Int64)". Optional parameters must be reference or nullable types, or declared as optional parameters.]

I suspect that this error is related to a problem in the database structure, because on another site where I also tried this code, it worked as intended.

However, I found another solution.
With the help of the .Editable handler for "UserId" (GUID) I managed to only allow editing if UserId.toString() == "". If a value already exists, the dropdown cannot be edited. (see my code)

@(Html.Kendo().Grid(Model)
    .Name("AssignmentsGrid")
    .Columns(c =>
    {
        c.ForeignKey(m => m.UserId, (IEnumerable) ViewData["users"], "Id", "Name").EditorTemplateName("ProjectUserDropdown").Editable(@<text>function(e) { return e.UserId.toString() == ""; }</text>);
        c.Bound(m => m.Resigned).ClientTemplate("<input type='checkbox' #= Resigned ? checked='checked' :'' # disabled='disabled' />");
        c.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .ToolBar(t => t.Create())
    .Events(events =>
    {
        events.Edit(@<text>function(e) { if(e.model.isNew()) { e.model.set('ProductionOrderId', @ViewData["productionOrderId"]); } else { $('[name="ProjectManagerId"]').attr("readonly", true); }} </text>);
        //events.Edit("gridIdEdit"); 
    })
    .DataSource(s => s
        .Ajax()
        .Create(c => c.Action("UserAssignmentAdd", "ProductionOrder", new {area = "Sktcrm"}))
        .Read(r => r.Action("UserAssignmentRead", "ProductionOrder", new {area = "Sktcrm"}).Data(@<text>function(e) { return { productionOrderId: @ViewData["productionOrderId"] }; }</text>))
        .Update(u => u.Action("UserAssignmentUpdate", "ProductionOrder", new {area = "Sktcrm"}))
        .Destroy(d => d.Action("UserAssignmentDelete", "ProductionOrder", new {area = "Sktcrm"}))
        .Model(m =>
        {
            m.Id(model => model.UserId);
        })
        .ServerOperation(false))
    .Scrollable()
    .Sortable()
    .Filterable())

<script type="text/javascript">
    var gridIdEdit = function(e) {
        if (!e.model.isNew()) {
            // Disable the editor of the "UserId" column when editing data items
            var numeric = e.container.find("input[name=UserId]").data("kendoNumericTextBox");
            numeric.enable(false);
        }
    }
</script>

Nevertheless, thank you very much for your help.

Best regards
Lars

[Eyup]

Hello Lars,

 

Thank you for writing back to us.

Before discussing the technical situation, I would like to clarify something first. It seems that you are using Telerik UI for MVC and Kendo.dll assembly, but I couldn't find an active license for this account regarding the product.

Could you first contact your License Representative of your company and ensure that they add your account as a Licensed Developer? Or they can also contact our Sales department for additional inquiries.

Once this is done and an active license is attached to your account, I can then fully test the mentioned behavior and suggest the proper steps to handle the Grid technical issues.

Thank you for your understanding and cooperation.

 

Regards,
Eyup
Progress Telerik

[Lars1603]

Hello Eyup,

Thank you for your message and sorry for the late reply.
In fact, I assumed my company already had an active license added to my account. After consultation with my license representative, this was not the case because this was forgotten.
Sorry for this incident, I ask for your understanding.

However, the license has now been successfully added.
If everything is fine now, I would be happy if we could now discuss the technical problem.

Best regards
Lars

[Eyup]

Hello Lars,

 

Yes, I can confirm that the license is visible in the system. Thank you for that.

You can achieve this requirement using the .Events(e=>e.Edit("gridEdit")) handler provided by the Grid:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit

You will notice in the first sample provided in the resource above that the grid arguments can tell whether the user is creating a new record or editing an existing one:

 function gridEdit(e) {
    if (!e.model.isNew()) {
      // Disable the editor of the "id" column when editing data items
      var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
      numeric.enable(false);
    }
  }

Feel free to try this implementation and let me know if it helps you.

 

Regards,
Eyup
Progress Telerik

[Eyup]

Hi Lars,

 

I am glad that you have managed to resolve that and thank you for sharing your solution with our community!

 

Regards,
Eyup
Progress Telerik