diff --git a/ej2-javascript/grid/columns/frozen-column.md b/ej2-javascript/grid/columns/frozen-column.md index eea725e2c..2180e99bc 100644 --- a/ej2-javascript/grid/columns/frozen-column.md +++ b/ej2-javascript/grid/columns/frozen-column.md @@ -187,7 +187,7 @@ The following example demonstrates how to change the default frozen line color u {% previewsample "page.domainurl/code-snippet/grid/frozen-columns-cs4" %} {% endif %} -## Render DatePicker in frozen columns in ##Platform_Name## Grid +## Render DatePicker in frozen columns in Grid The Syncfusion® ##Platform_Name## Grid allows rendering a [DatePicker](https://ej2.syncfusion.com/demos/#/bootstrap5/datepicker/default) inside frozen columns during editing. This is achieved using the [edit](https://ej2.syncfusion.com/documentation/api/grid/column/#edit) property, where a custom editor (DatePicker) is assigned to the specific column. diff --git a/ej2-javascript/grid/connecting-to-database/postgresql-server.md b/ej2-javascript/grid/connecting-to-database/postgresql-server.md index 2bc712f1a..51ee7eb80 100644 --- a/ej2-javascript/grid/connecting-to-database/postgresql-server.md +++ b/ej2-javascript/grid/connecting-to-database/postgresql-server.md @@ -1539,11 +1539,11 @@ When you run the application, the resultant Grid will look like this {% if page.publishingplatform == "typescript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20UrlAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20UrlAdaptor). {% elsif page.publishingplatform == "javascript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20UrlAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20UrlAdaptor). {% endif %} @@ -2880,10 +2880,10 @@ public class CRUDModel where T : class {% if page.publishingplatform == "typescript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20CustomAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20CustomAdaptor). {% elsif page.publishingplatform == "javascript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20CustomAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20PostgreSQL%20database%20using%20CustomAdaptor). {% endif %} \ No newline at end of file diff --git a/ej2-javascript/grid/connecting-to-database/sqlite-server.md b/ej2-javascript/grid/connecting-to-database/sqlite-server.md index 0007a6be5..00c19a2cf 100644 --- a/ej2-javascript/grid/connecting-to-database/sqlite-server.md +++ b/ej2-javascript/grid/connecting-to-database/sqlite-server.md @@ -1516,11 +1516,11 @@ When you run the application, the resultant Grid will look like this {% if page.publishingplatform == "typescript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20SQLite%20using%20UrlAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20SQLite%20using%20UrlAdaptor). {% elsif page.publishingplatform == "javascript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20SQLite%20using%20UrlAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20SQLite%20using%20UrlAdaptor). {% endif %} @@ -2854,10 +2854,10 @@ public class CRUDModel where T : class {% if page.publishingplatform == "typescript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20SQLite%20using%20CustomAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-typescript-grid/tree/master/Binding%20SQLite%20using%20CustomAdaptor). {% elsif page.publishingplatform == "javascript" %} -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20SQLite%20using%20CustomAdaptor). +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-javascript-grid/tree/master/Binding%20SQLite%20using%20CustomAdaptor). {% endif %} diff --git a/ej2-javascript/grid/editing/edit.md b/ej2-javascript/grid/editing/edit.md index 5184deadf..d40bd85fc 100644 --- a/ej2-javascript/grid/editing/edit.md +++ b/ej2-javascript/grid/editing/edit.md @@ -331,47 +331,6 @@ In the following code example, the Employee Name is a foreign key column. When e {% previewsample "page.domainurl/code-snippet/grid/edit-foreignKey-column" %} {% endif %} -## Prevent adding duplicate rows in Syncfusion® ##Platform_Name## Grid with custom validation - -The Syncfusion® ##Platform_Name## Grid allows you to enforce constraints to prevent duplicate rows by customizing the validation logic within the Grid setup. This ensures data integrity by restricting duplicate entries in the **OrderID** column. - -To prevent adding duplicate rows in the Grid, follow these steps: - -1. Implement Custom Validation: Define the `orderIdCustomValidation` function to check whether the entered **OrderID** already exists in the [dataSource](../../api/grid/#datasource). This allows editing an existing row without triggering a duplicate error. - -2. Add Dynamic Validation Rules: Create the `orderIDRules` object to enforce unique **OrderID** values. Dynamically add this rule to the form during the **save** action. - -3. Handle Validation in the [actionBegin](../../api/grid/#actionbegin) event: In the `actionBegin` event, check if the **requestType** is **save**. Apply the validation rule before saving and cancel the action `args.cancel = true` if the validation fails. - -For server-side validation to prevent adding duplicate rows, you can refer to the detailed guidance provided in our [knowledge base](https://support.syncfusion.com/kb/article/11608/how-to-do-server-side-validation-for-grid-in-asp-net-mvc-application). If you want to display the Grid's validation tooltip instead of the alert used in our knowledge base, you can call the `grid.editModule.formObj.validate()` method in the `Ajax/Fetch` success function to display the Grid's tooltip validation for the server side. - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/grid/add-prevent-duplicate-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/grid/add-prevent-duplicate-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/grid/add-prevent-duplicate-cs1" %} - -{% elsif page.publishingplatform == "javascript" %} - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/grid/add-prevent-duplicate-cs1/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/grid/add-prevent-duplicate-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/grid/add-prevent-duplicate-cs1" %} -{% endif %} - ## How to perform CRUD action externally Performing CRUD (Create, Read, Update, Delete) actions externally in the Syncfusion® Grid allows you to manipulate grid data outside the grid itself. This can be useful in scenarios where you want to manage data operations programmatically. diff --git a/ej2-javascript/grid/editing/validation.md b/ej2-javascript/grid/editing/validation.md index 2ddf7ebe2..03f48583c 100644 --- a/ej2-javascript/grid/editing/validation.md +++ b/ej2-javascript/grid/editing/validation.md @@ -881,4 +881,45 @@ namespace UrlAdaptor.Models The following screenshot illustrates how to retrieve and display error messages when CRUD operations fail: -![custom error message](../../grid/images/custom-error-message.png) \ No newline at end of file +![custom error message](../../grid/images/custom-error-message.png) + +## Prevent adding duplicate rows with custom validation + +The Syncfusion ##Platform_Name## Grid allows you to enforce constraints to prevent duplicate rows by customizing the validation logic within the Grid setup. This ensures data integrity by restricting duplicate entries in the **OrderID** column. + +To prevent adding duplicate rows in the Grid, follow these steps: + +1. Implement Custom Validation: Define the `orderIdCustomValidation` function to check whether the entered **OrderID** already exists in the [dataSource](../../api/grid/#datasource). This allows editing an existing row without triggering a duplicate error. + +2. Add Dynamic Validation Rules: Create the `orderIDRules` object to enforce unique **OrderID** values. Dynamically add this rule to the form during the **save** action. + +3. Handle Validation in the [actionBegin](../../api/grid/#actionbegin) event: In the `actionBegin` event, check if the **requestType** is **save**. Apply the validation rule before saving and cancel the action `args.cancel = true` if the validation fails. + +For server-side validation to prevent adding duplicate rows, you can refer to the detailed guidance provided in our [knowledge base](https://support.syncfusion.com/kb/article/11608/how-to-do-server-side-validation-for-grid-in-asp-net-mvc-application). If you want to display the Grid's validation tooltip instead of the alert used in our knowledge base, you can call the `grid.editModule.formObj.validate()` method in the `Ajax/Fetch` success function to display the Grid's tooltip validation for the server side. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/add-prevent-duplicate-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/add-prevent-duplicate-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/add-prevent-duplicate-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/add-prevent-duplicate-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/add-prevent-duplicate-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/add-prevent-duplicate-cs1" %} +{% endif %} \ No newline at end of file