This is a migrated thread and some comments may be shown as answers.

How to avoid duplicate entry in Grid

9 Answers 581 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Quest Resource Management
Top achievements
Rank 1
Quest Resource Management asked on 27 Dec 2012, 02:56 PM
Hello,

How to avoid duplicate entry in Grid / Inline editing?

I am used MVC 4 With Eazor.

Thanks,
Quest

9 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 28 Dec 2012, 02:08 PM
Hello Eric,

 We are not sure what you mean by duplicate. Could you please clarify? Generally speaking you can implement a custom validator to perform any non-standard validation.

Greetings,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Quest Resource Management
Top achievements
Rank 1
answered on 29 Dec 2012, 08:50 AM
Hello Atanas,

Please check attached screenshot.

Thanks,
Quest

0
Atanas Korchev
Telerik team
answered on 29 Dec 2012, 09:12 AM
Hi Eric,

 Thank you for the clarification. I understand now what you need.

 Currently Kendo Grid does not provide any built-in feature which would prevent such cases. Perhaps this can be implemented using custom validation. Here is a forum thread discussion custom validation in the context of grid editing. This thread may also be interesting to you.

Kind regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 2
answered on 13 Jul 2018, 03:59 PM

I use custom validation on the schema field:

Name: {
    editable: true,
    type: "string",
    validation: {
        required: true,
        duplicate: function (input) {
            if (input.is("[name='Name']") && input.val() != "") {
                // 1. get data
                var name = input.val();
                var data = $("#personnel_screen_grid").data().kendoGrid.dataSource.view()
 
                // 2. check for duplicate
                var valid = true;
                for (var i = 0; i < data.length; i++) {
                    if (name == data[i].Name) {
                        valid = false;
                        input.attr("data-duplicate-msg", "Duplicates not allowed.");
                        break;
                    }
                }
                return valid;
            }
 
            return true;
        },
    },
},
0
Robert
Top achievements
Rank 2
answered on 13 Jul 2018, 04:22 PM

I forgot to check for a ID when you're adding a new row:

Name: {
    editable: true,
    type: "string",
    validation: {
        required: true,
        duplicate: function (input) {
            if (input.is("[name='Name']") && input.val() != "") {
                // 1. get data
                var name = input.val();
                var data = $("#personnel_screen_grid").data().kendoGrid.dataSource.view()
                console.log(JSON.stringify(data));
 
                // 2. check for duplicate
                var valid = true;
                for (var i = 0; i < data.length; i++) {
                    if ((name == data[i].Name) && data[i]._id) {
                        valid = false;
                        input.attr("data-duplicate-msg", "Duplicates not allowed.");
                        break;
                    }
                }
                return valid;
            }
 
            return true;
        },
    },
},
0
Robert
Top achievements
Rank 2
answered on 13 Jul 2018, 08:14 PM

You could not edit the current row name with the last code.  I fixed that here:

Name: {
    editable: true,
    type: "string",
    validation: {
        required: true,
        duplicate: function (input) {
            if (input.is("[name='Name']") && input.val() != "") {
                // 1. get data
                var name = input.val();
                var grid = $("#personnel_screen_grid").data('kendoGrid');
                var view = grid.dataSource.view();
                var dataItem = grid.dataItem(grid.current().closest("tr"));
                var name_edit = dataItem.Name;
 
                // 2. check for duplicate
                var valid = true;
                for (var i = 0; i < view.length; i++) {
                    if ((name == view[i].Name) && (name != name_edit) && view[i].id) {
                        valid = false;
                        input.attr("data-duplicate-msg", "Duplicates not allowed.");
                        break;   
                    }
                }
                return valid;
            }
 
            return true;
        },
    },
},
0
Han
Top achievements
Rank 1
answered on 18 Mar 2019, 09:01 AM

Hi Robert,

 

I tried this code to get a current row:

but it through an exception: Uncaught TypeError: grid.current is not a function 

var name = input.val();
 var grid = $scope.mainGridOptions;
 var data = grid.dataSource.view();
 var dataItem = grid.dataSource(grid.current().closest("tr"));
 console.log(dataItem);

 

0
Han
Top achievements
Rank 1
answered on 20 Mar 2019, 07:15 AM

Hello,

I've figured it out.

thank you

0
Imran
Top achievements
Rank 1
Iron
answered on 05 May 2021, 12:40 PM

I have achieved this by doing the following

 



 var name = input.val();
                                           var grid = $("#grid").data('kendoGrid');
                                           var view = grid.dataSource.view();
                                           var dataItem = grid.dataItem(input.closest("tr"));

 

