Limit selectable date range in datetime picker

[RMS-Licenses]

I'm using a parameter editor to create calendar controls to select a date range for reports. All reports share the same Index.cshtml page, and hence, all inherit the same calendar controls. Is there a way to limit the selectable date range for individual reports via the Report Designer or would I have to create separate parameter editors for each report?

[Stef]

Hello Rick,

If you are using the HTML5 Viewer, you can use custom parameter editor. The editor can be a Javascript widget which replaces the default editor depending on the matching rules. For more details, please check my post in the Report Parameter DateTime Picker Format on UI forum thread.

Other approach is to use custom UI where the selected values are passed to the viewer by updating its reportSource - How To: Pass Values to Report Parameters.


Let us know if you have any further questions.

Regards,
Stef
Telerik

[RMS-Licenses]

Hi Stef,

I am already using a custom parameter editor. The issue is that all of my reports use the same calendar widget, which uses the same custom parameter editor.

 

What I would like to be able to do is, for example: on one report, prevent users from selecting more than one week at a time. On another report, prevent users from selecting more than one month at a time. Basically, I'd like to be able to set date restrictions on a per report basis. What do you suggest?

Thanks,

Rick

[Stef]

Hello Rick,

The mechanism for plugin a custom editor allows you to apply a match criteria which includes the parameter's type, name and etc properties. You can also use external variables which may provide information about the report. If there is match the corresponding createEditor will be triggered.
For example a match like:

match: function (parameter) {
                         var selectedReport = 1;//if we assume the report is selected, and we can read its name
                         return Boolean(parameter.availableValues) && !parameter.multivalue && selectedReport==1;
                     },

You are not limited to provide one custom editor on creating the viewer object, the can be multiple match-createEditor entries for different cases.


Other approach is to use custom UI to update the viewer's reportSource - How To: Pass Values to Report Parameters.


I hope this information helps.

Regards,
Stef
Telerik

[RMS-Licenses]

Hi Stef,

Thank you for the clarification. I will try this approach and post back when I have more to share.

Rick

[RMS-Licenses]

Thanks again, Stef. I was able to accomplish what I was after by matching on the report name using a helper function I call inside the custom parameter editor. Let me know if you have any further suggestions to my code. Example below.

match: function (parameter) {
                            return parameter.type === "System.DateTime";
                        },

                        createEditor: function (placeholder, options) {
                            $(placeholder).html('<input type="datetime"/>');
                            var dateTimePicker = $(placeholder),
                                                    parameter,
                                                    valueChangedCallback = options.parameterChanged,
                                                    dateTimeControl;

                            function onChange() {
                                var dtv = this.value();
                                if (null !== dtv) {
                                    dtv = adjustTimezone(dtv);
                                }
                                valueChangedCallback(parameter, dtv);
                            }

                            return {
                                beginEdit: function (param) {
                                    parameter = param;

                                    var dt = null;
                                    try {
                                        if (param.value) {
                                            dt = unadjustTimezone(param.value);
                                        }
                                    } catch (e) {
                                        dt = null;
                                    }

                                    $(dateTimePicker).find("input").kendoDateTimePicker({
                                        format: "MM/dd/yyyy HH:mm",
                                        timeFormat: "HH:mm",
                                        parseFormats: ["MM/dd/yyyy HH:mm"],
                                        change: onChange,
                                        value: dt
                                    });

                                    dateTimeControl = $(dateTimePicker).find("input").data("kendoDateTimePicker");

                                    // set start date depending on report
                                    var startDate = getStartDate();
                                    dateTimeControl.min(startDate);

                                    // prevent user from selecting future dates
                                    dateTimeControl.max(new Date());
                                }
                            }
                        }

// helper function outside of the parameter editor
function getStartDate() {

            var rptName = '@reportSource.TypeName';

            // dates hard-coded for example only
            var startDate = new Date("2/17/2016");

            if (rptName === "MyReportName.trdx") {
                startDate = new Date("2/21/2016");
            }

            return startDate;
        }

[RMS-Licenses]

Stef, on a slightly different approach, what would be the best way to limit the selectable date range dynamically? For example, say I only want the user to be able to select a maximum of 14 days at a time. Depending on what they select for a start date, the end date would dynamically change and be limited to 14 days from that start date as long as they didn't exceed the current date. Would I also handle this type of scenario from the parameter editor or would this need to be handled by an additional external script?

[Stef]

Hello Rick,

We can suggest you several approaches:

1. The current approach, where the input is limited through the viewer's parameters area. You will have to update parameter editors with custom widgets preventing the user from selecting undesired values. Related to the How To: Create a Custom Parameter Editor help article;
2. Use entirely custom UI, where you will have full control on the input - you will be able to specify the used widgets and their settings. Please check the example in How To: Pass Values to Report Parameters.
3. Handle the input in the report or/and the data-retrieval method and add a TextBox displaying information about the changed selection. For example, let the user select any values via report parameters and validate these values in the data-retrieval method before using them to get data.
   
   In case a report parameter value has to be updated based on other parameter's value, you can also implement cascading parameters - How to: Cascading Parameters with applied filtering on data source level.

Regards,
Stef
Telerik