Skip to content

Update ASP.NET code snippets (Gantt, batch 5) (#8925) #8933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vladaskorohodova merged 1 commit into from
Jun 26, 2026
Merged

Update ASP.NET code snippets (Gantt, batch 5) (#8925) #8933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions api-reference/10 UI Components/dxGantt/1 Configuration/editing/editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,15 +160,15 @@ The UI component allows users to add, modify and delete tasks, resources and dep
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.Editing(e => {
e.Enabled(true)
e.AllowDependencyAdding(false)
e.AllowDependencyDeleting(false)
e.AllowResourceAdding(false)
e.AllowResourceDeleting(false)
e.AllowTaskAdding(false)
e.AllowTaskDeleting(false)
e.AllowTaskResourceUpdating(false)
e.AllowTaskUpdating(false)
e.Enabled(true);
e.AllowDependencyAdding(false);
e.AllowDependencyDeleting(false);
e.AllowResourceAdding(false);
e.AllowResourceDeleting(false);
e.AllowTaskAdding(false);
e.AllowTaskDeleting(false);
e.AllowTaskResourceUpdating(false);
e.AllowTaskUpdating(false);
})
// ...
)
Expand Down
24 changes: 12 additions & 12 deletions api-reference/10 UI Components/dxGantt/1 Configuration/endDateRange.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ Specifies the end date of the date interval in the Gantt chart.
<!--JavaScript-->
$(function() {
$("#gantt").dxGantt({
startDateRange: new Date(2018, 01, 1),
endDateRange: new Date(2020, 01, 1)
startDateRange: new Date(2024, 01, 1),
endDateRange: new Date(2026, 01, 1)
// ...
});
});
Expand Down Expand Up @@ -49,8 +49,8 @@ Specifies the end date of the date interval in the Gantt chart.
endDateRange: Date;

constructor() {
startDateRange: new Date("2018/01/01");
endDateRange: new Date("2020/01/01");
startDateRange: new Date("2024/01/01");
endDateRange: new Date("2026/01/01");
}
}

Expand Down Expand Up @@ -96,8 +96,8 @@ Specifies the end date of the date interval in the Gantt chart.
},
data() {
return {
startDateRange: new Date(2018, 12, 1),
endDateRange: new Date(2020, 12, 1),
startDateRange: new Date(2024, 12, 1),
endDateRange: new Date(2026, 12, 1),
}
}
};
Expand All @@ -116,8 +116,8 @@ Specifies the end date of the date interval in the Gantt chart.
} from 'devextreme-react/gantt';

const App = () => {
const startDateRange = new Date(2018, 1, 1);
const endDateRange = new Date(2020, 1, 1);
const startDateRange = new Date(2024, 1, 1);
const endDateRange = new Date(2026, 1, 1);

return (
<Gantt
Expand All @@ -134,17 +134,17 @@ Specifies the end date of the date interval in the Gantt chart.

<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.StartDateRange(new Date("January 1, 2018"))
.EndDateRange(new Date("January 1, 2020"))
.StartDateRange(new DateTime(2024, 1, 1))
.EndDateRange(new DateTime(2026, 1, 1))
// ...
)

##### ASP.NET MVC Controls

<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.StartDateRange(new Date("January 1, 2018"))
.EndDateRange(new Date("January 1, 2020"))
.StartDateRange(new DateTime(2024, 1, 1))
.EndDateRange(new DateTime(2026, 1, 1))
// ...
)

Expand Down
45 changes: 21 additions & 24 deletions api-reference/10 UI Components/dxGantt/1 Configuration/headerFilter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
visible: true,
width: 280,
height: 350,
searchTimeout: 800
search: {
timeout: 800
}
},
// ...
});
Expand All @@ -42,8 +44,9 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
<dxo-gantt-header-filter
[visible]="true"
[width]="280"
[height]="350"
[searchTimeout]="800" >
[height]="350">
<dxo-gantt-header-filter-search [timeout]="800">
</dxo-gantt-header-filter-search>
</dxo-gantt-header-filter>
<!-- ... -->
</dx-gantt>
Expand Down Expand Up @@ -86,12 +89,13 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
:visible="true"
:width="280"
:height="350"
:search-timeout="800"
/>
>
<DxSearch timeout="800" />
</DxHeaderFilter>
<!-- ... -->
</DxGantt>
</template>
<script>
<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';

