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?
Hi, Algunderson.
If I understood you right, what you want to achieve is to add one or more rows to the grid and then by pressing Save button to send the new data to the server. If you want this you can check this sample.
By default when you add a row to the grid after the new row looses focus, it automatically makes a postback to the server and saves the new row data in the data source. If you want to update several rows at once, without an automatic postback, you need to enable BatchUpdating behavior of the grid. With this behavior enabled, when the new row looses focus, no automatic postback happens. The save of the new data into the data source happens when you make the first postback to the server. The sample above shows you exactly that. I hope this will help you and if you have other questions, don't hesitate to ask them.
Best regards, Nikolay
I looked at the sample, but it doesn't seem to do what I'm trying to accomplish. I was hoping that once I entered data into the "Add" row, I would be able to press the "Submit Data" button and the data would be saved to the grid...but it isn't. It seems to only save the newly added row if the tab or enter keys are pressed. Is there any way to get the new row added simply by pressing the "submit" button?
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>
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
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?
This problem has nothing common with editing. It' because every time you press the "Save" button, the Add Row is sent to the server, even if it's empty. It's because get_rowAdding() gets reference to the object that represents the new row template at the bottom of the grid and every time the row is added, even it is with no data. That's why you first need to check if there is a new cell values in the Add Row.
In most of the cases it's not recommended to use internal methods, like _commit(), because as you see it's possible that some problems may occur. But don't worry I've created a script that checks if the row is been updated and if yes, then it is added as a new row, when the "Save" button is pressed.
The following code defines an array of the default cell values for every column and just checks if the new cell value is different from the default one. Unfortunately I couldn't find grid method that do this, that's why I've created the code below that works for me. I hope it will resolve your issue.
function cancelRowAdding(sender, e) {
if (!toSave) {
var rowToAdd = $find("<%= wdg1.ClientID %>")
.get_behaviors().get_editingCore()
.get_behaviors().get_rowAdding();
if (isRowToAddChanged(rowToAdd)) {
rowToAdd._commitRow();
function isRowToAddChanged(rowToAdd) {
var cellCount = rowToAdd.get_row().get_cellCount(),
cellInd = 0,
// you don't need that array if all your default cell values are null.
defaultRowValues = ["---", null, null, null, null, null, null];
for (cellInd; cellInd < cellCount; cellInd++) {
if (rowToAdd.get_row().get_cell(cellInd).get_value() !== defaultRowValues[cellInd]) {
return true;
// If all your default values are null then use the following code:
/*
if (rowToAdd.get_row().get_cell(cellInd).get_value() !== null) {
*/
Did my last post helped you to resolve your issue?
Best reagards, Nikolay
Hi, Angela.
I don't know if I will be able to help you. I suppose the posts you've already red, have more information about this problem. The WebDataGrid can disable editing on a column, but I suppose this is not appropriate for your case. As far as for the next 12.2 there is not going to have cell editing feature for sure, and I don't know about future releases. But I think you can do a feature request about this functionality and it is possible to be implemented in the future, if the architecture of the control allows this. If this is common problem, I suppose that there is already such requests, and if you want to understand some information and progress on this you can create forum thread and the guys from Developer Support will take care to give you most recent information.
I know this is not the best place to ask this question, but you were so helpful with this problem...so I thought I would try here first.To my knowledge, there isn't an easy way to do the following while using the WebDataGrid: (This is how I set a cell to allow/not allow editing on a specific cell using the UltraWebGrid) Protected Sub grid_InitializeRow(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.RowEventArgs) Handles grid.InitializeRow If Page.User.IsInRole("App_AIM_Admin_Users") Then e.Row.Cells.FromKey("DOS").AllowEditing = Infragistics.WebUI.UltraWebGrid.AllowEditing.Yes Else If e.Row.Cells.FromKey("Approved_Flag").Value = 1 Then 'checked e.Row.Cells.FromKey("DOS").AllowEditing = Infragistics.WebUI.UltraWebGrid.AllowEditing.No Else e.Row.Cells.FromKey("DOS").AllowEditing = Infragistics.WebUI.UltraWebGrid.AllowEditing.Yes End If End If End Sub
I have a workaround, but it seems confusing and I don't really want to go through the trouble of changing all of the pages in my application if this is a feature that will be added in the next WebDataGrid release. For the most part, I have been able to replicate how things worked with the UltraWebGrid in the WebDataGrid...but this is the one thing that I definately see as a big disappointment for the WebDataGrid. Do you know if there are plans to have this feature added to the WebDataGrid anytime soon? I have seen several posts where others have asked for it and have been surprised that it's not a current feature.If there is somewhere else I should post this question that would be more appropriate, please let me know and I will be happy to do so.
I was not able to get it to work for some reason. As a quick fix, I just added an "Add Record" button and kept the "Save" button, but renamed it "Save Changes". I used the code from one of your previous post to get it to work the way I wanted it to work. I got pulled off on another project, so I wasn't able to spend more time trying to determine why I wasn't able to get it to work. I will definately have to revisit this one to see if I can get it to work at some point.Thank you very much for all of your time and help. I really appreciate it.