Tsvetomir
Telerik team
commented on 07 May 2021, 07:14 AM

When the grid enters edit mode, it creates an "editable" object that is available only for the edited row. It contains the data item of the data source and you could access it as follows: $("#grid").getKendoGrid().editable.options.model.
Anthar
Top achievements
Rank 1
commented on 14 Jul 2021, 08:53 AM

How can we achieve this in the child grid?
duplicate: function (input) {
if (input.is("[name='name']")) {
var name = input.val();
var grid = $("#grid").data('kendoGrid');
var parentid = grid._data.filter(x => x.id == e.data.id)[0];
var parentIndex = grid._data.map(function (img) { return img.id; }).indexOf(parentid.id);
var view = grid._data[parentIndex].childs;
var valid = true;
for (var i = 1; i < view.length; i++) {
if ((name == view[i].name)) {
valid = false;
input.attr("data-duplicate-msg", "Duplicates not allowed.");
break;
}
}
return valid;
}

return true;
}
I have tried this but its checking the row currently being edited and hence returns error. any suggestions in this?
Tsvetomir
Telerik team
commented on 16 Jul 2021, 07:12 AM

Hi, Anthar, in order to take the data item for the edited child grid, you could access first the grid and after that the data item:

var grid = $(input).closest("[data-role='grid']").getKendoGrid();

var editable = grid.editable.options.model;

Is it possible for you to share what the exact error is? And, is there a need for the logic that checks the duplicate to be adjusted according to your requirement? If yes, share more details on the expected output.

Anthar
Top achievements
Rank 1
commented on 16 Jul 2021, 09:29 AM

Hi @Tsvetomir! Thank you so much for your reply. Here is a demo of what i'm trying to achieve https://plnkr.co/edit/tJvRD0CFqZ1gSYEB. I'm using hierarchy grid, so if i add a sub group i have to prevent duplicate name from being added and its working fine. Next i'm adding courses inside every subgroup and here again, i want to prevent duplicate name. I implemented the same functionality as in the demo, but it's checking the current row as well so it shows "Duplicates not allowed." even if there is no change in the name. To reproduce this open https://plnkr.co/edit/tJvRD0CFqZ1gSYEB this link add a subgroup and then add two courses inside that sub group and then edit the second one, don't change the text just click edit then click update, it would show "Duplicates not allowed."
Tsvetomir
Telerik team
commented on 19 Jul 2021, 02:32 PM

To reuse the same function for the duplicate validation, you could extract the function outside and only pass the id and grid instance. Parent Grid:

duplicate: function (input) {
                      return validateDuplicate(input, $("#grid").getKendoGrid());
                    }

For the child grid, you should first save the instance within the edit event:

edit:function(e){
            childGrid = e.sender;
          },

// ...

duplicate: function (input) {
                        return validateDuplicate(input, childGrid);
                      }

Check out the modified version here:

https://dojo.telerik.com/iTUkUkiF

 

 

Anthar
Top achievements
Rank 1
commented on 27 Jul 2021, 07:13 PM | edited

Hi @Tsvetomir! Thank you so much for your help i was able to make this work :) I have another question though, is there a way to copy rows? If i have a subgroup with courses add under it is there a way i could create duplicate of the subgroup that has the same child elements? I have tried implementing it here https://plnkr.co/edit/tJvRD0CFqZ1gSYEB but facing some issues. First, is it possible to allow only name to be added by the user for the copied item? reason being i want to have unique names so that my duplicate validation would work on duplicate items as well. second, i have an object which is used in binding this grid and on every operation i'm updating that object, in case of duplicate rows the object is somehow not working properly like if i create 2 copies the first one automatically gets replaced. Appreciate your help.
Tsvetomir
Telerik team
commented on 29 Jul 2021, 09:03 AM

Hi, indeed, it is possible to limit the user from editing specific columns. There are two options:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable

The other option is to make the field in the model of the data source non-editable:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schemamodel

As per the duplicate row with copying the child elements, it is possible, however, the child elements are actually part a separate grid. The master row and the rows inside the detail rows are part of different grids. Hence, you should manually access the first child grid and the child grid of the newly created row and feed the data there. 

Note that the new child grid will not be created until the row is expanded at least once. You should expand the row after you add it and only after the child grid is initialized - populate it with the data from the first row.

Tags
Grid
Asked by
Quest Resource Management
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Quest Resource Management
Top achievements
Rank 1
Robert
Top achievements
Rank 2
Han
Top achievements
Rank 1
Imran
Top achievements
Rank 1
Iron
Share this question
or