Limit selectable date range in datetime picker

8 posts, 1 answers
  1. Rick
    Rick avatar
    9 posts
    Member since:
    Aug 2015

    Posted 16 Feb Link to this post

    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?
  2. Stef
    Admin
    Stef avatar
    3050 posts

    Posted 18 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Rick
    Rick avatar
    9 posts
    Member since:
    Aug 2015

    Posted 24 Feb in reply to Stef Link to this post

    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

  5. Answer
    Stef
    Admin
    Stef avatar
    3050 posts

    Posted 26 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Rick
    Rick avatar
    9 posts
    Member since:
    Aug 2015

    Posted 29 Feb in reply to Stef Link to this post

    Hi Stef,

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

    Rick

  7. Rick
    Rick avatar
    9 posts
    Member since:
    Aug 2015

    Posted 03 Mar in reply to Stef Link to this post

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

  8. Rick
    Rick avatar
    9 posts
    Member since:
    Aug 2015

    Posted 07 Mar in reply to Stef Link to this post

    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?
  9. Stef
    Admin
    Stef avatar
    3050 posts

    Posted 08 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner