Hello,
I'm working with an MVC5 project, and I'm trying to figure out the best way to approach this problem. In my grid, there is a column for "Name" which displays a particular name that has meaning in my business logic. This column is not the primary key of the grid. However, the rule is that "Name" must be unique for all items in the collection, so if the user edits a row in the grid and changes the Name to one that is already in use, I need to prevent that.
Looking through the iggrid documentation, I wasn't sure if there is a validation option in the MVC helper that I could use, or if it would be better for me to do something with the editRowEnding event, perhaps, and check the new Name against all of the other names in the grid. Ideally, I'd like to provide a little validation message on the cell (like what I see when I mark a cell as required and don't input a value), and of course I need to stop the row from being updated.
I'm mainly posting because I didn't want to lose a lot of time chasing an approach that doesn't make good use of the API, and since this has probably been done before, I wanted to see if others had any opinions about how to approach this.
Thanks!
Hello kylemilner ,
Thank you for posting in our forum.
There’s no built-in validation option that would check if a cell value is unique in a column.
You could however add some custom validation so that a custom error message would appear if the value of the edited cell is available in another cell of the column.
You can achieve this by using the checkValue event of the editor’s validation. It will be raised when the value in the editor is changed.
You can define the validation options for the editor of a column inside the columnSettings of the Updating feature.
Here’s an example:
columnSettings: [
{ columnKey: "Name", editorOptions: { type: "text",validatorOptions : {onblur: true, keepFocus: "once",
checkValue: function (evt, ui) {
…}
In the checkValue event you can get the current value that’s being validated, loop trough the rows to check if there’s such a value in any other cell and if there is you can set a custom error message and display it.
The code could look similar to this:
var value= ui.value;
//check for a matching value in all rows(except the currently edited row)
var rows = $("#grid").igGrid("rows");
for (var i = 0; i < rows.length; i++) {
var currentRow=rows[i];
var currentValue = $("#grid").igGrid("getCellValue", $(currentRow).attr("data-id"), "Name");
//if there are editing cells in the row, then this is the row that is being edited. So we should skip the check for its value.
if(value==currentValue && $(currentRow).find(".ui-iggrid-editingcell").length==0 )
{
// set a custom error message
ui.message="This value alredy exist in the column.Duplicated values are not allowed.";
//Return false in order to consider value as invalid and to display error message.
return false;
}
I’ve attached a sample for your reference. Let me know if this approach would work in your scenario.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Thanks Maya, that's just what I was looking for.
Thanks Maya, that helps a lot!
The child grids are igGrid widgets so doing something like:
var rows = $("#Grid_14_Locales_child ").igGrid("rows");
Will work and will return only the rows of that child grid.
The data-level corresponds to the level in the hierarchy this particular child grid belongs to. Child grids that are on the same level of the hierarchy will have the same data-level attribute so it would be better to use their ids instead.
You could also check to which grid the currently edited cell belongs to by adding a handler for the editCellStarted event and checking the owner element:
editCellStarted: function(evt, ui){
var gridElement=ui.owner.element;
This will return the child grid element. You could then keep it in a global variable and use it when validation is triggered for the editor. You could use the grid element to get the related rows for this grid.
Let me know if you have any additional questions on regarding this.
Sorry, but one last question came up, Maya. I'm writing this with the MVC helper, and I think I may have gotten something lost in translation. Here's the code I was trying out:
colSetting.ColumnSetting().ColumnKey("Name")
.Required(true)
.EditorOptions("checkValue:validate()");
In a separate script file, I have the validate function defined like this:
function validate(evt, ui) {
...
When I set it up that way and put a breakpoint on my validate function, I see that it is only called once when the grid loads, but never again when I finish editing a row. Did I use the MVC helper properly in this case? Is it a situation where I need to define the function in-line in the MVC helper?
EDIT: I think I realized my mistake after checking Maya's example a little more closely. I needed my EditorOptions call to look like this:
.EditorOptions("validatorOptions:{checkValue:validate}");
So, another question that has come to mind is how this might work in a hierarchical grid. Say that my grid is nested 3 layers within an overall ighierarchicalgrid, but I still only want to check for unique values on the 3rd level grid (in other words, duplicates could be allowed, but only if they appear at different levels in the hierarchy). I had a couple of ideas on how to alter Maya's example, but I haven't come up with quite the right answer yet.
In the validate function, I'd like the following line to pull out only the rows from one of the nested grids:
But I'm having trouble writing the correct jQuery selector. When I review the mark-up of my grid in the browser, I notice that the grid I need has an attribute called data-level=3. It also has it's own id, which looks something like ''Grid_14_Locales_child". Would either of those be the natural way to get the relevant rows for comparison?