×
Creating solutions

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);
}
}
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);
});
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");
});

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.


Dojo,dijit/form/RadioButton,dgrid,row,select,deselect
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest