Ako použiť v dgride dijit/form/RadioButton

V tomto článku predstavím dva spôsoby, ako použiť na označenie riadka widget dijit/form/RadioButton a zároveň ponechať štandardné správanie dgridu.

Ako prvé je potrebné do layoutu pre vlastnosť columns vložiť stĺpec s radio button. Radio button musí mať unikátnu hodnotu pre name. V opačnom prípade nebude korektne fungovať.

Príklad: Renderovanie dijit/form/RadioButton.

1
2
3
4
5
6
7
8
9
10
11
{
    className: "rb-selector",
    field: "selector",
    label: "Selector",
    renderCell: function (object, value, node, options) {
        var rb = new RadioButton({
            name: "rb" + object.id
        });
        rb.placeAt(node);
    }
}
{
    className: "rb-selector",
    field: "selector",
    label: "Selector",
    renderCell: function (object, value, node, options) {
        var rb = new RadioButton({
            name: "rb" + object.id
        });
        rb.placeAt(node);
    }
}

Druhým krokom zabezpečíme, aby označovanie a odznačovanie riadkov v dgride fungovalo správne.

Príklad: Implementácia select a deselect.

1
2
3
4
5
6
7
8
9
10
11
12
13
function setRadioButton(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
} 
 
grid.on('dgrid-select', function (event) {
    var row = event.rows[0];
    setRadioButton(row, true);
});
grid.on('dgrid-deselect', function (event) {
    var row = event.rows[0];
    setRadioButton(row, false);
});
function setRadioButton(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
} 

grid.on('dgrid-select', function (event) {
    var row = event.rows[0];
    setRadioButton(row, true);
});
grid.on('dgrid-deselect', function (event) {
    var row = event.rows[0];
    setRadioButton(row, false);
});

Pre označovanie a odznačovanie riadkov je možné použiť aj nasledujúci skrátený programový kód.

Príklad: Implementácia select a deselect.

1
2
3
4
5
6
7
8
9
function setRadioButton(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
} 
 
grid.on('dgrid-select, dgrid-deselect', function (event) {
    var row = event.rows[0];
    setRadioButton(row, event.type === "dgrid-select");
});
function setRadioButton(row, checked) {
    var node = row.element;
    registry.findWidgets(node)[0].set("checked", checked);
} 

grid.on('dgrid-select, dgrid-deselect', function (event) {
    var row = event.rows[0];
    setRadioButton(row, event.type === "dgrid-select");
});

Záver

Ako vidieť, implementácia widgetu dijit/form/RadioButton nie je až tak zložitá. Druhá možnosť implementácie selectu a deselectu vznikla na základe podobného programového kódu môjho kolegu, ktorý ma inšpiroval, aby som kód upravil a predstavil aj druhú možnosť ako implementovať podporu select a deselect.

Ako použiť v dgride dijit/form/RadioButton

Záver

Komentáre

Pridať komentár