Hi,
I'm trying to simplify the row adding UX, and would like to have the new row commit(preferably only if it has been changed) once the user clicks out of the row. How can I accomplish this?
Hello,
Thank you for your question!
It is possible to achieve such functionality, you will need only to enable WebDataGrid Activation behavior. Now when you leave the row adding row, it will be automatically submitted, without hitting enter or calling commit() method.
Looking forward to hearing from you.
Hello Zdravko,
Thank you for your reply. I'd had Activation enabled already, but didn't see the auto-adding functionality. I tried setting auto-postback to true as well, but didn't see any changes. Is there something else I need to do?
Here is my code:
<ig:WebDataGrid ID="WebDataGrid2" runat="server" OnRowUpdating="wdg1_RowUpdating" OnRowUpdated="wdg1_RowUpdated" OnRowAdding="wdg1_RowAdding" OnRowAdded="wdg1_RowAdded" OnRowsDeleting="wdg1_RowDeleting" OnRowDeleted="wdg1_RowDeleted" Height="599px" Width="970px" BackColor="#E0DEBD" BorderColor="#AEAEAE" BorderStyle="Outset" BorderWidth="4px" Font-Names="Arial" Font-Size="XX-Large" CellSpacing="1" Font-Bold="False" EnableDataViewState="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyFields="ID" oninitializerow="WebDataGrid2_InitializeRow" > <Columns> <ig:BoundDataField DataFieldName="ID" Key="ID"> <Header Text="ProgramEnhancementsIdeas" /><Header Text="ID"></Header> </ig:BoundDataField> <ig:BoundDataField DataFieldName="ProgramEnhancementsIdeas" Key="ProgramEnhancementsIdeas"> <Header Text="NextStepsOutcome" /><Header Text="Program Enhancements Ideas"></Header> </ig:BoundDataField> <ig:BoundDataField DataFieldName="NextStepsOutcome" Key="NextStepsOutcome"> <Header Text="Responsibility" /><Header Text="Next Steps Outcome"></Header> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Responsibility" Key="Responsibility"> <Header Text="Responsibility" /> </ig:BoundDataField> <ig:BoundCheckBoxField DataFieldName="Implemented" Key="Implemented"> <Header Text="Implemented" /><Header Text="Implemented"></Header> </ig:BoundCheckBoxField> </Columns> <Behaviors> <ig:Activation > <AutoPostBackFlags ActiveCellChanged="True" /> </ig:Activation> <ig:EditingCore AutoCRUD="False"> <EditingClientEvents BatchUpdateUndoing="batchUndoing" BatchUpdateUndone="batchUndone" /><EditingClientEvents BatchUpdateUndoing="batchUndoing" BatchUpdateUndone="batchUndone"></EditingClientEvents> <Behaviors> <ig:CellEditing Enabled="true"> <EditModeActions EnableF2="true" MouseClick="Single" /><EditModeActions MouseClick="Single"></EditModeActions> </ig:CellEditing> <ig:RowDeleting /> <ig:RowAdding Alignment="Top"> <EditModeActions MouseClick="Single" EnableOnActive="True" /> </ig:RowAdding> </Behaviors> </ig:EditingCore> <ig:Selection CellClickAction="Row" RowSelectType="Single"> </ig:Selection> <ig:RowSelectors> </ig:RowSelectors> </Behaviors> </ig:WebDataGrid>
I have added a sample that is showing how to commit row on cell leaving with activation.
Run the sample, fill in the new row with valid ID (11 for example) and move the focus somewhere into the Grid (click on some cell for example) and you will notice how the row will be added.
Another possible solution would be to handle RowAdding_ExitingEditMode and to perform some kind of check, and for example when you leave the last cell into the Add Row to call _commitRow().
Thanks! It's working! I made a couple changes but all is working. Is there a way to trigger it only when leaving the row? Right now it commits even when changing the cell of the adding row.
For this scenario it is recommended to use the second suggestion, handle RowAdding_ExitingEditMode and perform some kind of check, and for example when you leave the last cell into the Add Row to call _commitRow(). In that case you should disable the activation behavior.