Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export (csv, html, pdf, xlsx )

RTL Layout

Layouts

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

Single row selection with radio buttons

We can enable single row selections with radio buttons by implementing column.render to render radio buttons and column.postRender to bind events and write single row selection logic with grid.SelectRow() API

render: function (ui) {
    return "<input type='radio' name='radio100' />";
},
postRender: function (ui) {                
    var grid = this;
    $(ui.cell).find('input').prop('checked', ui.rowData.pq_rowselect).on('change', function (evt) { 
        grid.SelectRow().replace({ rowIndx: ui.rowIndx });
    });
}

Note the range selections are still active. If we don't want them, we can disable them by add this option:

selectionModel: {type: null}
rowSelect Event: