Checking the Kendo Grid for duplicate values

[CHARLES]

I wanted to know if there was a way to check a Kendo Grid for duplicate values.  For example I have a Kendo Grid with inline editing and have a column named "Names" and a user does a inline edit and changes a value in the "Names" column I want the ability to check if that value already exists in the Grid specifically that column.  I know I did not post any of my code because frankly I do not know where to begin so I was hoping a kind developer could provide me with some example(s) jQuery code to get me pointed in the right direction.  Thank you for your time and examples. 

[Colin]

I'm really interested to see the suggestion too. This is exactly what I am looking for and have tried a few different approaches (Custom Validation, Remote Validation) but getting nowhere. 

[Dimiter Madjarov]

Hello Charles,

To achieve this functionality, you could bind to the save event of the Grid which is fired before the Grid item is actually changed. In the event handler you could get the items via the data method of the dataSource and iterate through them to perform the needed checks. I am adding a sample implementation in which I am checking for products with the same name.

E.g.

function onSave(e){
    var currentProductName = e.model.ProductName;
    var currentProductID = e.model.ProductID;
    var data = this.dataSource.data();
    for(item in data){
        if(data[item].ProductName == currentProductName &&
           data[item].ProductID != currentProductID){
            e.preventDefault();
            alert("Duplicates not allowed");
        }
    }
}

Please let me know if this was the information that you were looking for. 

Regards,
Dimiter Madjarov
the Telerik team

[Colin]

Hi Dimiter,

Apologies for hijacking this thread. Thank you for the reply. I am very new to this. Could you explain how to bind to the save event when using the MVC Server Wrappers. There is no Save or Edit in the Event to bind to so do I bind to the change event?
If you could just show how you would set up the grid it would be a great help. 

Thanks for your help.

[CHARLES]

Dimiter,
Thank you for your response, I may look into your route however this is what I came up with while waiting for some responses.  Let me know what you think about this code...
Run the following function when Edit is executed.  

        //this runs when a line item box is clicked to edit
        //this checks to see if the part entered already exists in the grid
        function checkDups() {
            var dirty = false;
            $(function () {
                $(document).ready(function () {
                    var currentPart = null;
                    var ligrid = $("#kendoGrid").data("kendoGrid");
                    var lidata = ligrid.dataSource.data();
                    $.each(lidata, function (i, row) {
                        var part = row.partNum;
                        
//the row has been edited set the part number
                        if (this.dirty == true) {
                            currentPart = this.partNum;
                        }

//check the part number against rows that have not been edited
                        if (this.dirty == false) {

// if un-edited row part number matches edited rows part number return true
                            if($.trim(row.partNum) == currentPart)
                            {
                                dirty = true;
                            }
                        }
                    });

                });

            });
            return dirty;
        }

//on edit hide the save changes button in the tool bar (did not include this code)
//if the above function checkDups() is true part number already exists show error message
//else show the save changes button so user can save the data.
                if (checkDups() == true) {
                    alert("This part number already exists, please update that part number quantity!");

    //reset the change back to original
                    liGrid.dataSource.read();
                }
                else {
                    $(".k-grid-save-changes").show();
                }

this seems to work at least my testing shows that it is working although I have not tested the show hide save changes button.  The reason I show / hide the save changes button is because even though the user is warned that duplicate values exists they could still save the changes... I could not figure out a way to prevent the save changes from executing (even prevent.Default() did not prevent the save-changes from executing)  any feedback on this method is wanted and thank you everyone for your assistance.

[Dimiter Madjarov]

Hello Charles,

Thank you for sharing your experience with the other users. I am glad that you managed to solve the problem.

---

Colin,

I am not sure that I understand your inquiry. The events are the same in Web Grid and ASP.NET MVC Grid. You could bind to the edit and save events using the following syntax:

.Events(e => e.Edit("onEdit").Save("onSave"))

For more information you could check the Demo about events and the MVC Grid overview page.
  Regards,
Dimiter Madjarov
the Telerik team

[David]

This works in all browsers. Your code doesn't work in IE. You must use data[i] and also use .toUpperCase() to do a case-insensitive check.

        var notificationWidget = $("#notification").data("kendoNotification");
        var currentUserName = e.model.UserName.toUpperCase();
        var currentEID = e.model.EID;
        var data = this.dataSource.data();

        for (var i = 0; i < data.length; i++)
        {
            if (data[i].UserName.toUpperCase() === currentUserName && data[i].EID != currentEID)
            {
                e.preventDefault();
                notificationWidget.show("Duplicates User Names not allowed!", "error");
                break;
            }
        }

[Dimiter Madjarov]

Hello David,

Thank you for your input on this.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[CHARLES]

To anyone:
So I wrote the code just below this thread and it seems to be working however I have a custom toolbar in a Kendo Grid with a save changes button that calls a controller method.  I am successful when a user clicks in another column using the below jQuery to check if a column has duplicate value(s) and poping up a error message, however my problem is the user can click Save Changes without clicking in another column to execute my below code and the changes are saved because a controller method is called and the edit function that executes checkDups() is not called because the user did not click a column for inline editing.  I need a way to call checkDups() before the controller method is called and if the value does not exists then execute the controller method else if the value does exists do not execute the controller method.

Long story short how can I prevent 

                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })

                    .Create(update => update.Action("_Create", "LineItems"))
                    .Read(read => read.Action("_Read", "LineItems"))
                    .Update(update => update.Action("_Update", "LineItems"))   <<<------ prevent this from being executed if a duplicate value exists???

Any help is much appreciated and thank you for your time!

Charles

[CHARLES]

So after thinking, talking to myself, then thinking some more it finally can to me, 

            if (checkDups() == true) {
                alert("This part number already exists, please update that part number quantity!");
                liGrid.dataSource.read();

                //do not save changes by return false
                return false;
            }

RETURN FALSE;

prevents the save method in the controller from being called.... problem solved.