-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-112.html
130 lines (121 loc) · 5.59 KB
/
template-112.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<h1 id="ef-radio-button-formatter">EF Radio Button Formatter</h1>
<p>This formatter creates a <a href="https://ui.refinitiv.com/elements/radio-button">ef-radio-button</a> for each cell on the given column. All the radio buttons are unselected by default. All the radio button states are bound together in a single grid. This means that only one radio button can be selected at any given time. If another radio button is selected, the current selected radio button will be unselected. If you want to have multiple selection, please consider using <a href="#/rendering/predefined-formatters/ef-checkbox-formatter">predefined checkbox formatter</a> or <a href="#/rendering/custom-formatter">a custom formatter</a> instead.</p>
<h2 id="specific-options">Specific options</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>initialIndex</td>
<td>number</td>
<td>optional</td>
<td>Initial checked row index</td>
</tr>
</tbody></table>
<h2 id="radio-buttons-with-initial-selection-example">Radio buttons with initial selection example</h2>
<p>The following example uses <code>initialIndex</code> property to define the initial radio button to have selected state:</p>
<code-sandbox hash="334c2a7b"><pre><code class="language-css">efx-grid {
height: 320px;
}
</code></pre>
<pre><code class="language-html"><efx-grid id="grid"></efx-grid>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = ["companyName", "market", "CF_LAST", "industry"];
var records = DataGenerator.generateRecords(fields, { seed: 1, numRows: 20 });
var columns = fields.map(function(f) {
return {
field: f
};
});
columns.unshift({ // Insert radio button column at the front
name: "",
alignment: "c",
field: "radio",
width: 34,
binding: EFRadioButtonFormatter.create({
initialIndex: 2,
events: { // For illustrative purpose
"click": function(e) {
console.log("clicked");
}
}
})
});
var configObj = {
columns: columns,
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="programmatically-change-radio-button-state-example">Programmatically change radio button state example</h2>
<p>Since the radio buttons need to maintain their selected states, changing the states need to be done through API. Use <code>getContextObject</code> method from the radio definition object to obtain the context object which can control the states of all radio buttons in the grid. Then, use <code>selectRadio</code> method from the context object to select the desired radio button.</p>
<code-sandbox hash="5a0c272b"><pre><code class="language-css">hr {
margin: 5px;
}
efx-grid {
height: 320px;
}
</code></pre>
<pre><code class="language-html"><label>Row index:</label>
<input id="row_in" value="5" type="number" placeholder="row index">
<button id="select_btn">Select radio button</button>
<hr>
<efx-grid id="grid"></efx-grid>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
select_btn.addEventListener("click", function(e) {
var rowIndex = +row_in.value;
if(!rowIndex) {
rowIndex = 0;
}
var radioCtx = radioDefinition.getContextObject();
if(radioCtx.selectRadio) {
radioCtx.selectRadio(rowIndex);
}
});
var fields = ["id", "companyName", "market", "CF_LAST", "industry"];
var records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 20 });
var columns = fields.map(function(f) {
return {
field: f
};
});
columns[0].width = 40;
columns[0].alignment = "c";
var radioDefinition = EFRadioButtonFormatter.create();
columns.unshift({ // Insert radio button column at the front
name: "",
alignment: "c",
field: "radio",
width: 34,
binding: radioDefinition
});
var configObj = {
columns: columns,
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox>