Hi Team,
Please find the code below.
function GridResult_CellValueChanged(sender, e) { if (e._cell._address == 0) { CalculateTotalRecordSummary(); } }
function CalculateTotalRecordSummary() { let totalCount = 0; try { alert(document.getElementById("HFRowCount").value); for (var i = 0; i < InfragisticJsUtil.WebDataGrid.GetRowCount('GridResult') ; i++) { if (InfragisticJsUtil.WebDataGrid.GetSpecificCellValue('GridResult', i, 0) == true) { totalCount += 1; } } } catch (e) { setTimeout(function () { CalculateTotalRecordSummary(); }, 3000); } finally {
document.getElementById('selectedRecord').innerHTML = totalCount; } }
<igGridControls:WebDataGrid ID="GridResult" runat="server" Width="100%" Height="400" AutoGenerateColumns="false" DataKeyFields="som_id" EnableDataViewState="true" EnableViewState="true" ClientEvents-Click="viewStatement" OnRowUpdating="GridResult_RowUpdating"> <EditorProviders> <igGridControls:DropDownProvider ID="finalApprover"> <EditorControl DataKeyFields="full_nm" TextField="final_approver" ValueField="pal_id" EnableRenderingAnchors="false" EnableCustomValues="true" EnableAutoCompleteFirstMatch="true" Width="130px"> <DropDownItemBinding TextField="full_nm" ValueField="pal_id"></DropDownItemBinding> </EditorControl> </igGridControls:DropDownProvider> <igGridControls:DropDownProvider ID="holdStatus"> <EditorControl DataKeyFields="system_code_desc" TextField="hold_status" ValueField="system_cd" EnableRenderingAnchors="false" Width="160px" EnableCustomValues="true" EnableAutoCompleteFirstMatch="true"> <DropDownItemBinding TextField="system_code_desc" ValueField="system_cd"></DropDownItemBinding> </EditorControl> </igGridControls:DropDownProvider> <igGridControls:DatePickerProvider ID="getDate"> </igGridControls:DatePickerProvider> </EditorProviders> <Columns> <igGridControls:UnboundCheckBoxField Key="chk_box" Width="30px" HeaderCheckBoxMode="Off"></igGridControls:UnboundCheckBoxField> <igGridControls:BoundDataField Key="som_id" DataFieldName="som_id" Hidden="true"></igGridControls:BoundDataField> <igGridControls:BoundDataField Key="statement_period" DataFieldName="statement_period" Header-Text="Stmt Per" Width="90px"></igGridControls:BoundDataField> <igGridControls:BoundDataField Key="group_id" DataFieldName="group_id" Hidden="true"></igGridControls:BoundDataField> </Columns> <EmptyRowsTemplate> No records were found for the requested search. </EmptyRowsTemplate> <Behaviors> <igGridControls:Paging Enabled="true" PagingClientEvents-PageIndexChanging="GridResult_PageIndexChanging" PagerAppearance="Bottom" PagerMode="NumericFirstLast" PageSize="50" ></igGridControls:Paging> <igGridControls:EditingCore Enabled="true" AutoCRUD="false" > <EditingClientEvents CellValueChanged="GridResult_CellValueChanged"/> <Behaviors> <igGridControls:CellEditing Enabled="true"> <ColumnSettings> <igGridControls:EditingColumnSetting ColumnKey="chk_box" ReadOnly="false" /> <igGridControls:EditingColumnSetting ColumnKey="som_id" ReadOnly="true" /> <igGridControls:EditingColumnSetting ColumnKey="delivery_status_cd" ReadOnly="true" /> <igGridControls:EditingColumnSetting ColumnKey="delivery_status" ReadOnly="true" />... so on </ColumnSettings> <EditModeActions MouseClick="Single" /> </igGridControls:CellEditing> </Behaviors> </igGridControls:EditingCore> </Behaviors> </igGridControls:WebDataGrid>
This code worked fine untill i enabled paging once paging is enabled on grid. The java script function CalculateTotalRecordSummary() is taking only the current page's selected row count. If i move to other page the previous pages selected count is lost.
I want the count of all the rows that are selected in all the pages of a grid in a client side event. Can someone please guide me on this.
Im using Infragistics version 11.2 and testing the application on IE.
Awaiting for updates. Please let me know if you need any further information.
Hello Susmitha,
After investigating this further, I determined that your requirement could be achieved by checking the state of the currently edited checkbox and changing the totalCount variable. This variable should be defined outside any function, in order to preserve its value.
<script>
var totalCount = 0;
function GridResult_CellValueChanged(sender, e)
{
if (e._cell._address == 0)
var cell = e;
CalculateTotalRecordSummary(cell);
}
function CalculateTotalRecordSummary(cell)
if (!cell._oldValue) {
totalCount += 1;
else {
totalCount -= 1;
document.getElementById('selectedRecord').innerHTML = "Rows selected: " + totalCount;
</script>
By setting the checkbox to true totalCount would increase its value with one, otherwise the value would be reduced. The value would be preserved even if the page is changed.
Below I am attaching a sample, demonstrating the described behavior. According to our support policy, Trial Service level customers are eligible for support for our current latest version, which at this point is 20.1. This is the reason why the provided sample is using version 20.1 of Ultimate for ASP.NET.
Furthermore, Infragistics products have one year of product service releases and three years of developer support. This means that version 11.2 is considered retired and it is no longer eligible for Developer Support Services. More information could be found in the following topic.
Please let me know if you need more information.
Regards,
Monika Kirkova,
Infragistics
WebDataGridTotalRows.zip
Hi Monika,
Thanks for the solution. This actually helps. But i have multiple javascript functions which are accessing the whole webdatagrid. Now that i have added pagination to grid all those functions are only reading the current page and not all pages. Can you please help me with an idea of how can i access the whole grid with paging in java script.
In code behind file if i need to access the whole grid i'm GridResult.Behaviors.Paging.Enabled = false; using this code to enable and disable paging to read the grid data. But is there a way to do the same in java script.
Any help would be appreciated.
Regards
Susmitha Sama
Enabling and disabling behaviors of the WebDataGrid could not be achieved from the client side, however, all of the information regarding the grid could be accessed the following way:
var grid = $find("<%=this.WebDropDown1.ClientID %>").
Furthermore all rows could be accessed through the dataSource, which is bound to the grid:
var dataSource = grid.get_dataSource();
Please let me know if you need additional information regarding this matter.