Using a DateTime parameter picker and Date parameter picker on the same report

2 posts, 0 answers
  1. Adam
    Adam avatar
    3 posts
    Member since:
    Aug 2013

    Posted 15 Oct 2015 Link to this post

    Hi,

     I've ​currently trialling the 2015 Q3 Reporting HTML5 viewer in an MVC application.

     I've successfully created a custom parameter editor for the DateTimeEditor using the code below:

    Code block to load report:

     

    01.<div class="full-height-content full-height-content-scrollable">
    02.    <div class="full-height-content-body">
    03.        @(Html.TelerikReporting().ReportViewer()
    04.              .Id("telerikReportViewer")
    05.              .ServiceUrl(Url.Content("~/api/reports/"))
    06.              .TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-9.2.15.930.html"))
    07.              .ReportSource(@Model.TypeReportSource)
    08.              .ViewMode(ViewMode.Interactive)
    09.              .ScaleMode(ScaleMode.FitPageWidth)
    10.              .PersistSession(false)
    11.              .PrintMode(PrintMode.AutoSelect)
    12.              .Deferred()
    13.              .ParametersAreaVisible(true)
    14.              .ParameterEditors(
    15.                 editors => editors
    16.                      .DateTimeEditor("createDateTimeEditor"))                            
    17.              )
    18.    </div>
    19.</div>

    Code block to define DateTime Picker:

    01.function createDateTimeEditor(placeholder, options) {
    02.    $(placeholder).html('<input type="datetime"/>');
    03.    var dateTimePicker = $(placeholder),
    04.        parameter,
    05.        valueChangedCallback = options.parameterChanged,
    06.        dropDownList;
    07. 
    08. 
    09.    function onChange() {
    10.        var dtv = this.value();
    11.        if (null !== dtv) {
    12.            dtv = myadjustTimezone(dtv);
    13.        }
    14.        valueChangedCallback(parameter, dtv);
    15.    }
    16. 
    17.    return {
    18.        beginEdit: function(param) {
    19.            parameter = param;
    20. 
    21.            var dt = null;
    22.            try {
    23.                if (param.value) {
    24.                    dt = myunadjustTimezone(param.value);
    25.                }
    26.            } catch (e) {
    27.                dt = null;
    28.            }
    29. 
    30.            $(dateTimePicker).find("input").kendoDateTimePicker({
    31.                format: "dd/MM/yyyy HH:mm",
    32.                parseFormats: ["MM/dd/yyyy HH:mm"],
    33.                change: onChange,
    34.                value: dt
    35.            });
    36. 
    37.            dropDownList = $(dateTimePicker).find("input").data("kendoDateTimePicker");
    38. 
    39.        }
    40. 
    41.    };
    42.}

    The above works great and creates a DateTime Picker, but I want to be able to add another parameter that only allows for Date Entry without the Time component.

     Looking at the Parameter Types and Kendo Controls there's only an option for DateTime (kendoDateTimePicker) and not for Date.  Is it possible to create two parameters for a report, one for DateTime and one for Date?

     Adam

  2. Stef
    Admin
    Stef avatar
    3610 posts

    Posted 20 Oct 2015 Link to this post

    Hi Adam,

    To add a custom parameter editor you need to add a match criteria first. Thus you can use parameters name and id attributes to exclude them from appearing with a kendoDatetimePicker editor.

    Consider the following example:
    function customMatch(parameter) {
             return Boolean(parameter.availableValues)
               && !parameter.multivalue
              && parameter.name != 'ReportYear';   
         }
    The above will match parameters with available values, which are not multivalue and their Name property is different than "ReportYear". If the ReportYear parameter appears, it will use the dedault parameter editor for its type.


    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
Back to Top