如何使用 Kendo Grid 客户端模板将选定的单选按钮值发送到控制器？

Posted 2023-05-07

【中文标题】如何使用 Kendo Grid 客户端模板将选定的单选按钮值发送到控制器？

【英文标题】：How to send selected radio button values to controller using Kendo Grid Client Template?

【发布时间】：2022-01-19 11:40:22

【问题描述】：

我正在使用带有 Kendo Grid 的 MVC 应用程序。早些时候我在剑道网格中有复选框列。但是现在我想用 3 个单选按钮替换复选框，其值为 1。必需 2。可选 3。禁用。我已经设法使用 name='#: uid #' 创建单选按钮控件。但是，当我尝试使用每一行选择多项选择时，我无法选择正确的单选按钮值。例如，根据图像中的网格，如果我为 Busy、CallBackLater Testing 和 Optional for Interest、SendInformation Disposition 文本选择禁用选项，那么我想将选定的单选按钮枚举值发送到控制器。Refer Kendo Grid

枚举如下

public enum FollowUpDisposition : byte

    Required = 1,
    Optional = 2,
    Disabled = 3

我也在cshtml页面中使用剑道网格客户端模板，代码（仅包含必需部分）如下。

@(Html.Kendo().Grid<CompanyDisposition>()
                      .Name("dispositionsGrid")
                      .Scrollable()
                      .HtmlAttributes(new  @style = "height: 260px;" )
                      .Columns(columns =>
                          
                       /* Below is checkbox which is working*/                          
                          columns.Bound(p => p.countAsConversion).Title("Count as Conversion").Width(80).ClientTemplate("<input type='checkbox' #= countAsConversion ? 'checked=checked' : '' # data-field='countAsConversion' onchange='dispositionGridDataChange(this, this.checked)'  />");
                      /* checkbox over */

                      /* Need help for this radio buttons section */
                          columns.Bound(p => p.IsFollowUpMandatory).Title("FollowUp").Width(80).ClientTemplate(
                          "<div><input type = 'radio' name='#: uid #' data-field='1' # if (IsFollowUpMandatory == '1')  # checked = 'checked' #  # onclick='dispositionGridDataChange(this, this.checked);' /> Required</div><div><input type = 'radio' name='#: uid #' data-field='2' # if (IsFollowUpMandatory == '2')  # checked = 'checked' #  #  onclick='dispositionGridDataChange(this, this.checked);' /> Optional</div><div><input type = 'radio' name='#: uid #' data-field='3' # if (IsFollowUpMandatory == '3')  # checked = 'checked' #  # onclick='dispositionGridDataChange(this, this.checked);' /> Disabled</div>");                            
                      /* Radio buttons section Over*/

                      .ToolBar(toolbar => toolbar.Save())
                      .ToolBar(toolbar => toolbar.Create().HtmlAttributes(new  @style = "background-color: #A9F5A9;" ))
                      .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .ServerOperation(false)
                          .Sort(sort => sort.Add("SortOrder"))
                          .Events(events => events.RequestEnd("dispositionsGridRequestEnd").Change("dispositionsGridSourceChange"))
                          .Model(m =>
                          
                              m.Id(p => p.CompanyDispositionId);
                              m.Field(f => f.DispositionType).DefaultValue("Positive");
                              m.Field(f => f.LeadStatus).DefaultValue("");
                              m.Field(f => f.ContactStatus).DefaultValue("");
                              m.Field(f => f.CSVStatus).DefaultValue("");
                              m.Field(f => f.LeadSubStatus).DefaultValue("");
                              m.Field(f => f.ContactSubStatus).DefaultValue("");
                              m.Field(f => f.SortOrder);
                              m.Field(f => f.SecondaryQuickListId).DefaultValue("");
                              m.Field(f => f.SecondaryQuickListName).DefaultValue("");
                              m.Field(f => f.SecondaryDispositionID).DefaultValue("");
                              m.Field(f => f.SecondaryDispositionName).DefaultValue("");
                          )
                          .Create(create => create.Action("CreateDisposition", "Settings"))
                          .Read(read => read.Action("ReadDispositions", "Settings"))
                          .Update(update => update.Action("UpdateDisposition", "Settings"))
                          .Destroy(destroy => destroy.Action("DeleteDisposition", "Settings"))))
            

我的客户端函数是

         <script type="text/javascript">
            function dispositionGridDataChange(currentElem, newValue) 
               /* debugger*/
                var updateField = $(currentElem).attr('data-field');
                var dispositionGrid = $('#dispositionsGrid').data().kendoGrid;
                var dispositionItem = dispositionGrid.dataItem($(currentElem).closest('tr'));
                dispositionItem[updateField] = newValue;
                dispositionItem.dirty = true;
            
        </script>

请帮忙。

【参考方案1】：

我已经解决了这个问题。

我在向 JavaScript 函数发送所需值时犯了一个错误。 下面是更新的 JavaScript 函数，它解决了我的问题。 我还从输入字段中删除了“this.Checked”，因为这里不需要第二个值。它是 onchange='dispositionGridDataChange(this, this.checked)' 现在我已将其更新为 onchange='dispositionGridDataChange(this)'

function dispositionGridDataChange(currentElem) 
                var updateField = $(currentElem).attr('data-field');
                var dispositionGrid = $('#dispositionsGrid').data().kendoGrid;
                var dispositionItem = dispositionGrid.dataItem($(currentElem).closest('tr'));
                dispositionItem.set('IsFollowUpMandatory', updateField);
                dispositionItem.dirty = true;
            ;