How to send selected radio button values to controller using Kendo Grid Client Template?

Question

I am using MVC application with Kendo Grid. Earlier I had checkbox column in kendo grid. However now I want to replace checkbox with 3 radio buttons having values as 1. Required 2. Optional 3. Disabled. I have managed to create radio button control using name='#: uid #'. However when I try to select multiple selection using each row I cant select proper radio button values. For example as per my grid in image if I select Disable option for Busy,CallBackLater Testing and Optional for Interest,SendInformation Disposition text then I want to send selected radio buttons enum values to controller.
Refer Kendo Grid

Enum is as below

public enum FollowUpDisposition : byte
{
    Required = 1,
    Optional = 2,
    Disabled = 3
}

also I am using Kendo grid client template in cshtml page and code(included only required part) is as below.

@(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"))))
            }

My client side functions are

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

Please help.

Abhijit Shelke Abhijit Shelke · Accepted Answer · 2021-12-16T16:08:34

I have resolved this issue.

I was making a mistake in sending desired value to JavaScript function. below is the updated JavaScript function which has resolved my issue. also I removed "this.Checked" from input field because I don't need second value here. It was onchange='dispositionGridDataChange(this, this.checked)' and now I have updated it to 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;
            };

How to send selected radio button values to controller using Kendo Grid Client Template?

1 Answers