Disabling Enter key to Add new row

prabhakar kumar posted over 9 years ago

Hi,

Currently I am working on Adding a new row in WebDataGrid.There are two columns.When I enter the value in two columns and press enter the row gets added.Also when I

enter the value in one of the two column and press enter then also the row gets added.What I want is when one of the column in filled and thenI press enter then the row should not be added in the grid. How can I disable row adding on Enter key press and also how to add the new row when I fill the column and loose focus from that row or I click anywhere in the windowthe row should automatically be added?

Below is my javascript code on Exited Edit Mode in row adding.Please suggest.

function dgAdjustmentHeaderOnInsert(sender, eventArgs) {

var grid = $find("<%=dgAdjustmentHeader.ClientID%>");
var gridBehaviors = grid.get_behaviors();
var aj_id = null;
var textValue = document.getElementById("ctl00_ContentPlaceHolder1_txtDescription").value;
var aj_code = eventArgs.getCell().get_row().get_cellByColumnKey("AJ_CODE").get_value();
var aj_name = eventArgs.getCell().get_row().get_cellByColumnKey("AJ_NAME").get_value();
var event = eventArgs.get_browserEvent();
if (textValue != null || textValue != "") {
eventArgs.getCell().get_row().get_cellByColumnKey("AJ_DESC").set_value(textValue);
}

if (aj_code != null && aj_name != null) {
var enter_key_code = event.keyCode;
if (enter_key_code != null && enter_key_code == 13) {
abmAPI.insertExpenseAdjustmentHeader(aj_id, (eventArgs.getCell().get_row().get_cellByColumnKey("AJ_NAME").get_value() == null ? "" : eventArgs.getCell().get_row().get_cellByColumnKey("AJ_NAME").get_value()),
(eventArgs.getCell().get_row().get_cellByColumnKey("AJ_CODE").get_value() == null ? "" : eventArgs.getCell().get_row().get_cellByColumnKey("AJ_CODE").get_value()), (eventArgs.getCell().get_row().get_cellByColumnKey("AJ_DESC").get_value() == null ? "" : eventArgs.getCell().get_row().get_cellByColumnKey("AJ_DESC").get_value()),
eventArgs.getCell().get_row().get_cellByColumnKey("MI_ID").get_value(), insertExpenseAdjustmentHeaderHandler_12);
alert("Row inserted successfully");
aj_id = document.getElementById("txtRowUpdated").value;
var year = eventArgs.getCell().get_row().get_cellByColumnKey("MI_YEAR").get_value();
var mi_id = eventArgs.getCell().get_row().get_cellByColumnKey("MI_ID").get_value();
eventArgs.getCell().get_row().get_cellByColumnKey("AJ_ID").set_value(aj_id);
window.frames[0].document.location = "ExpenseAdjustmentDetails12.aspx?AJ_ID=" + aj_id
+ "&MI_ID=" + mi_id + "&YEAR=" + year;

}
}
else {
if (event == null || event.keyCode == 13)
alert("Row not inserted.Please enter adjustment completely before saving.");
}
document.getElementById("ctl00_ContentPlaceHolder1_txtDescription").value = "";

}

Parents

25665

Offline Michael Peterson posted over 9 years ago

Hello Prabhakar,

Thank you for contacting Infragistics!

What code you will have depends on what you want to do, For example if the user presses enter and you want to prevent them from exiting edit mode on the cell you would handle the ExitingEditMode event and if the key code matches the enter key you would call set_cancel(true) off the event args.

If you just want to prevent adding of the row but not exiting edit mode you could handle the exiting editmode as well as row adding. In exiting editmode you would set a flag to determine if the enter key was pressed. Then in row adding if that is true you cancel the event using set_cancel(true)


var enterKey = false;
        function exitingEditMode(sender, args) {
            if (args.get_browserEvent().keyCode == 13)
                enterKey = true
            else
                enterKey = false;
        }
        function rowAdding(sender, args) {
            if (enterKey == true) {
                args.set_cancel(true);
                enterKey = false;
            }
            
        }

80

prabhakar kumar posted over 9 years ago in reply to Michael Peterson

Hi,

Thanks for your reply.My question is that when and where to call RowAdding ? I used "args.set_cancel(true)" when enter key was pressed in ExitedEditMode but I got javascript error as " Object doesn't support this property or method".
Cancel
Reply

Cancel

Reply

25665

Offline Michael Peterson posted over 9 years ago in reply to prabhakar kumar

Hello Prabhakar,

Thank you for the updating. The reason you are getting that error is you are using the –ed event. You can only cancel the –ing events. You can find RowAdding directly off the editing core behavior:


<ig:EditingCore>
                <EditingClientEvents RowAdding="rowAdding" />
</ig:EditingCore>

For the ExitingEditMode you will want to do that off the RowAdding behavior:


<ig:EditingCore>
    <EditingClientEvents RowAdding="rowAdding" />
    <Behaviors>
        <ig:RowAdding>
            <AddNewRowClientEvents ExitingEditMode="exitingEditMode" />
        </ig:RowAdding>
    </Behaviors>
</ig:EditingCore>

Children

No Data