Hi,
I have opened up a case # below but also thought of posting my questions here for the benefit of others.
CAS-195239-H4D4V6
WebDataGrid and i have posted my html code base which you can leverage
I am looking for the below functionality.
1. When user selects a Row and click a button say edit, turn the grid to editable.
2. After edit button postback, Highlight the row that was selected before the edit button was clicked with a different css and turn off edit on all other rows.
3. Disable selection on the grid after Edit button click postback.
4. Disable the done/cancel buttons in the row edit feature (We don't need it)
5. The rowupdating server side event should fire if atleast one value in a cell in the edited row is changed and user clicks an update button which performs a postback.
6. After update button postback, revert the css from the highlighted row and turn on selection.
<asp:panel id="pnlModuleContent" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" runat="server" cssclass="WideModule"> <asp:PlaceHolder id="plhFilterContents" Runat="server"></asp:PlaceHolder> <asp:ScriptManagerProxy runat="server"></asp:ScriptManagerProxy> <ig:WebExcelExporter ID="eExporter" runat="server"></ig:WebExcelExporter> <ig:WebDataGrid ID="grdDataTable" runat="server" AutoGenerateColumns="true" width="100%" ClientIDMode="Static" EnableDataViewState ="true" EnableViewState ="true" HeaderCaptionCssClass="WebDataGridColumnHeader" ItemCssClass = "WebDataGridRow" AltItemCssClass = "WebDataGridAlternating" OnColumnSorted="grdDataTable_SortColumn" OnPageIndexChanged="grdDataTable_PageIndexChanged" OnInitializeRow="grdDataTable_InitializeRow" EnableAjax ="true" OnRowAdding="grdDataTable_RowAdding" OnRowUpdating="grdDataTable_RowUpdating"> <Behaviors> <ig:Selection CellClickAction="Row" CellSelectType="Single" RowSelectType="Single" SelectedRowSelectorCssClass="DataGridSelectedRow" > <SelectionClientEvents RowSelectionChanged="RowSelection_Changed" /> </ig:Selection> <ig:Paging PagerAppearance="Bottom" PageSize="100" Enabled="true" /> <ig:Sorting SortingMode="Single" Enabled="true" /> <ig:ColumnResizing Enabled="false" /> <ig:EditingCore Enabled="false" EnableInheritance="false" AutoCRUD="false" BatchUpdating="true"> <EditingClientEvents CellValueChanged="EditingEvents_CellValueChanged" RowAdding="EditingEvents_RowAdding" /> <Behaviors> <ig:RowAdding Enabled="false" EnableInheritance="false" Alignment="Bottom"> <EditModeActions EnableOnActive="true" MouseClick="Single" /> </ig:RowAdding> <ig:RowEditing Enabled="false" EnableInheritance="false"> <EditModeActions EnableOnActive="true" MouseClick="None" /> <RowEditingClientEvents EnteringEditMode="RowEditing_EnteringEditMode" ExitedEditMode="RowEditing_ExitedEditMode" /> <ColumnSettings> <ig:EditingColumnSetting ReadOnly="true" /> </ColumnSettings> </ig:RowEditing> </Behaviors> </ig:EditingCore> <%--<ig:EditingCore Enabled="false"> </ig:EditingCore>--%> <ig:Activation></ig:Activation> </Behaviors> <ClientEvents Initialize="Initialize" /> </ig:WebDataGrid> <asp:datagrid id="dgHidden" visible="False" runat="server" autogeneratecolumns="True" headerstyle-cssclass="ListHead"></asp:datagrid> <INPUT id="hdnEditRow" type="hidden" value="-1" name="hdnEditRow" runat="server" /> <asp:label id="lblApplicationError" visible="True" runat="server" cssclass="ErrorMessage" enableviewstate="false"></asp:label> <DIV align="left" style="vertical-align:middle"> <asp:label id="lblNoData" visible="False" runat="server" cssclass="normal">No data available.</asp:label> </DIV> </asp:panel> <script type="text/javascript"> var toSave = false; var selectedRowIndex = 0; var isAlreadyRowEdited = false; function Initialize() { var wdgd = $find("<%= grdDataTable.ClientID%>"); wdgd._callbackManager.setTimeout(600000); //One minute callback time } function EditingEvents_RowAdding(sender, e) { // Cancel RowAdding after Row Adding Enabled alert(toSave); if (!toSave) { e.set_cancel(true); } toSave = false; } function EditingEvents_CellValueChanged(sender, e) { isAlreadyRowEdited = true; } function AddRow() { toSave = true; $find("<%= grdDataTable.ClientID%>") .get_behaviors() .get_editingCore() .get_behaviors().get_rowAdding()._commitRow(); } function RowSelection_Changed(webDataGrid, evntArgs) { // When row is changed get the index of the row selected var grid = $find("<%= grdDataTable.ClientID%>"); var gridBehaviors = grid.get_behaviors(); var row = gridBehaviors.get_selection().get_selectedRows().getItem(0); selectedRowIndex = row.get_index(); } function RowEditing_EnteringEditMode(sender, e) { // Do not Allow Editing if Already a Row was edited previosly if (isAlreadyRowEdited) { e.set_cancel(true) } else { var editingRow = e.getCells()[0].getCell().get_row(); // Allow Editing only for the selected row if (editingRow.get_index() !== selectedRowIndex) { e.set_cancel(true); } } } function RowEditing_ExitedEditMode(sender, e) { var grid = $find("<%= grdDataTable.ClientID%>"); // Find if Row Was Edited(that is atleast 1 cell value in the row was changed from previos, done is clicked and then only set commit the row edited and set isAlreadyRowEdited to true) if (isAlreadyRowEdited) { grid.get_behaviors().get_editingCore().commit(); } } </script>
Thanks,
Aravind
Hello Aravind,
Thank you for the code you have sent.There are several approaches you can use to achieve the functionalities you are looking for.
1. You can add a button and when clicked you can check how many rows are selected (if any) and which ones, you can use SelectedRowsCollection:
grid.Behaviors.Selection.SelectedRows;
for reference see this forum WebDataGrid and SelectedRow Server Side
and then turn on editing:grdDataTable.Behaviors.EditingCore.Behaviors.RowEditing.Enabled = True
2. Get the selected row from RowSelection_Changed event and style it in the RowEditing_ExitedEditMode event.
Use WebDataGrid CSS styling guide.
At this point after the user has edited the row, do you want to keep this row editable?
3. Identify which control caused the postback:https://stackoverflow.com/questions/7269271/which-control-caused-the-postbackIf it is the Edit button disable grid selection:grdDataTable.Behaviors.Selection.Enabled = False
4. The "Done and Cancel" buttons dialog can be hidden with the Editing behavior’s EnableDialog property.
5. The RowUpdating server side event will fire if at least one value is changed. You can get the values from RowUpdatingEventArgs:e.Row, e.Values, e.OldValues.
You can check again the postback, determine if the Update button caused it, and pass the values.
6. You can use the RowUpdated event.
For additional information on updating/ editing events you can also refer to this forum post where you have already discussed these events with Tacho.
Nick,
If possible can you share a sample code that achieves what i have asked for, since some of my questions have not been answered. (Particularly 2)
ExitingEditMode of RowEditing Client event cannot be used to highlight the selected row, since at this point the row has not been edited yet.
Please provide a small working sample for the below.
1. After you click edit button, the row that you selected before the edit button click need to be highlighted\infocus with a different css. If the user didn't select any row and clicked edit button, the first row in the grid need to be highlighted\infocus with that different css.
2. After step 1 above, User should only be able edit the row that was highlighted from 1. All other rows should be disabled from selection and row edits.
3. After step 2, if there is a post back in the server (by click of an update button), revert the css of the highlighted row back to original and disable the edits.
4. In server side we do validation logic on the data that is edited that we capture via the ROWUPDATING event. If validation fails we keep the edit feature enabled. In such cases keep the page as in step 2 (Keep the user still in the highlighted row)
Hello Nick,
The event.PreventDefault() is not helping as the RowAdding server event is not hit in your example.
Tried disabling the commitRow(so that it gets triggered via the add button postback as you suggested) but then the RowAdding server event is not hit.
With batchUpdating = true , the ROWAdding server event is called only once but with batchUpdating = false, the rowAdding server event is called twice.
Thank you for your feedback.
I have used the code you sent the previous message in the sample. You can find it as an attached file. In this sample if the Add button is clicked grdDataTable_RowAdding is called only once and the values you typed are added to the grid.WebDataGrid_sample(Modified2)
Hi Nick,
This solution works as a standalone but when I use it in my solution it doesn't work. I have used the code from our solution as in your sample project and it works clean. To mimic the case , I have updated the case CAS-195239-H4D4V6 with how to mimic the issue and a small POC zip file attached which mimics our project.
The issue you describe and which occurs in your project is the same as the sample. You have a button that causes one additional postback. The difference is in the sample an asp:button is used and in the project a linkbutton. If you disable the linkbutton's postback the server RowAdding event will be called only once.
If we use the event.PreventDefault, then only the RowAdding Server Event is fired and not the actual server side event of the Button. What i am looking for is using batchUpdate = false and after the button is clicked, first it should hit the RowAddingServer event and control should go into the actual server side event of the button as i perform some custom logic in the server side event of the button.
Only catch here is if you remove event.preventdefault, then the RowAdding Server Event is fired twice and control then goes to the server side event of the Button.
Due to this behavior, I have added a conditional check to skip the logic in the second triggering of the rowadding server event as i already got the data required in the First trigger. Not sure if this is the best solution.
I am glad that you were able to achieve the functionality you were looking for.
As additional information to your scenario if you want prevent the postback from the button there two more options you can use. Since it is a LinkButton, rather than using event.PreventDefault, add a hyperlink leading to "#" e.g.:
<asp:LinkButton cssclass="ModuleActionButton" href="#" id="btnUpdate" visible="True" runat="server">Update</asp:LinkButton>
Another option is to return false:
<asp:LinkButton cssclass="ModuleActionButton" id="btnUpdate" OnClientClick="AddRow(event); return false;" visible="True" runat="server">Update</asp:LinkButton>
Note that when AddRow's._ commitRow(), is executed the postback will trigger the server RowAdding event and not the server side event of the Button (as you have observed).
In this scenario I will suggest moving your custom logic from the Button's server side event to the RowAdding server side event.
Since our app has various user controls that has custom logic and it uses a common generic wrapper user control that has all webdatagrid functionalities (& which has the RowAdding server event) that option is not possible.
Hi Aravind,
I'm glad you've found an answer to your questions.
If you have more questions in the future you are welcome to contact us again. For questions not related to this thread please open a new one.
Best regards,
Bobby