Modal Popup from WebDataGrid

Answered (Verified) This post has 1 verified answer | 4 Replies | 2 Followers Thread's RSS feed.

zeloniss
Points 435
Replied On: Wed, Mar 7 2012 7:10 PM Reply

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="displaynonepadding:10pxborder:1pxborder-style:solid;" BackColor="#FF9933" Width="600px">
                        <h3 style="text-aligncenter;" id="header">Comments</h3> 
                        <p>Edit your Comments.</p> 
                        <p style="text-aligncenter;">
                                <asp:TextBox ID="txtComm" runat="server" MaxLength="64000" TextMode="multiline" Text='<%# Bind("COMMENT") %>' Width="500" Height="200" ></asp:TextBox>
                        <p style="text-aligncenter;">
                        <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>
  • Post Points: 5

Verified Answer

Answered (Verified) Replied On: Thu, Mar 15 2012 8:20 AM Reply
Verified by zeloniss

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):

Code Snippet
  1. <script type="text/javascript">
  2.     var clickedRowIndex;
  3.     var clickedButton;
  4.     var textArea;
  5.     function trackRowClick(event) {
  6.     //track the templated clicked button and the textarea for the respective row.
  7.         clickedRowIndex = event.target.parentNode.parentNode._object.get_index();
  8.         clickedButton = event.target;
  9.         textArea = event.target.parentNode.getElementsByTagName("div")[0].children[0].children[0].children[2].children[0];
  10.     }
  11.  
  12.     function updateTooltip() {
  13.     //update the buttons tooltip
  14.         clickedButton.title = textArea.value;
  15.     }
  16.  
  17. </script>
  18. <asp:ScriptManager ID="ScriptManager1" runat="server">
  19. </asp:ScriptManager>
  20. <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" >
  21. <Columns>
  22.     <ig:TemplateDataField Key="TemplatedButton">
  23.         <ItemTemplate>
  24.                 <asp:Button ID="Button1" runat="server" Text="..." ToolTip='Tooltip' CssClass="NiceButtons" OnClientClick="trackRowClick(event)"/>
  25.                 <div>
  26.                 <asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="600px">
  27.                 <h3 style="text-align: center;" id="header">Comments</h3>
  28.                 <p>Edit your Comments.</p>
  29.                 <p style="text-align: center;">
  30.                         <asp:TextBox ID="txtComm" runat="server" MaxLength="64000" TextMode="multiline" Text='Tooltip' Width="500" Height="200" ></asp:TextBox>
  31.                 <p style="text-align: center;">
  32.                 <asp:Button ID="closeBtn"  runat="server" Text="Close" /></p>        
  33.                 </asp:Panel>
  34.                 <asp:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server"
  35.                 DynamicServicePath="" Enabled="True" TargetControlID="Button1" PopupControlID="Panel1" OkControlID="closeBtn"
  36.                 BackgroundCssClass="modalBackground" DropShadow="true" PopupDragHandleControlID="header" OnOkScript="updateTooltip()" ></asp:ModalPopupExtender>
  37.                 </div>
  38.  
  39.         
  40.         </ItemTemplate>
  41.         
  42.     </ig:TemplateDataField>
  43. </Columns>
  44. </ig:WebDataGrid>

Please let me know if this helps.

Best Regards,

Petar Ivanov
Developer Support Engineer
Infragistics, Inc.


  • Post Points: 40

All Replies

zeloniss
Points 435
Replied On: Mon, Mar 12 2012 4:49 PM Reply

no suggestions from any one?

  • Post Points: 20
Answered (Verified) Replied On: Thu, Mar 15 2012 8:20 AM Reply
Verified by zeloniss

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):

Code Snippet
  1. <script type="text/javascript">
  2.     var clickedRowIndex;
  3.     var clickedButton;
  4.     var textArea;
  5.     function trackRowClick(event) {
  6.     //track the templated clicked button and the textarea for the respective row.
  7.         clickedRowIndex = event.target.parentNode.parentNode._object.get_index();
  8.         clickedButton = event.target;
  9.         textArea = event.target.parentNode.getElementsByTagName("div")[0].children[0].children[0].children[2].children[0];
  10.     }
  11.  
  12.     function updateTooltip() {
  13.     //update the buttons tooltip
  14.         clickedButton.title = textArea.value;
  15.     }
  16.  
  17. </script>
  18. <asp:ScriptManager ID="ScriptManager1" runat="server">
  19. </asp:ScriptManager>
  20. <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" >
  21. <Columns>
  22.     <ig:TemplateDataField Key="TemplatedButton">
  23.         <ItemTemplate>
  24.                 <asp:Button ID="Button1" runat="server" Text="..." ToolTip='Tooltip' CssClass="NiceButtons" OnClientClick="trackRowClick(event)"/>
  25.                 <div>
  26.                 <asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="600px">
  27.                 <h3 style="text-align: center;" id="header">Comments</h3>
  28.                 <p>Edit your Comments.</p>
  29.                 <p style="text-align: center;">
  30.                         <asp:TextBox ID="txtComm" runat="server" MaxLength="64000" TextMode="multiline" Text='Tooltip' Width="500" Height="200" ></asp:TextBox>
  31.                 <p style="text-align: center;">
  32.                 <asp:Button ID="closeBtn"  runat="server" Text="Close" /></p>        
  33.                 </asp:Panel>
  34.                 <asp:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server"
  35.                 DynamicServicePath="" Enabled="True" TargetControlID="Button1" PopupControlID="Panel1" OkControlID="closeBtn"
  36.                 BackgroundCssClass="modalBackground" DropShadow="true" PopupDragHandleControlID="header" OnOkScript="updateTooltip()" ></asp:ModalPopupExtender>
  37.                 </div>
  38.  
  39.         
  40.         </ItemTemplate>
  41.         
  42.     </ig:TemplateDataField>
  43. </Columns>
  44. </ig:WebDataGrid>

Please let me know if this helps.

Best Regards,

Petar Ivanov
Developer Support Engineer
Infragistics, Inc.


  • Post Points: 40
zeloniss
Points 435
Replied On: Thu, Mar 15 2012 11:44 AM Reply

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

Steve Zelonis

  • Post Points: 20
Replied On: Fri, Mar 16 2012 3:09 AM 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.

Best Regards,

Petar Ivanov
Developer Support Engineer
Infragistics, Inc.


  • Post Points: 5
Page 1 of 1 (5 items) | RSS