Hi,
I've been having problems with client side calculations for my RadGrid (EditMode="Batch", EditType="Cell").
In order to sum up cells 'a' and 'b' and display the result in cell 'c' of the selected row (and only this row) I subscribed to OnBatchEditCellValueChanged event and created javascript function (see below).
It worked fine in 2014.403.45.
When switching to the latest (2014.2.618.40) and changing to EditType="Row" (it doesn't work for "Cell" also) all of a sudden I get loads of undefined/null object errors:
Error: Unable to get value of the property 'getElementsByTagName': object is null or undefined
Callstack:
_getDataControl
_openCellInEditMode
openRowForEdit
_open
_openEditFromEvent
Anonymous Function
>
I've spent hours researching this and still didn't manage to get this working...
I guess my question would be: could you please provide an example of a simple javascript function example that sums two cells and display the result in the third
cell of the selected row in RadGrid with EditMode="Batch", EditType="Cell".
Thank you in advance.
function BatchCellModified(sender, args) {
var grid = $find('<%= myGrid.ClientID %>');
var masterTable = grid.get_masterTableView();
var rows = masterTable.get_dataItems();
var rowArgs = args.get_row();
var rowIndex = rowArgs.sectionRowIndex;
var row = rows[rowIndex];
var txtTotal = row.get_cell("Total");
if (args.get_columnUniqueName() === "PD" ||
args.get_columnUniqueName() === "BI") {
var txtPd = (isNaN(parseFloat(row.get_cell("PD").outerText))) ? 0 : parseFloat(row.get_cell("PD").outerText);
var txtBi = (isNaN(parseFloat(row.get_cell("BI").outerText))) ? 0 : parseFloat(row.get_cell("BI").outerText);
var totalAmount = txtPd + txtBi;
txtTotal.innerHTML = totalAmount;
}
if (args.get_columnUniqueName() === "Total") {
if (txtTotal != (txtPd + txtBi)) {
var txtPdOutput = row.get_cell("PD");
txtPdOutput.innerHTML = 0;
var txtBiOutput = row.get_cell("BI");
txtBiOutput.innerHTML = 0;
}
}
};
14 Answers, 1 is accepted

I rewrote this function a bit and only missing bit is updating the cell value:
I retrieve the new value from PD cell and the existing value from BI cell ok.
I just need to now update the value of the 'Total' cell.
Please let me know.
If the below could be done in a more elegant way, please advise. This code looks way to complex for what it does.
Thanks.
function CalculateTotalAndValidateData(sender, args) {
var grid = $find('<%= myGrid.ClientID %>');
var masterTable = grid.get_masterTableView();
var rows = masterTable.get_dataItems();
var rowArgs = args.get_row();
var rowIndex = rowArgs.sectionRowIndex;
var row = rows[rowIndex];
var txtTotal = row.get_cell("Total");
var txtPd;
var txtBi;
var totalAmount;
if (args._columnUniqueName === "PD") {
txtPd = parseFloat(args._value.replace(/,/g,''));
txtBi = (isNaN(parseFloat(row.get_cell("BI").outerText.replace(/,/g,''))))
? 0
: parseFloat(row.get_cell("BI").outerText.replace(/,/g,''));
totalAmount = txtPd + txtBi;
alert(totalAmount);
//txtTotal.innerHTML = totalAmount;
}
...continue on to other cells.
}

Thanks you in advance.
The appropriate way to update the cell value is to call changeCellValue of the batchEditingManager. Please check out the following code snippet.
function
CalculateTotalAndValidateData(sender, args) {
var
grid = $find(
'<%= myGrid.ClientID %>'
);
var
masterTable = grid.get_masterTableView();
var
rows = masterTable.get_dataItems();
var
rowArgs = args.get_row();
var
rowIndex = rowArgs.sectionRowIndex;
var
row = rows[rowIndex];
var
txtTotal = row.get_cell(
"Total"
);
var
txtPd;
var
txtBi;
var
totalAmount;
if
(args._columnUniqueName ===
"PD"
) {
txtPd = parseFloat(args._value.replace(/,/g,
''
));
txtBi = (isNaN(parseFloat(row.get_cell(
"BI"
).outerText.replace(/,/g,
''
))))
? 0
: parseFloat(row.get_cell(
"BI"
).outerText.replace(/,/g,
''
));
totalAmount = txtPd + txtBi;
alert(totalAmount);
grid
.get_batchEditingManager().changeCellValue(txtTotal, totalAmount);
}
...
continue
on to other cells.
}
Regards,
Kostadin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Thanks for your reply.
It's seems to be working fine however due to the client side custom validation logic implemented on the grid I get 'stack overflow' error (it freezes my screen).
Is there any other way of displaying this value on the cell apart from using batchEditingManager()?
Thanks.

Actually I get 'stack overflow' and frozen screen (I can see the updated value though) even with my custom validation disabled.
I have the logic implemented within a javaScript function triggered by OnBatchEditSetCellValue event.
So the manager works, except it goes into an infinite loop at some stage and that causes the stack overflow.
Is there any other way of displaying this value on the cell?
As I said - I used to be able to just use txtTotal.innerHTML = totalAmount.
Thanks.
One of my colleague has answered the support ticket which you have opened. Please check it out and if you have any additional questions I would recommend you to continue the conversation there.
Regards,
Kostadin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

function
SetLabels(sender, args) {
var
lupdCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(),
"last_update"
);
alert(lupdCell);
// This doesn't set the value of the cell-text on inserts/updates
sender.get_batchEditingManager().changeCellValue(lupdCell,
"10/28/2014"
);
alert(sender.get_batchEditingManager().getCellValue(lupdCell));
if
(args.get_columnUniqueName() ==
"last_update"
) {
}
}
<
MasterTableView
CommandItemDisplay
=
"Top"
DataKeyNames
=
""
AutoGenerateColumns
=
"False"
DataSourceID
=
"objDataSourceIN"
HorizontalAlign
=
"NotSet"
EditMode
=
"Batch"
>
<
BatchEditingSettings
EditType
=
"Cell"
OpenEditingEvent
=
"Click"
/>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"last_update"
HeaderStyle-Width
=
"150px"
HeaderText
=
"Date"
ReadOnly
=
"true"
SortExpression
=
"last_update"
UniqueName
=
"last_update"
></
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"who"
HeaderStyle-Width
=
"200px"
HeaderText
=
"Who"
ReadOnly
=
"true"
SortExpression
=
"who"
UniqueName
=
"who"
></
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Notes"
HeaderStyle-Width
=
"410px"
HeaderText
=
"Notes"
SortExpression
=
"Notes"
UniqueName
=
"Notes"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
Text
=
"*This field is required"
Display
=
"Dynamic"
>
</
RequiredFieldValidator
>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
</
Columns
>
<
ClientSettings
AllowKeyboardNavigation
=
"true"
>
<
ClientEvents
OnBatchEditOpening
=
"SetLabels"
OnBatchEditSetCellValue
=
"AllSetCellValue"
/>
</
ClientSettings
>
I noticed that you are using a cell EditType which opens the batch editor only for those cells which do not have a ReadOnly property applied. In this case the columns which have this property enabled can not be edited and SetLabels function will not fire. If you need to change the last_update cell after you open the batch editor from another cell then you have to use the following approach.
function
SetLabels(sender, args) {
var
lupdCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(),
"last_update"
);
lupdCell.innerHTML =
"10/28/2014"
;
}
Keep in mind that this approach will change the cell value only visually but it will not replace the value in the database. If you need to replace the value in the database then you have to remove the ReadOnly property and use changeCellValue method.
Regards,
Kostadin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