Expand All @@ -100,14 +104,6 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
DxHeaderFilter,
// ...
} from 'devextreme-vue/gantt';

export default {
components: {
DxGantt,
DxHeaderFilter,
// ...
}
};
</script>

##### React
Expand All @@ -129,8 +125,9 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
<HeaderFilter
visible={true}
width={280}
height={350}
searchTimeout={800} />
height={350}>
<Search timeout={800} />
</HeaderFilter>
{/* ... */}
</Gantt>
);
Expand All @@ -143,10 +140,10 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.HeaderFilter(e => {
e.Visible(true)
e.Width(280)
e.Height(350)
e.SearchTimeout(800)
e.Visible(true);
e.Width(280);
e.Height(350);
e.Search(f => f.Timeout(500));
})
// ...
)
Expand All @@ -156,10 +153,10 @@ Set the **headerFilter**.[visible](/api-reference/_hidden/dxGanttHeaderFilter/vi
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.HeaderFilter(e => {
e.Visible(true)
e.Width(280)
e.Height(350)
e.SearchTimeout(800)
e.Visible(true);
e.Width(280);
e.Height(350);
e.Search(f => f.Timeout(500));
})
// ...
)
Expand Down
20 changes: 10 additions & 10 deletions api-reference/10 UI Components/dxGantt/1 Configuration/onScaleCellPrepared.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,15 +116,15 @@ The example below illustrates how to customize the scale.
},
methods: {
onScaleCellPrepared: function(e) {
var scaleElement = e.scaleElement[0];
const scaleElement = e.scaleElement[0];
if(e.scaleIndex === 0) {
scaleElement.style.backgroundColor = "silver";
scaleElement.innerText = "bottom";
} else {
scaleElement.style.backgroundColor = "LightSteelBlue";
scaleElement.innerText = "top";
}
var border = e.separatorElement[0];
const border = e.separatorElement[0];
border.style.borderColor = "steelBlue";
}
}
Expand Down Expand Up @@ -175,15 +175,15 @@ The example below illustrates how to customize the scale.
)
<script>
function gantt_scaleCellPrepared_handler(e) {
var scaleElement = e.scaleElement[0];
const scaleElement = e.scaleElement[0];
if(e.scaleIndex === 0) {
scaleElement.style.backgroundColor = "silver";
scaleElement.innerText = "bottom";
} else {
scaleElement.style.backgroundColor = "LightSteelBlue";
scaleElement.innerText = "top";
}
var border = e.separatorElement[0];
const border = e.separatorElement[0];
border.style.borderColor = "steelBlue";
}
</script>
Expand Down Expand Up @@ -274,9 +274,9 @@ The code below colors the scale cells depending on the season:
},
methods: {
onScaleCellPrepared: function(e) {
var scaleElement = e.scaleElement;
var color = "";
var month = e.end.getMonth();
const scaleElement = e.scaleElement;
let color = "";
const month = e.end.getMonth();
if (month > 1 && month < 5) {
color = "lightGreen";
} else if (month > 4 && month < 8) {
Expand Down Expand Up @@ -337,9 +337,9 @@ The code below colors the scale cells depending on the season:
)
<script>
function gantt_scaleCellPrepared_handler(e) {
var scaleElement = e.scaleElement;
var color = "";
var month = e.end.getMonth();
const scaleElement = e.scaleElement;
let color = "";
const month = e.end.getMonth();
if (month > 1 && month < 5) {
color = "lightGreen";
} else if (month > 4 && month < 8) {
Expand Down
8 changes: 4 additions & 4 deletions ...rence/10 UI Components/dxGantt/1 Configuration/scaleTypeRange/scaleTypeRange.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@ Use the [scaleTypeRange.min](/api-reference/10%20UI%20Components/dxGantt/1%20Con
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.ScaleTypeRange(e => {
e.Min(GanttScaleType.Days)
e.Max(GanttScaleType.Years)
e.Min(GanttScaleType.Days);
e.Max(GanttScaleType.Years);
})
// ...
)
Expand All @@ -137,8 +137,8 @@ Use the [scaleTypeRange.min](/api-reference/10%20UI%20Components/dxGantt/1%20Con
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.ScaleTypeRange(e => {
e.Min(GanttScaleType.Days)
e.Max(GanttScaleType.Years)
e.Min(GanttScaleType.Days);
e.Max(GanttScaleType.Years);
})
// ...
)
Expand Down
12 changes: 6 additions & 6 deletions api-reference/10 UI Components/dxGantt/1 Configuration/showDependencies.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Specifies whether to display [dependencies](/api-reference/10%20UI%20Components/
<!--JavaScript-->
$(function() {
$("#gantt").dxGantt({
showResources: false,
showDependencies: false,
// ...
});
});
Expand All @@ -29,7 +29,7 @@ Specifies whether to display [dependencies](/api-reference/10%20UI%20Components/

<!-- tab: app.component.html -->
<dx-gantt
[showResources]="false">
[showDependencies]="false">
<!-- ... -->
</dx-gantt>

Expand Down Expand Up @@ -67,7 +67,7 @@ Specifies whether to display [dependencies](/api-reference/10%20UI%20Components/
<!-- tab: App.vue -->
<template>
<DxGantt
:show-resources="false" >
:show-dependencies="false" >
<!-- ... -->
</DxGantt>
</template>
Expand Down Expand Up @@ -103,7 +103,7 @@ Specifies whether to display [dependencies](/api-reference/10%20UI%20Components/
const App = () => {
return (
<Gantt
showResources={false} >
showDependencies={false} >
{/* ... */}
</Gantt>
);
Expand All @@ -115,15 +115,15 @@ Specifies whether to display [dependencies](/api-reference/10%20UI%20Components/

<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.ShowResources(false)
.ShowDependencies(false)
// ...
)

##### ASP.NET MVC Controls

<!-- Razor C# -->
@(Html.DevExtreme().Gantt()
.ShowResources(false)
.ShowDependencies(false)
// ...
)

Expand Down
20 changes: 10 additions & 10 deletions api-reference/10 UI Components/dxGantt/1 Configuration/sorting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,11 @@ To clear sorting for a column, hold Ctrl and click the column header. You can al
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.Sorting(s => {
s.Mode(GridSortingMode.Multiple)
s.ShowSortIndexes(true)
s.AscendingText("Ascending Order")
s.DescendingText("Descending Order")
s.ClearText("Clear Sort")
s.Mode(GanttSortingMode.Multiple);
s.ShowSortIndexes(true);
s.AscendingText("Ascending Order");
s.DescendingText("Descending Order");
s.ClearText("Clear Sort");
})
// ...
)
Expand All @@ -170,11 +170,11 @@ To clear sorting for a column, hold Ctrl and click the column header. You can al
<!--Razor C#-->
@(Html.DevExtreme().Gantt()
.Sorting(s => {
s.Mode(GridSortingMode.Multiple)
s.ShowSortIndexes(true)
s.AscendingText("Ascending Order")
s.DescendingText("Descending Order")
s.ClearText("Clear Sort")
s.Mode(GanttSortingMode.Multiple);
s.ShowSortIndexes(true);
s.AscendingText("Ascending Order");
s.DescendingText("Descending Order");
s.ClearText("Clear Sort");
})
// ...
)
Expand Down
Loading
Loading