I have a WebDataGrid and am able to add a row if I insert the data and tab off or hit the enter key, but I have a save button outside of the grid that the users are used to pressing after they have updated existing records and I want them to be able to press this button when they have inserted new data to add a new row. Any suggestions?
It's soooooo close! It does work...but now when a record is edited and the user presses the save button, a new record is added. What would be the best way to go about changing this so it is only used when the user adds a new record. I suppose I could simply add a "Add New Record" button that uses this code and keep the Save button and use that for when the user edits a record...but do you have any suggestions on just keeping the one button for both?
Hi, Algunderson.
I checked your code and also checked carefully our discussion again and saw that maybe I misled you to use Batch Updating behavior. Your code is well defined, but to be able to add a row with Batch Updating, for sure you need to press the Enter button first to add the row on the client. After that you can add several new rows but anytime you need to press Enter to confirm the new data. In this case all the new rows will be in the client-side object model of the grid and will wait the first postback to happen. After the postback the data will be saved in the data source on the server. But none of them will be there if a button Enter is not pressed. The button "Save" only makes the postback, but if not an Enter key is pressed in prior, it will not be saved. But in your first post you want to get away from this, you want to press only the "Save" button. So you will need to throw away Batch Updating, sorry for leading you in the wrong direction.
If after all you want to use Batch Updating, by pressing first Enter, just ensure that you have method on the server that will add the new row to the data source and ORM that connects that method with the grid. In this sample ASP.NET ObjectDataSource is used as ORM.
If you want to achieve you first goal, then use the second approach that I've suggested but with little modifications. As far as when Batch Updating is not used, again to ensure that you add a row you need to press Enter, or Tab when you are at the last cell of the row. But the following workaround works for me and ensures that if you press the Enter the data will not be saved, but it is saved after you press the "Save" button.
In the grid define:
<ig:EditingCore EditingClientEvents-RowAdding="cancelRowAdding">
Define HTML button:
<input id="btnSave" name="btnSave" type="button" value="Save" onclick="saveRow()"/>
And then in JavaScript you need the following code:
<script type="text/javascript">
var toSave = false;
function cancelRowAdding(sender, e){
if(!toSave) {
e.set_cancel(true);
}
toSave = false;
function saveRow() {
toSave = true;
$find("<%= wdg1.ClientID %>")
.get_behaviors()
.get_editingCore()
.get_behaviors().get_rowAdding()._commitRow();
</script>
The parameter toSave ensures that you will add a row only when you press the "Save" button. I think this is closest to what you need :). Let me know if this works for you.
Nikolay
Thank you for all your help with this!Here is the code for the datagrid on my page...it's 3.5, version 2012.1:<ig:WebDataGrid ID="grid" runat="server" Height="200px" Width="100%" AutoGenerateColumns="False" DataKeyFields="Lookup_ID" DataSourceID="SqlDataSource_Lookup"><Columns><ig:BoundDataField DataFieldName="Lookup_ID" Key="Lookup_ID" Width="5%"><Header Text="ID" /></ig:BoundDataField><ig:BoundDataField CssClass="LeftAlign" DataFieldName="Lookup_Code" EnableMultiline="True" Key="Lookup_Code" Width="95%"><Header Text="Description" /></ig:BoundDataField></Columns><ClientEvents Initialize="grid_Initialize" /><Behaviors><ig:Sorting></ig:Sorting><ig:EditingCore BatchUpdating="True"><Behaviors><ig:CellEditing><ColumnSettings><ig:EditingColumnSetting ColumnKey="Lookup_Code" /><ig:EditingColumnSetting ColumnKey="Lookup_ID" ReadOnly="True" /></ColumnSettings><EditModeActions MouseClick="Single" /></ig:CellEditing><ig:RowAdding><EditModeActions MouseClick="Single" /></ig:RowAdding></Behaviors></ig:EditingCore><ig:Filtering><ColumnFilters><ig:ColumnFilter ColumnKey="Lookup_Code"><ConditionWrapper><ig:RuleTextNode Rule="Contains" /></ConditionWrapper></ig:ColumnFilter></ColumnFilters></ig:Filtering><ig:RowSelectors></ig:RowSelectors><ig:Selection></ig:Selection><ig:Clipboard></ig:Clipboard><ig:Activation></ig:Activation></Behaviors></ig:WebDataGrid>
Hi, Algunerson.
You need also to enable adding a row, but I suppose you've already did it.
<ig:EditingCore BatchUpdating="true">
<Behaviors>
<ig:RowAdding>
</ig:RowAdding>
<ig:RowDeleting/>
<ig:CellEditing>
</ig:CellEditing>
</Behaviors>
</ig:EditingCore>
If you want to paste me the code that you are using and tell me which DLL version you are using and I will try to see where the problem is.
Thanks, Nikolay
I have enabled batch updating and the save button does post back to the server, but the new record seems to only save if I hit the enter or tab key and then press the "Save Button". I would like for the user to be able to just type the data and press the "Save Button" and the data be saved. Am I missing something?