I'm using a RadGrid in batch edit mode as well, and I need to work with various cell values of the row that is being changed. My grid allows new rows to be added. This may sound crazy, but I can't figure out how to get the values of the other cells in the row. I'm tied to the 'BatchEditCellValueChanged' method, and when I get the 'var index = args.get_row().sectionRowIndex' value it does not match up to the row numbers when used with the 'grid.get_masterTableView().get_dataItems()[index]' logic. When doing this I get data from a different row that what is being edited.
So what is the correct way to access other cells from an edited row on the 'BatchEditCellValueChanged' event? I can't find an answer yet and have been looking for two days now. Maybe I just don't know how to word the question to google?
Are you trying to access the cells only of the edited row or you need to access some other cells as well. In case you try to access all cells of the edited row then you can hook OnBatchEditCellValueChanged and loop thought all cells of the row as demonstrated below.
function
OnBatchEditCellValueChanged(sender, args) {
var
cells = args.get_row().children;
for
(
var
i = 0; i < cells.length; i++) {
var
cellValue = sender.get_batchEditingManager().getCellValue(cells[i]);
}
}
Regards,
Kostadin
Telerik

You can use getCellByColumnUniqueName table view method to access any cell on the grid. For this purpose you have to pass the row object and column unique name as parameters. Please check out the following code snippet which demonstrates how to achieve that.
function
OnBatchEditCellValueChanged(sender, args) {
var
columnUniqueName =
"Column3"
;
var
rowIndex = args.get_row().id.split(
"__"
)[1];
if
(rowIndex && columnUniqueName) {
var
cell = args.get_tableView().getCellByColumnUniqueName(args.get_tableView().get_dataItems()[rowIndex], columnUniqueName);
}
}
Regards,
Kostadin
Telerik

Not sure what you are going for there, but this is what I get:
var rowIndex = args.get_row().id.split("__")[1];
//Above gives: args.get_row().id = "ctl00_DefaultContent_ctl08_rgDueFromBorrowerAtClosing_ctl00__-1"
//So the 'rowIndex' value ends up being '-1', which then makes this not work:
var cell = args.get_tableView().getCellByColumnUniqueName(args.get_tableView().get_dataItems()[-1], 'PAC_POC');
Also, will this account for the row index numbers not matching as I noted earlier?
Thanks,
Please try modifying the client-side logic as demonstrated below and test the page again.
JavaScript:
function
pageLoad() {
// Forces the creation of the client data items
$find(
'<%=RadGrid1.ClientID%>'
).get_masterTableView().get_dataItems();
}
function
OnBatchEditCellValueChanged(sender, args) {
var
columnUniqueName =
"Column3"
;
var
dataItem = $find(args.get_row().id);
if
(columnUniqueName) {
var
cell = dataItem.get_cell(columnUniqueName);
var
cellValue = cell.children[0].innerHTML.trim();
}
}
Regards,
Angel Petrov
Telerik