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)
Thank you for your feedback. I am glad that you were able to achieve the functionality you are looking for.
I have modified the sample. You can use a flag to determine if the row should be added to the grid. If not you can cancel the client RowAdding.
You can test the following approach:1. Type in the Add New Row and press Enter key. The values will stay in the Add New Row (in this sample in gray color)(In the default behavior is this would move the row to the grid and place in an intermediate state and also in italic)
2. Press Add button. This will not cancel the RowAdding, it will commit the row and add it to the grid after the postback is completed.WebDataGrid_sample(Modified)
Hi Nick,
Unfortunately the solution is not working:
I have modified your solution a bit
1. Have Used an Enable Add button which enables an Add Button and which enables the Editing Core and Row Adding Behavior(Mimics our scenario)2. Then upon clicking the Add Button, i have placed a breakpoint in the RowAdding server server event. See that i still see an intermediate italics row of the row i just addeded and then a new grey row below.
What i am looking is after the Add click, the added values should be still in the grey row (without any intermediate italics row) untill the postback is completed.
Modified code:
I am attaching the code with Case# CAS-195239-H4D4V6 since i am having issues with uploading the code.
Thanks,Aravind
Thank you for the modified sample and the additional information.
This is the designed batch updating functionality - all changes – adding, updating, deleting rows are kept on the client and are send to the server on the first triggered postback. This is the reason the row stays in italic. You can take a look at the documentation :
www.infragistics.com/.../webdatagird-batch-updating-overview
and the samples:
www.infragistics.com/.../batch-updating
Optionally you can test turning if off if it is applicable to your scenario.
I did try disabling the Batch Update , and upon Update button click i see the RowAdding server event called twice and the row doesn;t show in italics after it is edited. This satisfies what i am looking for but Not sure why the RowAdding Server event is called twice.
You can check the below:After you add a row and then On the client click event of an update button, call the AddRow Javascript method below.You will see the ROWAdding server event called twice. How to limit this call to only once?If i turn on batch update, then the rowadding server event is called only once but the row shows up in italics. Strange.
<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="true" EnableInheritance="false" AutoCRUD="false" BatchUpdating="false"> <EditingClientEvents RowAdding="EditingEvents_RowAdding" /> <Behaviors> <ig:RowAdding Enabled="true" EnableInheritance="false" Alignment="Bottom"> <EditModeActions EnableOnActive="true" MouseClick="Single" /> </ig:RowAdding> <ig:RowEditing Enabled="false" EnableInheritance="false"> <EditModeActions EnableOnActive="true" MouseClick="Single" /> <RowEditingClientEvents EnteringEditMode="RowEditing_EnteringEditMode" /> </ig:RowEditing> </Behaviors> </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; 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 if (!toSave) { e.set_cancel(true); } toSave = false; } function AddRow() { toSave = true; alert(toSave); // Commit the row that was added to ROWADDING server event $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); $('#<%=hdnEditRow.ClientID%>').val(row.get_index()); alert(row.get_index()); } function RowEditing_EnteringEditMode(sender, e) { // Allow Editing only for the row selected before postback var editingRow = e.getCells()[0].getCell().get_row(); if ($('#<%=hdnEditRow.ClientID%>').val() == -1) { $('#<%=hdnEditRow.ClientID%>').val(0); } if (editingRow.get_index().toString() !== $('#<%=hdnEditRow.ClientID%>').val()) { e.set_cancel(true); } }
Thank you for the code you have sent.
In the current scenario there are two postbacks triggered, one by the Add button and second by the commitRow() and both are firing RowAdding event. To prevent one, for example the button's, you can use preventDefault:
<asp:Button ID="AddButton" Text="Add" OnClientClick="AddRow(event)" runat="server" Enabled="False" OnClick="AddButton_Click" />
And:
function AddRow(event) { event.preventDefault(); toSave = true; alert(toSave); // Commit the row that was added to ROWADDING server event $find("<%= grdDataTable.ClientID%>") .get_behaviors() .get_editingCore() .get_behaviors().get_rowAdding()._commitRow(); }
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)
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.