I have a webdatagrid(2011.2). and in one column I have templated that it use a Modal Popup to show the comments by clicking a button in that cell. This popup has a textarea in it, that hold comments for the row. This button has for its tooltip the value of teh comments. I'm having dificulty trying to figure out the best way to update my tooltips when the comment popup closes. Below is the Html for my grid. Any help i this would be greatly appreciated. Thanks
Steve Zelonis
<ig:WebDataGrid ID="WdgCurrYear" runat="server" AutoGenerateColumns="False" StyleSetName="WestonBlue" > <Columns> <ig:BoundDataField DataFieldName="FY_CD" DataType="System.String" Hidden="True" Key="FY_CD"> <Header Text="YEAR" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="METRIC_ID" Hidden="True" Key="METRIC_ID"> <Header Text="Metric ID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="METRIC_DESC" Key="METRIC_DESC" Width="100px"> <Header Text="Metric" /> </ig:BoundDataField> <ig:GroupField Key="QTR1" Header-CssClass="Multi_Col1"> <Header Text="Q1" /> <Columns> <ig:BoundDataField DataFieldName="Q1Plan" Key="Q1Plan" Header-CssClass="Single_Col" CssClass="igg_WestonBlueItemRAlign" DataType="System.Int32" HtmlEncode="false" Width="50px"> <Header Text="Plan" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q1amt" Key="Q1amt" Header-CssClass="Single_Col_Bot" CssClass="igg_WestonBlueItemRAlign" DataType="System.Int32" HtmlEncode="false" Width="50px"> <Header Text="Amt" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q1Var" Key="Q1Var" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col_Bot" DataType="System.Int32" HtmlEncode="false" Width="50px"> <Header Text="Var" /> <Footer CssClass="Class1" /> </ig:BoundDataField> </Columns> </ig:GroupField> <ig:GroupField Key="QTR2" Header-CssClass="Multi_Col1"> <Header Text="Q2" /> <Columns> <ig:BoundDataField DataFieldName="Q2Plan" Key="Q2Plan" Header-CssClass="Single_Col" CssClass="igg_WestonBlueItemRAlign" HtmlEncode="false" Width="50px"> <Header Text="Plan" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q2amt" Key="Q2amt" Header-CssClass="Single_Col_Bot" CssClass="igg_WestonBlueItemRAlign" HtmlEncode="false" Width="50px"> <Header Text="Amt" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q2Var" Key="Q2Var" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col_Bot" HtmlEncode="false" Width="50px"> <Header Text="Var" /> </ig:BoundDataField> </Columns> </ig:GroupField> <ig:GroupField Key="QTR3" Header-CssClass="Multi_Col1"> <Header Text="Q3" /> <Columns> <ig:BoundDataField DataFieldName="Q3Plan" Key="Q3Plan" Header-CssClass="Single_Col" CssClass="igg_WestonBlueItemRAlign" HtmlEncode="false" Width="50px"> <Header Text="Plan" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q3amt" Key="Q3amt" Header-CssClass="Single_Col_Bot" CssClass="igg_WestonBlueItemRAlign" HtmlEncode="false" Width="50px"> <Header Text="Amt" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q3Var" Key="Q3Var" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col_Bot" HtmlEncode="false" Width="50px"> <Header Text="Var" /> </ig:BoundDataField> </Columns> </ig:GroupField> <ig:GroupField Key="QTR4" Header-CssClass="Multi_Col1"> <Header Text="Q4" /> <Columns> <ig:BoundDataField DataFieldName="Q4Plan" Key="Q4Plan" Header-CssClass="Single_Col" CssClass="igg_WestonBlueItemRAlign" HtmlEncode="false" Width="50px"> <Header Text="Plan" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q4amt" Key="Q4amt" Header-CssClass="Single_Col_Bot" CssClass="igg_WestonBlueItemRAlign" HtmlEncode="false" Width="50px"> <Header Text="Amt" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Q4Var" Key="Q4Var" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col_Bot" HtmlEncode="false" Width="50px"> <Header Text="Var" /> </ig:BoundDataField> </Columns> </ig:GroupField> <ig:GroupField Key="Year" Header-CssClass="Multi_Col2"> <Header Text="Year" /> <Columns> <ig:BoundDataField DataFieldName="YrPlan" Key="YrPlan" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col" HtmlEncode="false" Width="50px"> <Header Text="Plan" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="YrAmt" Key="YrAmt" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col_Bot" HtmlEncode="false" Width="50px"> <Header Text="Amt" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="YrVar" Key="YrVar" CssClass="DisableRow igg_WestonBlueItemRAlign" Header-CssClass="Single_Col2" HtmlEncode="false" Width="50px"> <Header Text="Var" /> </ig:BoundDataField> </Columns> </ig:GroupField> <ig:TemplateDataField Key="COMMENT" Width="80" CssClass="igg_WestonBlueItemCAlign"> <ItemTemplate> <asp:Button ID="Button1" runat="server" Text="..." ToolTip='<%# Bind("COMMENT") %>' CssClass="NiceButtons"/> <div> <asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="600px"> <h3 style="text-align: center;" id="header">Comments</h3> <p>Edit your Comments.</p> <p style="text-align: center;"> <asp:TextBox ID="txtComm" runat="server" MaxLength="64000" TextMode="multiline" Text='<%# Bind("COMMENT") %>' Width="500" Height="200" ></asp:TextBox> <p style="text-align: center;"> <asp:Button ID="closeBtn" runat="server" Text="Close" /></p> </asp:Panel> <asp:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server" DynamicServicePath="" Enabled="True" TargetControlID="Button1" PopupControlID="Panel1" OkControlID="closeBtn" BackgroundCssClass="modalBackground" DropShadow="true" PopupDragHandleControlID="header" OnOkScript="ClosingPopUp(this.OkControlID)"></asp:ModalPopupExtender> </div> </ItemTemplate> <Header Text="Comments" /> </ig:TemplateDataField> <ig:BoundDataField DataFieldName="Calculation" Hidden="True" Key="Calculation"> <Header Text="Calculation" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="Q1Var" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="Q2Var" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="Q3Var" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="Q4Var" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="YrPlan" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="YrAmt" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="YrVar" ReadOnly="True" /> <ig:EditingColumnSetting ColumnKey="METRIC_DESC" ReadOnly="True" /> </ColumnSettings> <EditModeActions MouseClick="Single" EnableOnActive="True" /> <CellEditingClientEvents EnteringEditMode="YearOneEnteringEditMode" ExitedEditMode="YearOneExitingEditMode" /> </ig:CellEditing> </Behaviors> </ig:EditingCore> </Behaviors> <Templates> <ig:ItemTemplate ID="WdgCurrYearTemplate1" runat="server" TemplateID="CMdComment"> </ig:ItemTemplate> </Templates> </ig:WebDataGrid>
no suggestions from any one?
Hi zeloniss,
Apologies for the delayed response.
In this scenario I would suggest that you handle the OnClientClick event of your templated button along with the OnOkScript for the modal popup in order to update the tooltip of your button. Here is a sample implementation for this scenario (using the item template you have provided):
Please let me know if this helps.
Petar,
Your Exmaple worked great but needs to be slightly modified to have where you have event.target... changed to event.srcElement... AS i was getting error .target is unknown. BUt onec used srcElement It work great
Thanks for the reply
Hi Steve,
Thank you for your reply and feedback.
Just as an additional piece of information, I have researched the matter further and it seems that event.target seems to be specific to Mozilla, while event.srcElement is specific in IE. Please feel free to contact me if you have any questions.