Multiple radio buttons in Kendo UI grid with inline and batch editing

Question

I thought I would be doing something simple as Kendo UI already can do so much, alas it is not as simple as I thought. Radio buttons make it hard.

I'm trying to create a permission mask just as you can see here:

And the corresponding, almost working JSFiddle: http://jsfiddle.net/oz0b7xcu/

Currently I have View, Edit and None as separate columns - I can imagine them being an enum.

I figured out how to use a template & editor per field as to display the boolean with radio buttons instead of "true"/"false".

My problems:

• Currently the inline editor only reacts when I click next to the radio button. Only after activating it I can select it. After "leaving" the field, the value is not persisted. (Try it out in the JSFiddle)
• How do I create the "Save changed permissions" button? I would need one event per changed permission and add it to some array
• How would I make it work over several pages, persisting the current permission "change set"
• How do I set the edited row as "dirty"/"changed"?

I think what I am trying to do is pretty clear:

• I have a list of users with permissions
• I want to be able to quickly edit all users (batch) and just select view/edit/none (exclusive)
• Maybe have a visualization for changed rows (dirty)
• When I'm done, I want to get a list of all changed permissions

PS: Maybe all of this would be easier with "virtual columns"? Have only one PermissionMask field and depending on its value virtual columns are filled. Possible? Maybe a better solution? I don't depend on any data source so I could define something different here...

Answer 1

If you do not have any other editable fields except radio buttons, I feel you don't need to make the grid editable and you can still make it work. I made some changes to the code in your fiddle. here is the code. (only code that is changed)

columns: [
            { field: "Name" }, {
                field: "View",
                width: "80px",
                template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
            }, {
                field: "Edit",
                width: "80px",
                template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
        }, {
            field: "None",
            width: "80px",
            template: "<input type='radio' name='#: uid #' onclick='markDirty(this);'/>"

We can manually mark a record as dirty when selection is changed.

function markDirty(ctrl) {
        $("#grid").data("kendoGrid").dataSource.getByUid(ctrl.name).dirty = true;
    }

Finally you can get the data source from the grid on button click and perform any action required.

//this will have the data in an array
var data = $("#grid").data("kendoGrid").dataSource.data();

Hope this helps.