Hi,
I have two tables, Purchase Orders and Purchase Order Lines. They both appear on the screen at the same time, in separate update panels, one underneath the other.
I would like to capture the value of the field called "POCONumber", in the main POs table, and use it as a filter to filter contents in the PO Lines table.
It would be ideal if I could also write that selected POCONumber value to a session variable.
Solutions can either be in javascript or code-behind; whichever has better performance.
I'm using VB.NET.
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid3" runat="server" Height="400px" Width="100%" DataSourceID="WebHierarchicalDataSource1" DataKeyFields="ID" EnableAjax="False" EnableAjaxViewState="False" AutoGenerateColumns="False" DefaultColumnWidth="200px"> <Columns> <ig:BoundDataField DataFieldName="ID" Key="ID" Hidden="true"> <Header Text="ID"> </Header> </ig:BoundDataField> <ig:BoundDataField DataFieldName="POCONumber" Key="POCONumber"> <Header Text="POCONumber"> </Header> </ig:BoundDataField> <%--ETC.--%> </Columns> <AjaxIndicator Enabled="True" /> <GroupingSettings EnableColumnGrouping="True"> </GroupingSettings> <EditorProviders> <%--ETC.--%> </EditorProviders> <Behaviors> <ig:Activation ActiveCellCssClass="ActiveCellClass" ActiveRowCssClass="ActiveRowClass"> </ig:Activation> <ig:EditingCore BatchUpdating="True" EnableInheritance="True"> <Behaviors> <ig:RowEditing> <ColumnSettings> <%--ETC.--%> </ColumnSettings> </ig:RowEditing> <ig:RowDeleting Enabled="true" ShowDeleteButton="true"> </ig:RowDeleting> <ig:RowAdding Enabled="true" EditModeActions-EnableF2="true" EditModeActions-EnableOnActive="true"> <EditModeActions EnableOnActive="True" /> <ColumnSettings> <%--ETC.--%> </ColumnSettings> </ig:RowAdding> </Behaviors> </ig:EditingCore> <ig:Selection CellSelectType="Single" Enabled="true" RowSelectType="Single"> </ig:Selection> <ig:RowSelectors> </ig:RowSelectors> <ig:Paging PageSize="30" PagerAppearance="Bottom" PagerMode="NumericFirstLast"> </ig:Paging> <ig:Filtering> </ig:Filtering> <ig:Sorting EnableInheritance="true"> </ig:Sorting> </Behaviors> </ig:WebHierarchicalDataGrid> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnPOSave" EventName="Click" /> </Triggers> </asp:UpdatePanel> <br /> <br /> <asp:UpdatePanel runat="server" ID="UpdatePanel3"> <ContentTemplate> <ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid4" runat="server" Height="350px" Width="1200px" DataSourceID="whdgsPOLines" DataKeyFields="ID" AutoGenerateColumns="false" EnableAjax="false" EnableAjaxViewState="false"> <Columns> <ig:BoundDataField DataFieldName="ID" Key="ID" Hidden="true"> <Header Text="ID"> </Header> </ig:BoundDataField> <ig:BoundDataField DataFieldName="POCONumber" Key="POCONumber" Width="100px"> <Header Text="PO#"> </Header> </ig:BoundDataField> <%--ETC.--%> </Columns> <AjaxIndicator Enabled="True" /> <EditorProviders> </EditorProviders> <Behaviors> <ig:EditingCore EnableChildlessRowsPopulation="True" EnableInheritance="True" BatchUpdating="true"> <Behaviors> <ig:RowEditing> <%--ETC.--%> </ig:RowEditing> <ig:RowDeleting> </ig:RowDeleting> <ig:RowAdding Enabled="true"> <%--ETC.--%> </ig:RowAdding> </Behaviors> </ig:EditingCore> <ig:Filtering> </ig:Filtering> <ig:Sorting> </ig:Sorting> </Behaviors> </ig:WebHierarchicalDataGrid> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnSetPONumber" EventName="Click" /> </Triggers> </asp:UpdatePanel>
Hello,
Thank you for contacting us.
My suggestion is to perform client-side filtering. Use Selection behavior in order to get the POCONumber value, and after that apply your custom filter in the second Grid.
Code snippet:
//This will return you POCONumber Value
var selection = ig_controls.WebHierarchicalDataGrid1.get_gridView().get_behaviors().get_selection();var POCONumberCell = selection.get_selectedRows().getItem(0).get_cellByColumnKey("OrderID");var POCONumber = POCONumberCell.get_value();
//Get Filtering behavior
var grid = ig_controls.WebHierarchicalDataGrid1;var filtering = grid.get_gridVIew().get_behaviors().get_filtering();
//Create new filter with some Rule passing the POCONumber value
var newFilter = filtering.create_columnFilter("POCONumberFilter");newFilter.get_condition().set_value(POCONumber);//$IG.NumericFilterRules.GreaterThan => 3newFilter.get_condition().set_rule($IG.NumericFilterRules.GreaterThan);
//Apply the new filter
filtering.add_columnFilter(newFilter);filtering.applyFilters();
More information:
We provide FilterRules enumerations like NumericFilterRules, BooleanFilterRules, TextFilterRules.
$IG.NumericFilterRules.All => 0$IG.NumericFilterRules.Equals => 1$IG.NumericFilterRules.DoesNotEqual => 2$IG.NumericFilterRules.GreaterThan => 3$IG.NumericFilterRules.GreaterThanOrEqualTo => 4$IG.NumericFilterRules.LessThan => 5$IG.NumericFilterRules.LessThanOrEqualTo => 6$IG.NumericFilterRules.IsNotNull => 8$IG.NumericFilterRules.IsNull => 7
If you want to apply Boolean or Text filter then you should use:$IG.BooleanFilterRules$IG.TextFilterRules
Sorry, I'm having issues with your code. Can you please review my function?
My Function
<script type="text/javascript" > function getPOCO(sender, e) { //This will return you POCONumber Value var selection = ig_controls.WebHierarchicalDataGrid1.get_gridView().get_behaviors().get_selection(); var POCONumberCell = selection.get_selectedRows().getItem(0).get_cellByColumnKey("POCONumber"); var POCONumber = POCONumberCell.get_value(); //Get Filtering behavior var grid = ig_controls.WebHierarchicalDataGrid2; //whdg2 is PO Lines Grid var filtering = grid.get_gridVIew().get_behaviors().get_filtering(); //Create new filter with some Rule passing the POCONumber value var newFilter = filtering.create_columnFilter("POCONumberFilter"); newFilter.get_condition().set_value(POCONumber); //$IG.NumericFilterRules.GreaterThan => 3 newFilter.get_condition().set_rule($IG.TextFilterRules.Contains); //Apply the new filter filtering.add_columnFilter(newFilter); filtering.applyFilters(); } </script>
My scripting on the selection event of WHDG1
<ig:Selection CellSelectType="Single" Enabled="true" RowSelectType="Single"> <SelectionClientEvents CellSelectionChanged="getPOCO"/> </ig:Selection>
On running, I get this error (not sure if related)
0x800a138f - JavaScript runtime error: Unable to get property 'pingInterval' of undefined or null reference
Then this error
0x800a138f - JavaScript runtime error: Unable to get property 'get_gridView' of undefined or null reference
It does not like this line
var selection = ig_controls.WebHierarchicalDataGrid1.get_gridView().get_behaviors().get_selection();
This means that does not find the WebHierarchicalDataGrid.
As I've noticed from the provided snippet you are trying to get grid with id "WebHierarchicalDataGrid1" but your grid is with id "WebHierarchicalDataGrid3". Could you please change to use the correct id and let me know about the results.
Another way to get Grid instance is with find function:
$find("<%= YourGridID.ClientID %>")
Let me know if I may help you further with this.
Sorry for the delay. Actually that was not the issue. However, I ended up going with a simpler solution (2 separate WebDataGrids)
If possible, can you please provide a simple zip example of this for my records?
Thanks again