Data validation in rowCallBack instead of validating in 'preSubmit'.
Data validation in rowCallBack instead of validating in 'preSubmit'.
d052057
Posts: 38Questions: 3Answers: 0
I am not sure this is the right way or not but this is what I am trying to accomplish - validate data in rowCallBack.
let says col_a is TotalCount, col_b is Length, col_c is Width, Col_d is Height and Col_e is for 'edit/delete' functions.
In rowCallBack function:
i check totalCount (sum of col_a) > 28 and then it throws error to row, col_a.
I check col_b, col_c, col_d to make sure they are all have values. If one of them is empty then it throws error to the column that is empty.
I tried to trigger click on 'edit/delete', but it doesn't work (row.cells[4].firstChild.click();).
Any suggestion?
rowCallback: function (row, data) {
var totalCount = 0;
$("#PalletDetails_CountList").val($(pltTable).DataTable().column(1).data().join(vm));
$("#PalletDetails_LengthList").val($(pltTable).DataTable().column(2).data().join(vm));
$("#PalletDetails_WidthList").val($(pltTable).DataTable().column(3).data().join(vm));
$("#PalletDetails_HeightList").val($(pltTable).DataTable().column(4).data().join(vm));
$.each($(pltTable).DataTable().column(1).data(), function (index, value) {
totalCount = parseInt(totalCount) + parseInt(value);
});
if (totalCount > 28) {
row.cells[0].error = "Count must be less then 29";
row.cells[4].firstChild.click();
};
if (!(data.pltLength == '' && data.pltWidth == '' && data.pltHeight == '')) {
if (data.pltWidth == '') {
row.cells[2].error = "Width is required";
// click on edit a.editor_edit
row.cells[4].firstChild.click();
}
if (data.pltLength == '') {
row.cells[1].error = "Length is required";
row.cells[4].firstChild.click();
}
if (data.pltHeight == '') {
row.cells[3].error = "Height is required";
row.cells[4].firstChild.click();
}
}
},
This discussion has been closed.
Replies
Hi @d052057 ,
We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
The application I have written is not small and it is not easy to modify and it is not just HTML and Javascript. Of cause it is MVC5 environment. I will try it create a small app but I can't assure it will work because it links to datatables.net and editor purchased and installed locally here.
The logic of this validation is this:
1. In preSubmit, I can validate each cell but I can not validate the other cells at the same times (for example, col_b, col_c, cod_d (all of them) must have values or all of them must be empty and the sum of col_a must be less 29).
2. I can do this in the rowCallBack but I don't know the way to do it.
3. If the condition isn't met in #1, then it will trigger the editor screen (motal Editor screen shows up) so that user can make correction (I tried to do click on firstChild of edit/delete column link but it doesn't work).
Thanks.
This is the code...
You are mixing DOM methods and jQuery there. I think
$(row.cells[4].firstChild).click()might have more success.That said,
rowCallbackis too late to do validation. The invalidate data is already in the data set. Where I can see this being useful is if you wanted to allow the end user to enter information in a cell that makes the row as a whole invalid, then changing another cell making it valid. Adding an "invalid" class or similar might be useful to the row, highlighting that it has duff data until it is fixed.What might be useful here is local table editing - so you get all the changes for the row locally before submitting them to be saved in the database (since the database should never contain invalid data).
Allan
Thank for your input. You're right (I come from DOM environment). I will try it later. RowCallback is the only option in my thinking since I can trigger edit click to ask user to make correction. Until they make correction then they can pass the rowCallback function.
I still can not figure out how the 'invalid' class which you've sugested (I am new to this). The logic for each row are:
1. All 3 columns (length, width, height) must be empty or all having values.
2. The sum of Ptl Count column must be less than 29 (in this case).
If I add an 'Invalid' class to a row, how am I going to add 'Invalid error message' below the row (is there a link about this method) ?
Line 163: I would like to know a way to detect datatables empty or not (I see discussion but not solution). The issue is that user click on a row contains "no data available in Table..."
if $(pltTable).empty() {
// add row
}
else {
plt_editor.inline(this, {
onBlur: 'submit'
});
}
Thank you again for your help.
$(row.cells[4].firstChild).click() works to back motal Editor Screen popup. However, it fails validation when 'X' is clicked. The 'X' doesn't do anything except closing the motal screen. Then I have bad data in the tables.
Is there any suggestion?
Thanks.
Use
page.info().The
Xshould mean "close the current edit and don't save changes - returning the data to the previous state".As I said before, you need to consider that you are allowing users to enter invalid data. I don't know if you want to allow that or not.
Allan
Finally, I've figured it out to do this in 'preSubmit' event, but the rowCallBack. The inline edit doesn't work either but I can disable the inline edit mode for now (it will pass the validation if i do it from the Inline Edit mode.
Here is the code if any interested to see what I have done.
```
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/respond.min.js"></script>
<script src="Datatables/datatables.js"></script>
<script src="Datatables/Buttons-1.5.4/js/buttons.bootstrap4.js"></script>
<script src="Scripts/bootstrap.js"></script>
</head>
<body>
<div class="row">
<div Class="col-md-12" id="pltDiv">
<div Class="container pb-2 pt-2">
<Table id="palletTable" class="table table-sm table-bordered table-hover" style="width: 100%;">
<thead>
<tr>
<th>Plt Count</th>
<th>Length</th>
<th>Width</th>
<th>Heigth</th>
<th>Edit/Delete</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
</tfoot>
</Table>
</div>
</div>
</div>
</body>
</html>