jqxRangeSelector update

[gregory.michelParticipant]

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?

[HristoParticipant]

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

[gregory.michelParticipant]

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.

[HristoParticipant]

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

[gregory.michelParticipant]

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?

[HristoParticipant]

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

[Author]

Posts