How to customize the Boolean parameter UI with parameter pane

To customize the Boolean parameter UI in the Bold Reports® JavaScript Report Viewer parameter pane, use the beforeParameterAdd event. The following code snippet shows the Boolean parameter as a drop-down instead of radio buttons.

<div id="viewer"></div>
<script>
    $("#viewer").boldReportViewer({
              beforeParameterAdd: "onBeforeParameterAdd"
        });
</script>
</html>
<script type="text/javascript">
        function onBeforeParameterAdd(args) {
        var $targetTag = $('#' + args.containerId);
        if (args.parameterModel.ParameterElementType == "RadioButton") {
            var comboBoxTag = ej.buildTag("input", '', '', { 'id': args.parameterModel.Name, 'type': 'Text' });
            $targetTag.append(comboBoxTag);

            var data = [];
            if (args.parameterModel.IsNullable) {
                data.push({ label: 'Null', value: 'null' })
            }

            data.push({ label: 'True', value: 'true' });
            data.push({ label: 'False', value: 'false' })
            comboBoxTag.ejComboBox({
                dataSource: data,
                allowCustom: true,
                fields: { text: 'label', value: 'value' },
                placeholder: "Select a Value",
                select: function (argument) {
                    if (argument.itemData) {
                        var data = argument;
                        var param = {
                            name: this._id,
                            labels: [],
                            values: []
                        }
                        if (argument.itemData.value == 'null') {
                            param.labels.push(null);
                            param.values.push(null);
                        }
                        else if (argument.itemData.value == 'true') {
                            param.labels.push(true);
                            param.values.push(true);
                        }
                        else if (argument.itemData.value == 'false') {
                            param.labels.push(false);
                            param.values.push(false);
                        }
                        $('#viewer').data('boldReportViewer').updateParameter(param);
                    }
                }
            });
            args.handled = true;
        }
    }
</script>
</html>

See Also