Hi, I have a WebDropDown and WebDataGrid on the page. when selection is changed in WebDropDown I need to repopulate Grid - and do this without full postback I don’t’ want to reload all page,
I only want to refresh grid control.
Please suggest me what is the best way to implement it? Where can I find any code samples? (C# preferred)
Hello Svetlana,
In order to change the DataSource of the WebDataGrid when the selection of a WebDropDown is changed by not using a full postback, I can suggest you use an UpdatePanel as a parent to the WebDataGrid and the WebDropDown.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div> <asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional"> <%--======== Template of UpdatePanel ========--%> <ContentTemplate> <ig:WebDataGrid ID="DataGrid1" runat="server" Width="700px" Height="400px" AutoGenerateColumns="false" EnableAjax="false"> ... </ig:WebDataGrid> <div> <ig:WebDropDown ID="DropDown1" runat="server" Width="200px" EnableCustomValues="false" StyleSetName="IG" OnSelectionChanged="dropDown_SelectionChanged"> ... </ig:WebDropDown> </div> </ContentTemplate> </asp:UpdatePanel> </div>
In the above scenario, a partial-postback will be used instead of a full one for the entire page. Please note that while only the UpdatePanel's content will get refreshed in this case, the page will still go through its entire page life cycle. We will also have to set the EnableAjax propety of the grid to false to disable its built-in Ajax functionality.For more details on using the UpdatePanel you can take a look at the following topic.
I have attached a sample application that demonstrates the approach from above. (You may need to change the assembly references, so they target your specific version of the product.)
If you have any questions, please let me know.
Sincerely,TachoAssociate Software Developer
2388.WebDataGrid_sample.zip
Hello Tacho. Thank you a lot for the idea. In my case i am using ObjectDataSource to populate webdropdown and the grid .
I am having an issue to refresh the grid. When i debug i can see it's going to correct functions and grid is loading with new dataset .but it's not showing up on the UI, not refreshing .Can you please give me advise how i can try to fix this issue? Here is my sample code, I have webdropdown, ObjectDataSource and WebDataGrid inside the updatepanel.
<ig:WebDropDown ID="wddCaseStatus" runat="server" DataSourceID="ODS_Status" TextField ="myName" ValueField="myID" OnSelectionChanged="wdd_SelectionChanged" AutoPostBack ="false" AutoPostBackFlags-SelectionChanged="Async" DisplayMode="DropDownList" CssClass="WebDropDown" Width="300px" > </ig:WebDropDown> <asp:ObjectDataSource ID="ODS_Status" runat="server" SelectMethod="getDDL" TypeName="DataLayer.DLCACaseStory" OnSelecting="ODS_Status_Selecting"> <SelectParameters > <asp:Parameter DbType="String" Direction="Input" Name="sDDLType" DefaultValue="CASE_STATUS" /> </SelectParameters> </asp:ObjectDataSource> <asp:ObjectDataSource ID="ODS_Case" runat="server" TypeName="DataLayer.DLCACaseStory" SelectMethod="getCaseStory" DataObjectTypeName="BusinessObjects.ActionableCase" SortParameterName="sortExpression" OnSelecting="ODSCaseSelecting"> <SelectParameters > <asp:Parameter Name="iCaseType" DbType="String" Direction="Input" DefaultValue="0" /> <asp:Parameter Name="sCaseStatus" DefaultValue="0" DbType="String" Direction="Input" /> <asp:Parameter DbType="Int32" Direction="Input" Name="iCaseID" DefaultValue="0" /> </SelectParameters> </asp:ObjectDataSource> <asp:UpdatePanel ID="UPCaseSummary" runat="server" Visible="true" UpdateMode="Conditional" > <ContentTemplate> <div id="CaseStory" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: auto; margin-left: 20px; color: Black;"> <ig:WebDataGrid ID="WebDGCase" DataKeyFields="ACTIONABLE_CASE_ID" runat="server" AutoGenerateColumns="False" AutoCRUD="true" Height="400px" Width="100%" DataSourceID="ODS_Case" EnableAjax="false" OnInitializeRow="WebDGCase_InitializeRow" BackColor="White" ViewStateMode="Enabled" OnLoad ="DataGrid1_Load" > <Columns> <ig:BoundDataField DataFieldName="ACTIONABLE_CASE_ID" Key="ACTIONABLE_CASE_ID" > <Header Text="Case ID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="ACTIONABLE_CASE_TYPE_NAME" Key="ACTIONABLE_CASE_TYPE_NAME" > <Header Text="Case Type" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="STATUS_CODE" Key="STATUS_CODE" > <Header Text="Status Code" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="STATUS_NAME" Key="STATUS_NAME" > <Header Text="Status Name" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="StartDate" Key="StartDate" > <Header Text="Start Date" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="KeyValueList" Key="KeyValueList" > <Header Text="Key Values" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:Activation Enabled="true" /> <ig:Selection RowSelectType="Single" Enabled="true" > </ig:Selection> <ig:Paging PagerAppearance="Bottom" PageSize="20" Enabled="true" /> <ig:RowSelectors Enabled="true" RowNumbering="true" RowSelectorClientEvents-RowSelectorClicked="WebDGCase_RowSelectorClicked"/> <ig:Sorting SortingMode="Single" Enabled="true" /> <ig:ColumnMoving Enabled="false" /> <ig:ColumnResizing Enabled="true" /> <ig:EditingCore> <Behaviors> <ig:CellEditing Enabled="false"></ig:CellEditing> <ig:RowAdding Enabled="false" /> <ig:RowDeleting Enabled="false" /> </Behaviors> </ig:EditingCore> <ig:SummaryRow Enabled="false" /> <ig:Filtering Alignment="Top" Visibility="Visible" FilterType="ExcelStyleFilter" AnimationEnabled="true" > </ig:Filtering> </Behaviors> </ig:WebDataGrid> </div> </ContentTemplate> </asp:UpdatePanel>
Thank you for the code-snippet you have provided.
Since I cannot refer directly to the code you have used in code-behind, along with any additional logic for the application you have used, I was not able to reproduce the issue you have described in regards to the not rendering grid.
Would you please modify the sample I have attached in my previous reply, so the issue is isolated and reproduced and send it back to me? Having this information will help me further investigate this matter for you.
HI Tacho. Thank you for looking at my issue.
I simplify my code and now I have only a drop down and a text box inside the panel. I also using master page.
I would like when drop down selected change only update textbox that is inside Panel's content , I do not want to get fully page post back. In case when I have <AutoPostBackFlags SelectionChanged="On" it’s updating textbox, but it’s reload my page.
Here is my aspx page
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/CAL.Master" AutoEventWireup="true" CodeBehind="CALSumTest.aspx.cs" Inherits="CompliancePortal.CACPages.CALSumTest" Async="true" %>
<%@ Register assembly="Infragistics4.Web.v16.1, Version=16.1.20161.2236, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.ListControls" tagprefix="ig" %>
<%@ Register assembly="Infragistics4.Web.v16.1, Version=16.1.20161.2236, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.GridControls" tagprefix="ig" %>
<%@ Register assembly="Infragistics4.Web.v16.1, Version=16.1.20161.2236, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.EditorControls" tagprefix="ig" %>
<asp:Content ID="CntMain" ContentPlaceHolderID="MainContentPH" runat="server">
<br />
<div id="dCaseType" style="width:50%; float:left;">
<ig:WebDropDown ID="wddCaseType" runat="server"
TextField ="myName" ValueField="myID"
CssClass="WebDropDown" Width="300px" OnSelectionChanged="dropDown_SelectionChanged" >
<AutoPostBackFlags SelectionChanged="Async" />
<Items>
<ig:DropDownItem Selected="False" Text="a" Value="">
</ig:DropDownItem>
<ig:DropDownItem Selected="False" Text="b" Value="">
<ig:DropDownItem Selected="False" Text="c" Value="">
</Items>
</ig:WebDropDown>
</div>
<asp:UpdatePanel ID="upCaseGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate >
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
My cs:
namespace CompliancePortal.CACPages
{
public partial class CALSumTest : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
this.TextBox1.Text = "";
}
protected void dropDown_SelectionChanged(object sender, Infragistics.Web.UI.ListControls.DropDownSelectionChangedEventArgs e)
this.TextBox1.Text = "test";
this.upCaseGrid.Update();
Master Page cs : CACMaster
namespace CompliancePortal.MasterPages
public partial class CACMaster : System.Web.UI.MasterPage
Master page using ToolkitScriptManager:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="CAC.Master.cs" Inherits="CompliancePortal.MasterPages.CACMaster" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">www.w3.org/.../xhtml1-transitional.dtd">
<html xmlns="">www.w3.org/.../xhtml">
<head id="Head" runat="server">
<!-- Ignite UI Required Combined CSS Files -->
<link href="../Resources/ig/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="../Resources/ig/css/structure/infragistics.css" rel="stylesheet" />
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="../Resources/ig/js/infragistics.core.js"></script>
<script src="../Resources/ig/js/infragistics.lob.js"></script>
<link href="~/Styles/CompliancePortalStyle.css" rel="stylesheet" type="text/css" />
<title>Portal</title>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
- <asp:ToolkitScriptManager ID="TlktScriptMgr" runat="server" EnablePartialRendering="true">
</asp:ToolkitScriptManager>
<div id="title" style="height:auto; width:100%; color:White;";>
<asp:ContentPlaceHolder ID="TitlePH" runat="server">
<img id="MFSLogo" src="/Images/BannerStandard.png" alt="" class="MFSBanner"/>
<div id="NavigationBar" style="height:auto; width=100%; ">
<asp:ContentPlaceHolder ID="NavBarPH" runat="server" >
<asp:Menu ID="MenuMain" runat="server" DataSourceID="SiteMapDataSource" Orientation="Horizontal"
StaticDisplayLevels="2" StaticSubMenuIndent="0px" DynamicHorizontalOffset="0"
RenderingMode="Table" CssClass="PageMenu" >
<LevelMenuItemStyles >
<asp:MenuItemStyle CssClass="level1" />
<asp:MenuItemStyle CssClass="level2" />
<asp:MenuItemStyle CssClass="level3" />
</LevelMenuItemStyles>
<LevelSelectedStyles>
<asp:MenuItemStyle ForeColor="Maroon" BackColor="Silver" CssClass="HoverOrSelectedStyle" />
</LevelSelectedStyles>
<StaticMenuItemStyle Width="100%" />
<DynamicMenuStyle CssClass="PageMenuDD" />
<StaticMenuStyle CssClass="PageMenuBar" />
<DynamicMenuItemStyle CssClass="PageMenuDDItem" />
<StaticMenuItemStyle CssClass="PageMenuBarItem" />
<DynamicHoverStyle ForeColor="Maroon" BackColor="Silver" CssClass="HoverOrSelectedStyle" />
<DynamicSelectedStyle ForeColor="Maroon" BackColor="Silver" CssClass="HoverOrSelectedStyle" />
<StaticHoverStyle ForeColor="Maroon" BackColor="Silver" CssClass="HoverOrSelectedStyle" />
<StaticSelectedStyle ForeColor="Maroon" BackColor="Silver" CssClass="HoverOrSelectedStyle" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" StartingNodeUrl="~/Default.aspx" />
<div id="ErrMsgDiv" style="width:100%; position:relative; height:auto; float:left; border-width:thin; border-style:solid; border-color: Maroon;">
<asp:ContentPlaceHolder ID="ErrMsg" runat="server" > Default Error Msg Place Holder
<div id="MainArea" style="height:auto; width=100%; ">
<asp:ContentPlaceHolder ID="MainContentPH" runat="server" >
Default Main Content Place Holder
</form>
</body>
</html>