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