Hi, We have developed an application that will help the customer interact with or give instructions to our managers using notes. Customer may create multiple notes and also he has the options to add files to a note. I am displaying the list of files using UltrawebGrid. I also have 2 button namely "Add" and "Remove". When clicking on the "Add" button. customer will select the file that he requires and then i will add the filename to the UltraWebGrid and if he select a file and click on "Remove" button, i will remove the filename from the UltraWebGrid. I am doing the operations in Client-side only. Once he click on "Submit" button, then only i will upload the file to a location in our server using a 3rd party control.
When our manager click on the note, i will fetch the filenames from the location and display it in the UltraWebGrid control. Now i am converting UltraWebGrid control to WebDtaaGird control. While going thru the documentation for adding new row in client-side, it mentions that postback will happen for every row that is added. I don't want this to happen in my case. How do i add or delete a row to the WebdataGrid without doing a post back? The purpose is to show the customer the files that he is going to add or remove. The reason i used UltraWebGrid previously was the right-click menu option that will help our manager to download the file to his local system. Is it possible to be done using WebDataGrid? I have attached the code that i used previously for adding a new row
var newRow=objGrid.Rows.addNew();if(newRow !=null){ newRow.getCell(0).setValue(filename,false); newRow.getCell(1).setValue(filepath,false); newRow.getCell(2).setValue(filesize,false);}Thanks,Raja.
Hello Raja,
I have been looking into your requirements and I can suggest you try our BatchUpdating functionality. This will allow you edit, delete and add new records without calling to the server. You can achieve this by setting BatchUpdate property of the EditingCore to True as shown in the following link from our documentation:
http://help.infragistics.com/Help/NetAdvantage/ASPNET/2012.1/CLR4.0/html/WebDataGrid_Batch_Updating_Enabling.html
After that you can just add the rows on the client without committing the changes to the server by adding the row through javascript as described in the last section “Add a Row in code” in the following blog:
http://help.infragistics.com/NetAdvantage/ASPNET/2012.1/CLR4.0/?page=WebDataGrid_Row_Adding.html
if you have any additional questions or concerns with this matter please do not hesitate to ask.
Hi, I was using Infragistics 2011 Vol 1 so I downloaded the 2012 Vol 1 version. I set batch update option and i added a new row into the gird. I have the following questions
a) After adding a new row, the styles are not getting applied. So when i try to select a row that is added in client-side, i am not able to see the selected style getting applied to all the columns in that row. How to fix it? Even when i have the "Row Selectors" behavior selected, the selected style is not applied to the whole row.
b) The most important of all, as per my requirement when i delete a row, i want that row to be removed from the grid instead of striking the row and also i don't want "Undo" button to be displayed. In UltraWebGrid i was able to do it easily. Why is it that there is such a change in functionality between the UltraWebGrid and WebDataGrid. Is there a solution for my problem?
Our client requirement is very simple is that he should be able to add (or) delete the rows in client-side. After all the operations is done and when he click on the "Save" whatever data's is in the grid at the time of saving,it should get saved to the Database. This i was able to achieve in UltraWebGrid. Please help me in finding out a solution.
I am attaching a sample code that i use for testing purpose
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript" id="igClientScript"><!--function WebImageButton1_Click(oButton, oEvent){ var grid = $find("WebDataGrid1"); var gridlength = grid.get_rows().get_length(); // Create array of cell values for all values that cannot be null. var row = new Array(gridlength+1, "CompanyName" + gridlength); // Add row. grid.get_rows().add(row);}function WebImageButton2_Click(oButton, oEvent){ //Add code to handle your event here. var grid = $find("WebDataGrid1"); var delrow = grid.get_behaviors().get_selection().get_selectedRows().getItem(0); grid.get_rows().remove(delrow, false);}// --></script></head><body> <form id="form1" runat="server"> <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT top 10 [OrderID], [CustomerID] FROM [Orders] Order by 1"> </asp:SqlDataSource> <ig:WebDataGrid ID="WebDataGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableAjax="False" Height="350px" Width="400px" DataKeyFields="OrderID"> <Columns> <ig:BoundDataField DataFieldName="OrderID" Key="OrderID"> <Header Text="OrderID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="CustomerID" Key="CustomerID"> <Header Text="CustomerID" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:EditingCore AutoCRUD="False" BatchUpdating="True"> </ig:EditingCore> <ig:Selection CellClickAction="Row" RowSelectType="Single"> </ig:Selection> </Behaviors> </ig:WebDataGrid> <igtxt:WebImageButton ID="WebImageButton1" runat="server" AutoSubmit="False" Text="Add New Row"> <ClientSideEvents Click="WebImageButton1_Click" /> </igtxt:WebImageButton> <igtxt:WebImageButton ID="WebImageButton2" runat="server" AutoSubmit="False" Text="Delete"> <ClientSideEvents Click="WebImageButton2_Click" /> </igtxt:WebImageButton> </form></body></html>
Thanks,
Raja
Hi Raja,
The WebDataGrid is a different grid, so different functionality can be expected sometimes. It is not a direct port of the old grid. That being said, most of what you want to do is possible. A lot is styling. First off, remember it is batch udpdating for a server side bound control. This is not a client side bound control. That is why deleting does not remove the row. However, you can simply alter the igg_RowDeleted css class with display:none to give the illusion of being gone. Course styles for alternating rows can be a little messed up. Same problem with selecting 'added' rows. The igg_RowAdded style is taking precedence. Same problem with the undo button. You can just set display none on the css class applied to the span and it won't show up. If you do batch add rows, rather than deleting them, you can call grid.get_behaviors().get_editingCore().undoBatchUpdate(row). It will undo the 'add', thus completely removing its html.
regards,
David Young
Hi David, Thank you for your suggestion. I implemented the way that you said when deleting a row in client side. I changed the style to "Display:none". I also found a way to implement the selected style when we add a new row in client side. tbody tr.igg_AddedRow td.igg_SelectedCell{ background-color: #8DC6EC;} By adding the above in the "ig_dataGrid.css" file, i am able to apply selected style for the rows in client side. With this i am able to fulfill my requirements. Thanks for the suggestion.Thanks,Raja.