384809: Added the changes based on provided comments

Author: vikramsundarajan

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/razor

@@ -1,6 +1,6 @@
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).FrozenColumns(2).Columns(col =>
 {
-    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Edit(new { create = "createDatePicker", read = "readDatePicker", destroy = "destroyDatePicker", write = "writeDatePicker" }).Add();
     col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();

ej2-asp-core-mvc/code-snippet/grid/data-binding/custom-headers/razor

@@ -1,19 +1,20 @@
 @Html.EJS().Grid("CustomAdaptor").Columns(col =>
 {
+    col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("CustomerID").HeaderText("Customer ID").Width("160").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
 
-}).Created("created").Render()
+}).AllowPaging().Created("created").Render()
 
 <script>
     function created(args) {
         class CustomAdaptor extends ej.data.WebApiAdaptor {
             beforeSend(args, xhr, settings) {
                 xhr.withCredentials = true;
                 super.beforeSend(args, xhr, settings);
-                xhr.headers.set('Syncfusion', true);
+                xhr.headers.set('Syncfusion', true); // Assign custom headers here.
             }
         }
         var grid = document.querySelector('#CustomAdaptor').ej2_instances[0];

ej2-asp-core-mvc/code-snippet/grid/data-binding/custom-headers/tagHelper

@@ -1,8 +1,9 @@
-<ejs-grid id="CustomAdaptor" created="created">
+<ejs-grid id="CustomAdaptor" allowPaging="true" created="created">
     <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order Name" width="150" textAlign="Right"></e-grid-column>
         <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee Name" width="150" textAlign="Right"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format="C2" width="120" textAlign="Right"></e-grid-column>
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
@@ -13,7 +14,7 @@
             beforeSend(args, xhr, settings) {
                 xhr.withCredentials = true;
                 super.beforeSend(args, xhr, settings);
-                xhr.headers.set('Syncfusion', true);
+                xhr.headers.set('Syncfusion', true); // Assign custom headers here.
             }
         }
         var grid = document.querySelector('#CustomAdaptor').ej2_instances[0];

ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/tagHelper

@@ -14,7 +14,7 @@
   <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
   <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
   <e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
-  <e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
+  <e-grid-column field="City" headerText="City" width="135"></e-grid-column>
 </e-grid-columns>
 </ejs-grid>
 <script>

ej2-asp-core-mvc/code-snippet/grid/globalization/two-localization/razor

@@ -9,7 +9,7 @@
     col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-}).AllowPaging().Locale("en").Render()
+}).AllowPaging().Render()
 <script>
     ej.base.L10n.load({
         'fr-FR': {

ej2-asp-core-mvc/code-snippet/grid/globalization/two-localization/tagHelper

@@ -7,7 +7,7 @@
 </e-grid-columns>
 </ejs-grid>
 
-<ejs-grid id="Grid2" dataSource="@ViewBag.datasource" allowPaging="true" locale="en" >
+<ejs-grid id="Grid2" dataSource="@ViewBag.datasource" allowPaging="true" >
 <e-grid-columns>
     <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign= "Right"></e-grid-column>
     <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>

ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/razor

@@ -16,9 +16,9 @@
 <script>
     function created() {
         const grid = document.getElementById("grid").ej2_instances[0];
-        const query = grid.getDataModule().generateQuery();
-        const state = ej.grids.getStateEventArgument(query);
-        dataStateChange(state);
+        const query = grid.getDataModule().generateQuery(); // Generate the initial query state from the Grid's data module.
+        const state = ej.grids.getStateEventArgument(query); // Retrieve the Grid's current state based on the generated query.
+        dataStateChange(state); // Send the retrieved state to the service to fetch data accordingly.
     }
     function dataStateChange(state) {
         const grid = document.getElementById("grid").ej2_instances[0];

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-exporting.md

@@ -234,7 +234,7 @@ The following example demonstrates how to export hierarchical grid to Excel docu
 
 The Syncfusion Grid allows customization of the child Grid's Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the [ExportDetailDataBound](https://help.syncfusion.com/cr/aspnetMVC-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document.
 
-In the following example, the `ExportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [Format](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel.
+In the following example, the `ExportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [Format](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel document.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/global-local.md

@@ -295,13 +295,13 @@ To switch to the **French** culture and set the currency code as **EUR**, you ca
 
 ![Globalization-Switch-Culture](images/globalization/switch-localization.gif)
 
-### Set different locale for two Grids in same page
+### Set different Locale text for two Grids in same page
 
-The Syncfusion Grid allows configuring different [locale](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Locale) settings for multiple Grids displayed on the same page. By using the **load** function of the **L10n** class, you can customize the text content of the Grid to be displayed in different languages.
+The Syncfusion Grid allows configuring different [Locale](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Locale) settings for multiple Grids displayed on the same page. By using the **load** function of the **L10n** class, you can customize the text content of the Grid to be displayed in different languages.
 
-In this setup, each Grid can display text in a different language based on its assigned `locale`. The `load` function is used to define translations for specific languages, ensuring that each Grid correctly applies the localized text for headers, toolbar items, and action buttons.
+In this setup, each Grid can display text in a different language based on its assigned `Locale`. The `load` function is used to define translations for specific languages, ensuring that each Grid correctly applies the localized text for headers, toolbar items, and action buttons.
 
-For example, when the first Grid is set to use the **fr-FR** locale, it applies the French translations loaded via **L10n.load**. The second Grid, set to **en-US**, retains the default English text. This demonstrates how localization can be customized per Grid without affecting other components on the page.
+For example, when the first Grid is set to use the **fr-FR** Locale, it applies the French translations loaded via **L10n.load**. The second Grid, set to **en-US**, retains the default English text. This demonstrates how localization can be customized per Grid without affecting other components on the page.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md

@@ -234,7 +234,7 @@ The following example demonstrates how to export hierarchical grid to Excel docu
 
 The Syncfusion Grid allows customization of the child Grid's Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the [exportDetailDataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document.
 
-In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel. 
+In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel document. 
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/global-local.md

@@ -295,13 +295,13 @@ To switch to the **French** culture and set the currency code as **EUR**, you ca
 
 ![Globalization-Switch-Culture](images/globalization/switch-localization.gif)
 
-### Set different locale for two Grids in same page
+### Set different Locale text for two Grids in same page
 
-The Syncfusion Grid allows configuring different [locale](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Locale) settings for multiple Grids displayed on the same page. By using the **load** function of the **L10n** class, you can customize the text content of the Grid to be displayed in different languages.
+The Syncfusion Grid allows configuring different [Locale](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Locale) settings for multiple Grids displayed on the same page. By using the **load** function of the **L10n** class, you can customize the text content of the Grid to be displayed in different languages.
 
-In this setup, each Grid can display text in a different language based on its assigned `locale`. The `load` function is used to define translations for specific languages, ensuring that each Grid correctly applies the localized text for headers, toolbar items, and action buttons.
+In this setup, each Grid can display text in a different language based on its assigned `Locale`. The `load` function is used to define translations for specific languages, ensuring that each Grid correctly applies the localized text for headers, toolbar items, and action buttons.
 
-For example, when the first Grid is set to use the **fr-FR** locale, it applies the French translations loaded via **L10n.load**. The second Grid, set to **en-US**, retains the default English text. This demonstrates how localization can be customized per Grid without affecting other components on the page.
+For example, when the first Grid is set to use the **fr-FR** Locale, it applies the French translations loaded via **L10n.load**. The second Grid, set to **en-US**, retains the default English text. This demonstrates how localization can be customized per Grid without affecting other components on the page.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}