Search results
PDF

How to customize the Boolean parameter UI with parameter pane

You have to use beforeParameterAdd event for this customization. You can refer the below code snippet for an reference to customize the Boolean parameter type as drop-down instead of selecting the Radio button.

<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