0

In modern multiselection grid, Multiple checkboxes getting ticked only when i click on checkbox. But i want multiple checkboxes to be ticked on grid row selection. Can anyone please suggest.

Preethi Shettigar
  • 13
  • 5

1 Answers1

0

In the following sample the selection is produced by tapping on row:

var grid = Ext.create('Ext.grid.Grid', {
    title: 'Streaming Service Providers',
    columns: [{
        text: "Brand",
        dataIndex: "brand",
        flex: 1
    }, {
        text: "Headquarters",
        dataIndex: "headquarters",
        flex: 1
    }, {
        text: "Trial",
        dataIndex: "trial",
        flex: 1
    }, {
        text: "Price",
        flex: 1,
        dataIndex: 'price'
    }],
    store: {
        fields: ['brand', 'headquarters', 'trial', 'price'],
        data: [{
            brand: 'Netflix',
            headquarters: 'California',
            trial: '1 Month',
            price: '$7.99'
        }, {
            brand: 'YouTube',
            headquarters: 'California',
            trial: '1 Month',
            price: '$9.99'
        }, {
            brand: 'Amazon Prime',
            headquarters: 'Seattle, Washington',
            trial: '1 Month',
            price: '$8.25'
        }],
        storeId: 'serviceStore'
    },
    height: 400,
    renderTo: Ext.getBody(),
    // Row checkbox selection model config
    selectable: {
        columns: false,
        mode: 'multi',
        checkbox: true,
        cells: false,
        rows: true,
    }
});
Arthur Rubens
  • 4,626
  • 1
  • 8
  • 11
  • Hi Arthur, I tried this code in fiddle. It's unchecking previously selected row, when i click on next row. I want both the rows to remain checked. – Preethi Shettigar Feb 03 '21 at 09:49
  • Have you tried to click with Ctrl on windows and Command on MacOS buttons? So called Ctrl-click.. – Arthur Rubens Feb 03 '21 at 09:55
  • Ctrl+click works well. Rows get selected. But my client wants it on row selection, not with ctrl+click. Let me know if it's possible. Thank you very much for your reply. – Preethi Shettigar Feb 03 '21 at 10:08
  • And how will your client unselect the selected rows? – Arthur Rubens Feb 03 '21 at 10:25
  • By clicking on the selected row again. This was possible with classic toolkit. But now trying to achieve this is modern toolkit. – Preethi Shettigar Feb 03 '21 at 10:27
  • It is still possible with classic toolkit. Unfortunately you will have to override the private 'onNavigate' method of the 'Ext.grid.selection.Model' class to achieve this behaviour. As you can see from source code of the selection model: if (sel && (mode !== 'multi' || !ctrlKey) && !isSpace) { sel.clear(true); } – Arthur Rubens Feb 03 '21 at 12:39