896225: Searching Documentation

Author: NithyaSivaprakasam

ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/tagHelper

@@ -1,14 +1,12 @@
 <div style="display: flex">
     <label style="padding: 10px 10px 26px 0"> Change the Grid lines: : </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="change"></ejs-dropdownlist>
     </span>
 </div>
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
     <e-grid-columns>
-        <e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right"
-            width="120"></e-grid-column>
-
+        <e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="NumberOfINPADOCPatents" headerText="NumberOfINPADOCPatents" width="150"></e-grid-column>
         <e-grid-column field="MainFieldsOfInvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
@@ -18,7 +16,7 @@
 </div>
 
 <script type="text/javascript">
-    function Change(args) {
+    function change(args) {
         var grid = document.getElementById("Grid").ej2_instances[0];
         grid.gridLines = args.value;
     }

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md

@@ -18,7 +18,7 @@ The Grid component allows you to customize the appearance and behavior of cells
 
 Displaying HTML content in a Grid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid component allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the `DisableHtmlEncode` property by setting the value as **false** to display HTML tags without encoding. This feature is useful when you want to display HTML content in a grid cell.
 
-In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is added  to enable and disable the `DisableHtmlEncode` property. When the switch is toggled, the [change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event is triggered and the `DisableHtmlEncode` property of the column is updated accordingly. The `refreshColumns` method is called to refresh the grid and display the updated content.
+In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is added  to enable and disable the `DisableHtmlEncode` property. When the switch is toggled, the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event is triggered and the `DisableHtmlEncode` property of the column is updated accordingly. The `refreshColumns` method is called to refresh the grid and display the updated content.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -36,7 +36,7 @@ In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.
 > * If the property is set to **false**, the HTML tags will be removed and displayed as plain text.
 > * Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature.
 > * If [EnableHtmlSanitizer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EnableHtmlSanitizer) property of grid is set to true, then the content is sanitized to prevent any potential security vulnerabilities.
-> * You can also disable the `DisableHtmlEncode` property of the column using `getColumns` method on [change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event of Switch component.This is demonstrated in the below code snippet, 
+> * You can also disable the `DisableHtmlEncode` property of the column using `getColumns` method on [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event of Switch component.This is demonstrated in the below code snippet, 
 
 ```javascript
 function change(args) {
@@ -53,15 +53,15 @@ function change(args) {
 
 The auto wrap feature allows the cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
 
-To enable auto wrap, set the [allowTextWrap](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can also configure the wrap mode by setting the [textWrapSettings.wrapMode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property.
+To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can also configure the wrap mode by setting the [WrapMode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property.
 
 Grid provides the below three options for configuring:
 
 * **Both** - This is the default value for wrapMode. With this option, both the grid **Header** and **Content** text is wrapped.
 * **Header** - With this option, only the grid header text is wrapped.
 * **Content** - With this option, only the grid content is wrapped.
 
-The following example demonstrates how to set the `allowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `textWrapSettings.wrapMode` property. Also change the `textWrapSettings.wrapMode` property to **Content** and **Both** on changing the dropdown value using the [change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component.
+The following example demonstrates how to set the `AllowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `WrapMode` property. Also change the `WrapMode` property to **Content** and **Both** on changing the dropdown value using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -84,9 +84,9 @@ Customizing the grid cell styles allows you to modify the appearance of cells in
 
 ### Using event
 
-To customize the appearance of the grid cell, you can use the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header cell.
+To customize the appearance of the grid cell, you can use the [QueryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header cell.
 
-The following example demonstrates how to add a `queryCellInfo` event handler to the grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value.
+The following example demonstrates how to add a `QueryCellInfo` event handler to the grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -99,7 +99,7 @@ The following example demonstrates how to add a `queryCellInfo` event handler to
 
 ![Customize cell using event](../images/cell/customize-cell-using-event.png)
 
-> * The [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells.
+> * The [QueryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells.
 
 ### Using CSS
 
@@ -127,7 +127,7 @@ The following example demonstrates how to customize the appearance of a specific
 
 ### Using property
 
-To customize the style of grid cells, define `customAttributes` property to the column definition object. The `customAttributes` property takes an object with the name-value pair to customize the CSS properties for grid cells. You can also set multiple CSS properties to the custom class using the `customAttributes` property.
+To customize the style of grid cells, define `CustomAttributes` property to the column definition object. The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for grid cells. You can also set multiple CSS properties to the custom class using the `CustomAttributes` property.
 
 ```CSS
 .custom-css {
@@ -164,7 +164,7 @@ The Grid provides below methods to customize the appearance of the grid columns
 
 2. **getCellFromIndex**: The `getCellFromIndex` method is used to customize the appearance of a specific cell in the grid by specifying the index of the row and column for which you want to customize the appearance.
 
-The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the **CustomerID** column header and specific cell inside the [dataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the grid.
+The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the **CustomerID** column header and specific cell inside the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the grid.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -189,7 +189,7 @@ There are three types of `ClipMode` available:
 * **Ellipsis**: Displays ellipsis when the cell content overflows its area.
 * **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis is applied.
 
-The following example demonstrates, how to set the `clipMode` property to **Clip** , **Ellipsis** and **EllipsisWithTooltip** for the **Main Fields of Invention** column, on changing the dropdown value using the [change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component. The `refresh` method is used to refresh the grid and display the updated content.
+The following example demonstrates, how to set the `ClipMode` property to **Clip** , **Ellipsis** and **EllipsisWithTooltip** for the **Main Fields of Invention** column, on changing the dropdown value using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component. The `refresh` method is used to refresh the grid and display the updated content.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -203,7 +203,7 @@ The following example demonstrates, how to set the `clipMode` property to **Clip
 ![Clip Mode](../images/cell/clip-mode.gif)
 
 > * By default, `ClipMode` value is **Ellipsis**.
-> * If you set the [width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) property of a column, the clip mode feature will be automatically applied to that column if the content exceeds the specified width.
+> * If you set the [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) property of a column, the clip mode feature will be automatically applied to that column if the content exceeds the specified width.
 > * Be careful when using the Clip mode, as it may result in important information being cut off. It is generally recommended to use the Ellipsis or EllipsisWithTooltip modes instead.
 
 ## Tooltip
@@ -249,7 +249,7 @@ The Grid provides a feature to display custom tooltips for its columns using the
 
 To enable custom tooltips for columns in the Grid, you can render the Grid control inside the Tooltip component and set the target as `.e-rowcell`. This will display the tooltip when hovering over the grid cells.
 
-Change the tooltip content for the grid cells by using the following code in the [beforeRender](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Popups.Tooltip.html#Syncfusion_EJ2_Popups_Tooltip_BeforeRender) event.
+Change the tooltip content for the grid cells by using the following code in the [BeforeRender](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Popups.Tooltip.html#Syncfusion_EJ2_Popups_Tooltip_BeforeRender) event.
 
 ```typescript
  beforeRender(args): void {
@@ -261,7 +261,7 @@ Change the tooltip content for the grid cells by using the following code in the
 
 ```
 
-The following example demonstrates how to customize the tooltip content for the grid cells by using the `beforeRender` event of the EJ2 Tooltip component.
+The following example demonstrates how to customize the tooltip content for the grid cells by using the `BeforeRender` event of the EJ2 Tooltip component.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}