diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/NoRecordsDisplay.cs b/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/NoRecordsDisplay.cs
new file mode 100644
index 0000000000..eec9005cde
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/NoRecordsDisplay.cs
@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = GanttData.ProjectNewData();
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/razor b/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/razor
new file mode 100644
index 0000000000..ed40b7c2ed
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/razor
@@ -0,0 +1,13 @@
+@Html.EJS().Gantt("Gantt").Height("450px").TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate(
+                      "StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").ParentID("ParentId")).Locale("de-DE").Render()
+
+<script type="text/javascript">
+    ej.base.L10n.load({
+        'de-DE': {
+            'grid': {
+                "EmptyRecord": "Nothing to show here.",
+            }
+        }
+    });
+    ej.base.setCulture('de-DE');
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/tagHelper
new file mode 100644
index 0000000000..fedc2ef742
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/how-to-no-records-display-cs1/tagHelper
@@ -0,0 +1,16 @@
+<ejs-gantt id='Gantt' height="450px" locale="de-DE">
+    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
+                        duration="Duration" progress="Progress" parentID="ParentId">
+    </e-gantt-taskfields>
+</ejs-gantt>
+
+<script type="text/javascript">
+    ej.base.L10n.load({
+        'de-DE': {
+            'grid': {
+                "EmptyRecord": "Nothing to show here.",
+            }
+        }
+    });
+    ej.base.setCulture('de-DE');
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/gantt/how-to/no-records-display.md b/ej2-asp-core-mvc/gantt/how-to/no-records-display.md
new file mode 100644
index 0000000000..b234b9c588
--- /dev/null
+++ b/ej2-asp-core-mvc/gantt/how-to/no-records-display.md
@@ -0,0 +1,40 @@
+---
+layout: post
+title: Customize empty record message in ##Platform_Name## Gantt Component
+description: Learn here all about Customize the empty data source message in Syncfusion ##Platform_Name## Gantt component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Customize the empty datasource message
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+
+# Customize the empty datasource message in Angular Gantt component
+
+By default, the Gantt component displays the message "No records to display" when the data source is empty. However, you can customize this message using [`localization`](https://ej2.syncfusion.com/react/documentation/gantt/global-local#localization) to provide a more meaningful message.
+
+The following code snippets demonstrate how to achieve this.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/gantt/how-to/how-to-no-records-display-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="NoRecordsDisplay.cs" %}
+{% include code-snippet/gantt/how-to/how-to-no-records-display-cs1/no-records-display.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/gantt/how-to/how-to-no-records-display-cs1/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="NoRecordsDisplay.cs" %}
+{% include code-snippet/gantt/how-to/how-to-no-records-display-cs1/no-records-display.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index 3fae4bc6e4..be66d93831 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -1310,6 +1310,7 @@
 			<li><a href="/ej2-asp-core/gantt/how-to/drag-and-drop">Drag and drop from another component</a></li>
 			<li><a href="/ej2-asp-core/gantt/how-to/new-row-position">Add new row position while adding</a></li>
 			<li><a href="/ej2-asp-core/gantt/how-to/restrict-collapse-chart-rows">Restrict collapsing of records when clicking on Gantt chart rows</a></li>
+			<li><a href="/ej2-asp-core/gantt/how-to/no-records-display">Customize the empty datasource message</a></li>
 			</ul>
 			</li>
 			<li>
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index 49d718ae2e..510efe550d 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1258,6 +1258,7 @@
 			<li><a href="/ej2-asp-mvc/gantt/how-to/drag-and-drop">Drag and drop from another component</a></li>
 			<li><a href="/ej2-asp-mvc/gantt/how-to/new-row-position">Add new row position while adding</a></li>
 			<li><a href="/ej2-asp-mvc/gantt/how-to/restrict-collapse-chart-rows">Restrict collapsing of records when clicking on Gantt chart rows</a></li>
+			<li><a href="/ej2-asp-mvc/gantt/how-to/no-records-display">Customize the empty datasource message</a></li>
 			</ul>
 			</li>
 			<li>