Kendo UI & Javascript - Data not fetch when Add New Record

Question

Greeting all,

Need help and not sure which parts Im doing wrong.

When click Add new record I want segmentActive field to disable and by default radio button will checked on YES. I manage to do that. But when I save the record, it not fetch the value 'y' into my database. It will insert null.

$("#grid").kendoGrid({
dataSource: dataSource,
height:400,
sortable: true,  
columns: [ 
    { field: "segmentActive", title:"STATUS", width: "120px" , editor: RadioSegmentActive,
      template: data => data.segmentActive == "y" ? "Yes" : "No" },

    { field: "marketSegmentName", title:"SEGMENT NAME", width: "120px" },

    //Button Name
    { command: [{ name: "edit", text: { edit: "Edit",
                                        update: "Submit", 
                                        cancel: "Cancel"} },
                { name: "destroy", text: "De-active" }], 
                  title: " ", width: "120px" },

],
editable: "inline",
edit: function(e) {
        if (e.model.isNew()) { // Went adding new record    
                $('input[name=segmentActive]').attr("disabled",true);  //disable column STATUS
                radio3.checked = true; // id="radio3" checked
        }
    },   
toolbar: [{ name: "create", text: "Add" }],
pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },          
});  //end of kendo grid

My RadioSegmentActive function

function RadioSegmentActive(container, options) {
var guid = kendo.guid();

    $('<input class="k-radio" id="radio3" name="segmentActive" type="radio" value="y" >').appendTo(container);
    $('<label class="k-radio-label" for="radio3">Yes</label>').appendTo(container);  //YES
    $('<br>').appendTo(container); 
    $('<input class="k-radio" id="radio4" name="segmentActive" type="radio" value="n" >').appendTo(container);
    $('<label class="k-radio-label" for="radio4">No</label>').appendTo(container);  //NO
}

Thank You in advance.

Answer 1

This is Kendo - you need to update the underlying model it binds to:

edit: function(e) {
    if (e.model.isNew()) { // Went adding new record    
            $('input[name=segmentActive]').attr("disabled",true);  //disable column STATUS
            radio3.checked = true; // id="radio3" checked
            // change the kendo model value
            e.model.set("segmentActive", "y");
    }
}, 

Answer 2

To check the value console.log($('input[id=your_radio_button_id]:checked').val()); then check at the inspect window to see if it has a value. I guess not because it´s null on the database record. Your edit function could include the update value into the hidden input.

edit: function(e) {
    if (e.model.isNew()) { // Went adding new record    
            $('input[name=segmentActive]').attr("disabled",true);  //disable column STATUS
            radio3.checked = true; // id="radio3" checked
            $("#hidden_input").val("y");
    }
}, 

Place the hidden input next to the radios

<input type="hidden" id="hidden_input" name="hidden_input">

Also change your back code to bind the hidden field with the Y instead of the radios.