How to save new entry into grid where edit template is dropdownlist - save button not calling controller action when clicked

1 Answer 344 Views
DropDownList Editor Grid
Acadia
Top achievements
Rank 1
Iron
Acadia asked on 20 Apr 2023, 03:28 PM

Hello,

I am struggling with why my Save button on my Kendo Grid is not calling my update action (inline edit mode).  The edit column uses a dropdown list editor template.  The dropdown list editor fills fine with my values and I can select one.  But when I click the Save button (from toolbar) it does not call my add function in the controller.  I see no errors in F12 utility.  Any help is appreciated as I've been struggling with this all day.

Here is my relevant code:

Edit Grid:

<style>
    .k-grid-content td {
        position: relative;
    }

    .k-grid .k-grid-header .k-header .k-link {
        height: auto;
    }

    .k-grid .k-grid-header .k-header .k-column-title .k-header {
        white-space: normal;
    }
</style>
@{
    ViewData["Title"] = "Administration";
}

<div style="margin-left:10px; margin-top:10px">
<div>Manage Assignees</div>
<div class="row" style="margin-top:10px">
    <div class="col-auto">
            @(
                    Html.Kendo().Grid<Assignees>()
                    .Name("grid")
                    .Width("250px")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.SortName).Width(130).Title("Assignee").EditorTemplateName("AssigneesAdd");
                    })
                    .Sortable(true)
                    .Navigatable()
                    .Scrollable(scr => scr.Height(200))
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Selectable()
                    .AutoBind(true)
                    .ColumnMenu(false)
                    .ToolBar(tb =>
                    {
                        tb.Create().Text("New");
                        tb.Save().Text("Save").CancelText("Cancel");
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetAssigneesForAddGridDisplay", "Home").Type(HttpVerbs.Post))
                    .Update(update => update.Action("AddAssigneeRecord", "Home").Type(HttpVerbs.Post))
                    .Destroy(destroy => destroy.Action("DeleteAssigneeRecord", "Home").Type(HttpVerbs.Post))
                    .Events(e => e.Error("onError"))
                    .Batch(false)
                    .Model(model =>
                    {
                        model.Id(p => p.SortName);
                        model.Field(p => p.SortName);
            })
            )
            .Deferred()
            )
    </div>
</div>
</div>
@section Scripts{
    @Html.Kendo().DeferredScripts()

    <script>
        $(document).ready(function () {
        });

        function onError() {
        @*window.location='@Url.Action("Index", "Error")';*@
                }

    </script>

}

===============================================

Controller Add Function called by .Update event in grid

  [HttpPost]
        public async Task<ActionResult> AddAssigneeRecordAsync([DataSourceRequest] DataSourceRequest request, SelectListItem assigneeRecord)
        {

            try
            {
                await _dataService.AddAssigneeRecordAsync(assigneeRecord);

                return Json(await new[] { assigneeRecord }.ToDataSourceResultAsync(request, ModelState));
            }
            catch (Exception ex)
            {
                await _dataService.LogExceptionAsync("HomeController", "AddAssigneeRecordAsync", _username, ex);
                return BadRequest();
            }
        }

===============================================

DropDownList editor template("AssigneesAdd"):

@using Estimating_State_Licensing_Certification.Controllers
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@model string;

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Text")
        .DataTextField("Text")
        .Filter("startswith")
        .OptionLabel("Select an Employee")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                //this is the edit template used for the Admin assignee grid for adding NEW assignees
                read.Action("GetAssigneesForAdminAdd", "Home").Type(HttpVerbs.Post);
            });
        })
)

==============================================

"Assignees" class/entity used by the grid

   public class Assignees
    {
        public string? SortName { get; set; } = string.Empty;
    }

 

Thanks!

Acadia

Ivan Danchev
Telerik team
commented on 25 Apr 2023, 11:51 AM

Hello Acadia,

The presence of the following directives at the top of the posted Assignees.cshtml view:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

indicates that you are using Telerik UI for ASP.NET Core. However, this thread has been submitted in the DropDownList / UI for ASP.NET MVC forum. I am moving it to the Core forum. Expect a reply from the Core Support Team.

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 25 Apr 2023, 12:07 PM

Hi Justin,

I see the  Update endpoint points to the AddAssigneeRecord action method:

.Update(update => update.Action("AddAssigneeRecord", "Home").Type(HttpVerbs.Post))

while the action on the endpoint is named differently:

[HttpPost]
public async Task<ActionResult> AddAssigneeRecordAsync([DataSourceRequest] DataSourceRequest request, SelectListItem assigneeRecord)
{
..
}

If you inspect the network tab is a request submitted to the AddAssigneeRecord endpoint at all? If it returns a 404 try updating the Grid configuration so the update action points to the correct endpoint:

.Update(update => update.Action("AddAssigneeRecordAsync", "Home").Type(HttpVerbs.Post))

Let me know if this helps.

Regards,
Aleksandar
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
Acadia
Top achievements
Rank 1
Iron
Answers by
Aleksandar
Telerik team
Share this question
or