JavaScript/jQuery Gantt - scaleTypeRange
Type:
Use the scaleTypeRange.min and scaleTypeRange.max properties to limit zoom in the Gantt chart.
jQuery
index.js
$(function() {
$("#gantt").dxGantt({
scaleTypeRange: {
min: 'days',
max: 'years'
},
// ...
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
<dxo-scale-type-range
[min]="days"
[max]="years">
</dxo-scale-type-range>
<!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
@NgModule({
imports: [
BrowserModule,
DxGanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
App.vue
<template>
<DxGantt ... >
<DxScaleTypeRange
min="days"
max="years"
/>
<!-- ... -->
</DxGantt>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import {
DxGantt,
DxScaleTypeRange,
// ...
} from 'devextreme-vue/gantt';
export default {
components: {
DxGantt,
DxScaleTypeRange,
// ...
}
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import Gantt, {
ScaleTypeRange ,
// ...
} from 'devextreme-react/gantt';
const App = () => {
return (
<Gantt ... >
<ScaleTypeRange
min="days"
max="years" />
{/* ... */}
</Gantt>
);
};
export default App;ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
.ScaleTypeRange(e => {
e.Min(GanttScaleType.Days)
e.Max(GanttScaleType.Years)
})
// ...
)ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
.ScaleTypeRange(e => {
e.Min(GanttScaleType.Days)
e.Max(GanttScaleType.Years)
})
// ...
)See Also
Feedback