Currently when you edit a grid row you are presented with two buttons/actions related to the row that is being edited - Done and Cancel. Is it possible to add another button/action? I would like to add a button that would populate editable fields with default values specified outside of the grid. If this is possible could you please provide a sample? Many Thanks.
Hello Rick,
Thank you for posting in the Infragistics community !
I will prepare a sample demonstrating how this can be achieved and upload it here for reference.
Please find the modified sample below. It handles the editRowStarted event ans uses jquery to insert dom element that will serve as the adittional button you want. Then when this button is clicked it will update the row with predefined values. Here is a code snippet:
editRowStarted: function (evt, ui) { $(".ui-iggrid-buttoncontainer").css("margin-left", "980px")
// inserts DOm element via .append method if ($("#btnUpdateValues").length == 0) { $(".ui-iggrid-buttoncontainer").append("<span id='btnUpdateValues'></span>"); $("#btnUpdateValues").addClass("ui-iggrid-button ui-state-default ui-corner-all"); $("#btnUpdateValues").append("<span style='display: inline-block; padding: 3px 10px 5px 10px;'>Update</span>") }
// updates the row with predefined values that are holded in the rowValues object $("#btnUpdateValues").on("click", function () { $("#grid").igGridUpdating("updateRow", ui.rowID, rowValues); });}
Please review it and let me know if this works for your scenario.
It turns out this is not working as expected. This is what's happening...
1) I edit one row by manually entering values
2) I do the same with a second row
3) for the third row I click the "Apply Defaults" button to populate the fields.
4) The result is that the defaults are applied to the current row and all previously edited rows.
See screenshot...
Thanks!
The sample provided does not reproduce this behavior, this makes me believe the issue lies in your code. Please provide your code or sample so that I could be able to investigate this for you.
Hi Hristo,
Here is my code... Thanks.
$("#grid").igGrid({
primaryKey: "learnerId",
columns: [
{ headerText: "LearnerId", key: "learnerId", dataType: "number", template: "${learnerId}", width: 60, hidden: true },
{ headerText: "Last Name", key: "lastName", dataType: "string", template: "${lastName}", width: 150 },
{ headerText: "First Name", key: "firstName", dataType: "string", template: "${firstName}", width: 150 },
{ headerText: "Date Completed", key: "dateCompleted", dataType: "date", template: "${dateCompleted}", width: 120 },
{ headerText: "Score", key: "score", dataType: "string", template: "${score}", width: 80 },
],
autoGenerateColumns: false,
dataSource: data,
updateUrl: PostbackInfo.GridPostbackUrl,
dataRendered: function (evt, ui) {
ui.owner.element.find("tr td:nth-child(4)").css("text-align", "center");
ui.owner.element.find("tr td:nth-child(5)").css("text-align", "center");
},
features: [
{
name: "Updating",
enableAddRow: false,
enableDeleteRow: false,
editMode: "row",
responseDataKey: "results",
columnSettings: [
{ columnKey: "lastName", readOnly: true },
{ columnKey: "firstName", readOnly: true },
{ columnKey: "dateCompleted", editorType: "datepicker", required: true },
{ columnKey: "score", editorType: "numeric", required: true, dataMode: "int",
editorOptions: {
button: "spin",
minValue: 0,
maxValue: 100
}
editRowStarted: function (evt, ui) {
$(".ui-iggrid-buttoncontainer").css("margin-left", "480px")
// inserts DOm element via .append method
if ($("#btnApplyDefaults").length == 0) {
$(".ui-iggrid-buttoncontainer").append("<span id='btnApplyDefaults'></span>");
$("#btnApplyDefaults").addClass("ui-iggrid-button ui-state-default ui-corner-all");
$("#btnApplyDefaults").append("<span style='display: inline-block; padding: 3px 10px 5px 10px;'>Apply Defaults</span>")
// updates the row with predefined values that are holded in the rowValues object
$("#btnApplyDefaults").on("click", function () {
$("#grid").igGridUpdating("updateRow", ui.rowID, { 'score': '100', 'dateCompleted': '11/14/2014' });
});
}]
I found the mistake, thank you!
Rick
for others...
Instead of
it needs to be...
rowIndex = ui.rowID;
// updates the row with predefined values that are holded in the rowValues object $("#btnUpdateValues").on("click", function () { $("#grid").igGridUpdating("updateRow", rowIndex, rowValues); });}
Actually it is Infragistics' policy to manage a different thread for a different issue so please go ahead and post it.
Using the same example (when the auto-commit is removed) if I click the "Apply Defaults to All" button and then click the "Undo" button. The dates that are replaced are in a different format.
Example: Tue Oct 24 1989 00:00:00 GMT-0700 (Pacific Daylight Time)
Thanks.
P.S. would you prefer I post these new issues under separate threads?
great, thank you.
You have autoCommit: true which automatically commits the transactions as rows/cells are being edited and then it is not possible to undo. Change autoCommit to false and this will solve both of your issues.
Still having a couple of issues. Please see attached Sample.
Problem #1: Edit the grid in some way and click undo. I can't seem to get the "Undo" button working and have been unable to find relevant points in the documentation.
Problem #2: Refresh the page. Click a row to edit a field. Clear the value ("required" validator appears). Click "Apply Defaults" for that row. All required fields are now populated, but the validator remains and prevents save.
Many Thanks.