We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to prevent the addition of duplicate records to the Grid Mode Dialog Template

Thread ID:

Created:

Updated:

Platform:

Replies:

150942 Jan 25,2020 07:23 AM UTC Mar 31,2020 11:13 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
luis
Asked On January 25, 2020 07:23 AM UTC


I want to insert only unique code identification record in grid 

if I will enter non-unique record in grid in net core js2.

I should show me an error.

Thank you, waiting for you example reply


Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 27, 2020 12:47 PM UTC

Hi Luis, 
 
Thanks for contacting Syncfusion support. 
 
To achieve your requirement, we have used the Custom Validation of EJ2 Grid. The Custom validation is used to define own custom validation rules for the specific columns by using Form Validator custom rules. In this we have checked if the record entered is already present in the Datasource using customFuntion of validation. 
 
Please refer to the below code snippet and sample link for more information. 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" actionBegin="actionBegin" load=”load” actionFailure="actionFailure" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 

<script> 
function load(args) { 
              this.columns[0].validationRules = { required: true, value: [customFn, 'Enter a unique value'] }; 

function customFn(args) { 
              var grid = document.getElementById('Grid').ej2_instances[0]; 
              for (i = 0; i < grid.dataSource.length; i++) { 
                             if (args['value'] === grid.dataSource[i].OrderID.toString())
                                           return false; 
                             } 
                             else { 
                                           return true; 
                             } 
              } 
}; 
</script> 

 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 
 


luis
Replied On January 27, 2020 09:05 PM UTC

It does not allow me to download the example, the permission is not associated with my account.


Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 28, 2020 07:07 AM UTC

Hi Luis, 
 
Sorry for the inconvenience caused. 
 
We have attached the new sample and please download the sample from the following link 
 
 
Regards, 
Prasanna Kumar N.S.V 


luis
Replied On March 31, 2020 02:24 AM UTC

The example does not work.





I implemented it this way because load locks the grid.


function actionComplete(args) {

if (args.requestType === 'beginEdit' || args.requestType === 'add') {
if (args.requestType === 'beginEdit') {
args.dialog.header = 'Modificar Registro';
args.dialog.width = '500px';
args.dialog.height = '400px';
var ajax = new ej.base.Ajax({
url: "@Url.Action("EditPartial", "Cargos")", //render the Edit partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form in newly created template with the selected record
args.form.elements.namedItem('Codigo').focus();
}).catch(function (xhr) {
console.log(xhr);
});
}
if (args.requestType === 'add') {
args.dialog.header = 'Adicionar Registro';
args.dialog.width = '500px';
args.dialog.height = '400px';
var ajax = new ej.base.Ajax({
url: "@Url.Action("AddPartial","Cargos")", //render the Add partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form with selected record
args.form.elements.namedItem('Codigo').focus();
}).catch(function (xhr) {
console.log(xhr);
});
}


if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {

// Add Validation Rules
args.form.ej2_instances[0].addRules('Codigo', { required: [true, 'Este dato es requerido'], maxLength: [10, '10 caracteres máximo'], value: [customFn, 'Enter a unique value'] });

}

}
}

function customFn(args) {
var grid = document.getElementById('Grid').ej2_instances[0];
for (i = 0; i < grid.dataSource.length; i++) {
if (args['value'] === grid.dataSource[i].Codigo.toString()) {
return false;
}
else {
return true;
}
}
};




Please review what happens. in advance Thanks for the support.

Manivel Sellamuthu [Syncfusion]
Replied On March 31, 2020 11:13 AM UTC

Hi luis, 

Thanks for your update. 

Based on your code example we have modified the sample at our end, but the validation rules are working fine and duplicate values are prevented. We have attached the sample and our modified code example for your reference. 

Please note that while adding validation rules for form in Dialog template validation will be performed after focus-out only. 

@{ 
    ViewData["Title"] = "Home Page"; 
} 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" actionBegin="actionBegin" actionFailure="actionFailure" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div id="dialogTemp"> 
    </div> 
</script> 
 
<script type="text/javascript"> 
 
    function customFn(args) { 
        debugger 
        var grid = document.getElementById('Grid').ej2_instances[0]; 
        for (i = 0; i < grid.dataSource.length; i++) { 
            if (args['value'] === grid.dataSource[i].OrderID.toString()) { 
                return false; 
            } 
            else { 
                return true; 
            } 
        } 
    }; 
 
    function actionBegin(args) { 
        if (args.requestType === 'save') { 
            console.log(args); 
        } 
    } 
 
    function actionFailure(args) { 
        console.log(args); 
    } 
 
    function actionComplete(args) { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
              args.form.ej2_instances[0].addRules('OrderID', { required: [true, 'Este dato es requerido'], maxLength: [10, '10 caracteres máximo'], value: [customFn, 'Enter a unique value'] }); 
                let spinner = ej.popups.createSpinner({ target: args.dialog.element }); 
                ej.popups.showSpinner(args.dialog.element); 
                if (args.requestType === 'beginEdit') { 
                    var ajax = new ej.base.Ajax({ 
                        url: "@Url.Action("Editpartial", "Home")", //render the partial view 
                        type: "POST", 
                        contentType: "application/json", 
                        data: JSON.stringify({ value: args.rowData }) 
                    }); 
                    ajax.send().then(function (data) { 
                        appendElement(data, args.form); //Render the edit form with selected record 
                        args.form.elements.namedItem('CustomerID').focus(); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }).catch(function (xhr) { 
                        console.log(xhr); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }); 
                } 
                if (args.requestType === 'add') { 
                    var ajax = new ej.base.Ajax({ 
                        url: "@Url.Action("Addpartial","Home")", //render the partial view 
                        type: "POST", 
                        contentType: "application/json", 
                        data: JSON.stringify({ value: args.rowData }) 
                    }); 
                    ajax.send().then(function (data) { 
                        appendElement(data, args.form); //Render the edit form with selected record 
                        args.form.elements.namedItem('OrderID').focus(); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }).catch(function (xhr) { 
                        console.log(xhr); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }); 
                } 
            } 
    } 
 
    function appendElement(elementString, form) { 
        form.querySelector("#dialogTemp").innerHTML = elementString; 
        var script = document.createElement('script'); 
        script.type = "text/javascript"; 
        var serverScript = form.querySelector("#dialogTemp").querySelector('script'); 
        script.textContent = serverScript.innerHTML; 
        document.head.appendChild(script); 
        serverScript.remove(); 
    } 
</script> 


If you still faced the issue, please replicate the issue in the attached sample. 

Regards, 
Manivel 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon