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

5 Answers 375 Views
DropDownList Editor Grid
Lars1603
Top achievements
Rank 1
Iron
Lars1603 asked on 22 Dec 2022, 08:54 AM

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())


5 Answers, 1 is accepted

Sort by
0
Accepted
Lars1603
Top achievements
Rank 1
Iron
answered on 26 Jan 2023, 12:30 PM
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
0
Eyup
Telerik team
answered on 26 Dec 2022, 03:02 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Lars1603
Top achievements
Rank 1
Iron
answered on 25 Jan 2023, 07:35 AM
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
0
Eyup
Telerik team
answered on 25 Jan 2023, 07:16 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Eyup
Telerik team
answered on 27 Jan 2023, 08:45 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DropDownList Editor Grid
Asked by
Lars1603
Top achievements
Rank 1
Iron
Answers by
Lars1603
Top achievements
Rank 1
Iron
Eyup
Telerik team
Share this question
or