[gregory.michelParticipant]

Hi,
I tried this solution too, but i can’t access to my typescript methods/properties in the button callback.
“this” in the callback seems to be html element, not the typescript component…

[gregory.michelParticipant]

Hi,
This solution don’t work, several actions make buttons disappear:
scrollbar, sort, filter,…

[gregory.michelParticipant]

Hi,
If I replace

cellsRenderer: (row: number, column: any, value: any, defaulthtml: string, columnproperties: any, rowdata: any) => {
        return 'edit';
},

by

cellsRenderer: (row: number, column: any, value: any, defaulthtml: string, columnproperties: any, rowdata: any) => {
        return '<i class="fa fa-pencil"></i>';
},

the icon is correctly displayed, but the buttonclick callback does’nt work anymore…

[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?

[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.

[gregory.michelParticipant]

Hello,

When do you think it could be fixed?
I need this for a professionnal use, so if it can be fixed quick, i’ll wait.

[Author]

Posts