jQuery UI Widgets Forums Angular jqxRangeSelector update

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 1 year, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jqxRangeSelector update #101215

    gregory.michel
    Participant

    Hi,
    – a Dropdownlist with different period choice (‘LAST HOUR’, ‘LAST DAY’, ‘LAST WEEK’, …)
    – a Date RangeSelector

    On Dropdown Change, the RangeSelector must show the correct date range, so RangeSelector min, max, range, majorTicksInterval, minorTicksInterval, labelsFormat, markersFormat must change depending the dropdownlist choice.

    How can i do that?
    Should i use RangeSelector createComponent method on each dropdown change?

    jqxRangeSelector update #101223

    Hristo
    Participant

    Hello gregory.michel,

    The createComponent is used once only for the initialization of the widgets.
    If you would like to make some changes on it you could invoke particular property (.majorTicksInterval('week')) or method (.refresh();).
    Also, if you want to make more updates on the widget you could setOptions.
    Please, take a look at this example:
    this.myRangeSelector.setOptions({ majorTicksInterval: "week", minorTicksInterval: "hour" });
    I hope this will help.

    Please, clarify it, what you want to achieve, if you still have troubles with that.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxRangeSelector update #101252

    gregory.michel
    Participant

    Hi,
    My RangeSelector is in a *ngIf=”period !== ‘PERIOD_CUSTOM’; else elseBlock”
    period is the value selected by my DropDownList Component.
    So as i saw on this forum, my RangeSelector isn t in auto-create.

    
    <div class="col-md-2">
      <jqxDropDownList #periodSelector [width]="'80%'" [height]='25' [source]="[
          { value: 'PERIOD_CUSTOM', label: 'PERIOD_CUSTOM' | translate },
          { value: 'PERIOD_LAST_HOUR', label: 'PERIOD_LAST_HOUR' | translate },
          { value: 'PERIOD_YESTERDAY', label: 'PERIOD_YESTERDAY' | translate },
          { value: 'PERIOD_LAST_24H', label: 'PERIOD_LAST_24H' | translate },
          { value: 'PERIOD_LAST_7_DAYS', label: 'PERIOD_LAST_7_DAYS' | translate },
          { value: 'PERIOD_LAST_MONTH', label: 'PERIOD_LAST_MONTH' | translate }
        ]"
        [selectedIndex]="periodIndex"
        [displayMember]="label" [valueMember]="value"
        (onChange)="ChangePeriod($event)"
      ></jqxDropDownList>
    </div>
    
    <div class="col-md-10" *ngIf="period !== 'PERIOD_CUSTOM'; else elseBlock">
      <jqxRangeSelector #rangeSelector [width]="'100%'" [height]='25' [padding]="padding"
         [min]="minTime" [max]="maxTime"
         [majorTicksInterval]="majorTicksInterval" [minorTicksInterval]="minorTicksInterval"
         [labelsFormat]="labelsFormat" [markersFormat]="markersFormat"
         [range]="{ from: beginTime, to: endTime }"
         [showMinorTicks]="false"
         (onChange)="ChangeRange($event)"
      ></jqxRangeSelector>
    </div>
    
    <ng-template #elseBlock>
      <div class="col-md-5">
          <jqxDateTimeInput #beginTimeInput [width]="'100%'" [height]='25'
            [value]="beginTime"
            [formatString]="'dd/MM/yyyy HH:mm'"
            [firstDayOfWeek]="1" [showTimeButton]="true"
            (onChange)="ChangeBegin($event)"
          ></jqxDateTimeInput>
      </div>
      <div class="col-md-5">
        <jqxDateTimeInput #endTimeInput [width]="'100%'" [height]='25'
           [value]="endTime"
           [formatString]="'dd/MM/yyyy HH:mm'"
           [firstDayOfWeek]="1" [showTimeButton]="true"
           (onChange)="ChangeEnd($event)"
        ></jqxDateTimeInput>
      </div>
    </ng-template>
    

    Each property is initialised in ngInit and modified in ‘ChangePeriod’ (by the same method).
    It finally work but a problem remains:
    if ‘minorTicksInterval’ switch from ‘day’ to ‘minutes’, chrome stop working.

    jqxRangeSelector update #101271

    Hristo
    Participant

    Hello gregory.michel,

    Please, provide the whole example (simplified – as much as possible).
    Also, please, take a look at this example: https://tseditor.com/?key=a039097c918611e8a9ff00224d6bfcd5
    It seems to work fine when changing the jqxDropDownList selection to ‘PERIOD_CUSTOM’.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxRangeSelector update #101289

    gregory.michel
    Participant

    Hi,
    I’ve modified your example:
    https://tseditor.com/?key=e0fceef191a611e8a9ff00224d6bfcd5

    if i switch to ‘LAST MONTH’,
    Error:jqxRangeSelector: range object initialization error. ‘min’ should be less than ‘max’

    I wrote a new one with which is a simplified version of mine:
    https://tseditor.com/?key=172e6f7b91b411e8a9ff00224d6bfcd5
    If you switch to ‘LAST_HOUR’ your navigator will crash…
    Can you explain me why, or how can i achieve to make it working?

    jqxRangeSelector update #101321

    Hristo
    Participant

    Hello gregory.michel,

    Thank you for the example and for the assistance.
    I will create a work item for this case.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.