Radgrid editform template adds remaining table to form

8 posts, 0 answers
  1. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 16 Dec 2013 Link to this post

    I have a radgrid on an aspx page and have set up an edit form template to edit one of the columns.  The problem is when I click on the button to edit the column, instead of getting only the tables in the edit form I get those tables plus the remaining radgrid data under it.  I have tried it as a modal popup, inline and all other possibilities with the same results each time.  I've attached a couple of jpegs to show what I mean.  Any help is appreciated.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2013 Link to this post

    Hi John,

    Below is a sample code snippet using edit mode as Popup, I couldn't replicate the issue with this, please try and let me know. If this doesn't help, please provide your full code snippet.

    ASPX:
    <telerik:RadGrid ID="RadGrid_Products" runat="server" AutoGenerateColumns="False" AllowPaging="true" DataSourceID="SqlDataSource1">
        <MasterTableView DataKeyNames="OrderID" EditMode="PopUp" CommandItemDisplay="Top">
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn_Products" />
                <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID" />
            </Columns>
            <EditFormSettings EditFormType="Template" CaptionDataField="OrderID" PopUpSettings-ScrollBars="Auto" PopUpSettings-Modal="True" PopUpSettings-ShowCaptionInEditForm="true">
                <FormTemplate>
                    <table width="100%">
                        <tr>
                            <td width="10%" align="right">
                                OrderID:
                            </td>
                            <td colspan="1">
                                <telerik:RadTextBox ID="RadTextBox_Name" runat="server" Width="100%" Text='<%# Bind("OrderID" ) %>' />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <br />
                                <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                    runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                                <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                    CommandName="Cancel" />
                            </td>
                        </tr>
                    </table>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 17 Dec 2013 Link to this post

    Still the same problem.  Here is the code snippet for the grid MasterTableView

    <MasterTableView ShowFooter="false" DataKeyNames="QuestionID" AllowAutomaticInserts="false"
        CommandItemDisplay="TopAndBottom" CommandItemSettings-ShowAddNewRecordButton="false" AllowNaturalSort="False"
        EditMode ="PopUp" HeaderStyle-BackColor="#556D7B" HeaderStyle-ForeColor="White" HeaderStyle-Font-Names="Segoe UI" ItemStyle-Font-Names ="Segoe UI" >
         
         <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
     
     
        <Columns>
              <telerik:GridBoundColumn DataField="Occurrence_ID" HeaderText="Occurrence_ID"
                  DataType="System.Int32"
                  SortExpression="Occurrence_ID" UniqueName="Occurrence_ID" ReadOnly="true" Display="false"/>
              <telerik:GridBoundColumn DataField="QuestionID" HeaderText="QuestionID" UniqueName="QuestionID"
                   HeaderStyle-Width="50px" ItemStyle-Width="50px" ReadOnly="true" Display="false"
                  DataType="System.Int32" SortExpression="QuestionID">
              </telerik:GridBoundColumn>
              <telerik:GridBoundColumn DataField="GroupID" HeaderText="GroupID" UniqueName="GroupID"
                  FilterControlAltText="Filter GroupID column" DataType="System.Decimal"
                  SortExpression="GroupID" ReadOnly = "true" Display="false">
              </telerik:GridBoundColumn>
              <telerik:GridBoundColumn DataField="ItemNumber" HeaderText="#"
                   HeaderStyle-Width="3%" ItemStyle-Width="3%" ItemStyle-Font-Size="X-Small" ReadOnly = "true" Display = "true"
                  SortExpression="ItemNumber">
              </telerik:GridBoundColumn>
              <telerik:GridBoundColumn DataField="FieldName" HeaderText="Field Name" HeaderStyle-Font-Names="Arial" ItemStyle-Font-Names="Arial"
                   HeaderStyle-Width="20%" ItemStyle-Width="20%" ItemStyle-Font-Size="X-Small" ReadOnly = "true" Display = "true"
                  SortExpression="FieldName">
              </telerik:GridBoundColumn>
              <telerik:GridBoundColumn DataField="QuestionText" HeaderText="Question Text"
                   HeaderStyle-Width="58%" ItemStyle-Width="58%" ReadOnly = "true" Display = "true"
                  SortExpression="QuestionText" ItemStyle-Font-Size="X-Small">
              </telerik:GridBoundColumn>
              <telerik:GridBoundColumn DataField="RatingScaleGroup" HeaderText="RatingScaleGroup"
                   HeaderStyle-Width="45%" ItemStyle-Width="45%" ReadOnly = "true" Display = "false">
              </telerik:GridBoundColumn>
              <telerik:GridTemplateColumn HeaderText="Rate Question" UniqueName="RatingScaleID"  Readonly="true" HeaderStyle-Width="1%" ItemStyle-Width="1%">
                 <ItemTemplate>
                         <telerik:RadRating
                             ID="RatingValue"
                             runat="server"
                             AutoPostBack="true"
                             DataMember="RatingScaleID"
                             ViewStateMode="Enabled"
                             SelectionMode="Single"
                             ItemCount="3"
                             Value='<%# Eval("RatingScaleID")%>'
                             OnRate="RateValue_Rate"
                             Precision="Item"
                             ItemHeight = "32px"
                             ItemWidth = "32px"
                             RegisterWithScriptManager="true">
                             <Items>
                                <telerik:RadRatingItem Value="4" HoveredImageUrl="../../Images/NR_red.png" HoveredSelectedImageUrl="../../Images/NR_red.png"
                                     SelectedImageUrl="../../Images/NR_red.png" ImageUrl="../../Images/NR_black.png"
                                     ToolTip="Not Rated"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="1" HoveredImageUrl="../../Images/Red_arrow_down_26x32.png" HoveredSelectedImageUrl="../../Images/black_arrow_down_26x32.png"
                                     SelectedImageUrl="../../Images/Red_arrow_down_26x32.png" ImageUrl="../../Images/Black_arrow_down_26x32.png"
                                     ToolTip="Doesn't Meet"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="2" HoveredImageUrl="../../Images/Gold_arrow_left-right_32x32.png" HoveredSelectedImageUrl="../../Images/Gold_arrow_left-right_32x32.png"
                                     SelectedImageUrl="../../Images/Gold_arrow_left-right_32x32.png" ImageUrl="../../Images/Black_arrow_side-to-side.png" ToolTip="Meets">
                                </telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="3" HoveredImageUrl="../../Images/Green_arrow_up_26x32.png" HoveredSelectedImageUrl="../../Images/Green_arrow_up_26x32.png"
                                     SelectedImageUrl="../../Images/Green_arrow_up_26x32.png" ImageUrl="../../Images/Black_arrow_up_26x32.png" ToolTip="Exceeds">
                                </telerik:RadRatingItem>
                             </Items>
     
                     </telerik:RadRating>
                     <telerik:RadRating
                             ID="YesNoRating"
                             runat="server"
                             AutoPostBack="true"
                             DataMember="RatingScaleID"
                             ViewStateMode="Enabled"
                             SelectionMode="Single"
                             ItemCount="3"
                             Value='<%# Eval("RatingScaleID")%>'
                             OnRate="RateValue_Rate"
                             Precision="Item"
                             ItemHeight = "32px"
                             ItemWidth = "32px"
                             Visible = "false"
                             RegisterWithScriptManager="true">
                             <Items>
                                <telerik:RadRatingItem Value="4" HoveredImageUrl="../../Images/NR_red.png" HoveredSelectedImageUrl="../../Images/NR_red.png"
                                     SelectedImageUrl="../../Images/NR_red.png" ImageUrl="../../Images/NR_black.png"
                                     ToolTip="Not Rated"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="1" HoveredImageUrl="../../Images/N_red.png" HoveredSelectedImageUrl="../../Images/N_red.png"
                                     SelectedImageUrl="../../Images/N_red.png" ImageUrl="../../Images/N_black.png"
                                     ToolTip="No"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="2" HoveredImageUrl="../../Images/Y-green.png" HoveredSelectedImageUrl="../../Images/Y-green.png"
                                     SelectedImageUrl="../../Images/Y-green.png" ImageUrl="../../Images/Y_black.png" ToolTip="Yes">
                                </telerik:RadRatingItem>
                             </Items>
     
                     </telerik:RadRating>
                   </ItemTemplate>
              </telerik:GridTemplateColumn>
              <telerik:GridBoundColumn DataField="WeightingFactor"
                  HeaderText="Wgt Factor" UniqueName = "WeightingFactor"
                  HeaderStyle-Width="3%" ItemStyle-Width="3%" ReadOnly = "true" Display = "false"
                  DataType="System.Int32" SortExpression="WeightingFactor">
              </telerik:GridBoundColumn>
              <telerik:GridCalculatedColumn
              DataFields="EvaluationValue,WeightingFactor"
              UniqueName="QuestionValue"
              HeaderText="Score"
              FooterText="Total Score"
              Expression="{0} * {1}"
              Aggregate="Sum"
              HeaderStyle-Width="3%" ItemStyle-Width="3%"   HeaderStyle-Font-Size="x-Small" ItemStyle-Font-Size="X-Small">
              </telerik:GridCalculatedColumn>
              <telerik:GridBoundColumn DataField="EvaluationComments" HeaderText = "Comments" UniqueName = "EvaluationComments"
                  HeaderStyle-Width="25%" ItemStyle-Width="25%" ReadOnly = "false" Display="false">
              </telerik:GridBoundColumn>
              <telerik:GridEditCommandColumn
                 UniqueName="Comments"  EditText="..." ButtonType="PushButton" HeaderStyle-Width = "0.5%" ItemStyle-width="0.5%">
                  
              </telerik:GridEditCommandColumn>
         </Columns>
     
     <EditFormSettings EditFormType="Template">
         <EditColumn UniqueName="Comments" />
         <PopUpSettings Modal="true" Width="600px" Height="300px" ZIndex="1000" />
         <FormTemplate>
             <table width="600px">
                 <tr>
                     <td width="100px">
                         <b>Comments</b>
                     </td>
                     <td colspan="1">
                         <asp:TextBox ID="tbEvaluationComments" runat="server" TextMode="MultiLine" Width="500px" Text='<%# Bind("EvaluationComments") %>'>
                         </asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="3">
                         <asp:Button ID="btnUpdate" Text="Save Comment"
                                 runat="server" CommandName="Update">
                         </asp:Button>
                           
                         <asp:Button ID="btnCancel" Text="Close" runat="server"
                                 CommandName="Cancel">
                         </asp:Button>
                           
                         <asp:Button ID="btnClear" Text="Clear Text" runat="server"
                                 CommandName="Clear" OnClick="subClearText">
                         </asp:Button>
                     </td
                 </tr
             </table>
                          
         </FormTemplate>
     </EditFormSettings>
     
     
     <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
     
    </MasterTableView>
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2013 Link to this post

    Hi John,

    I was able to replicate the issue. You where having the Grid with the PopUp because your table td, and tr tag were not closed properly.
    Please correct the following code snippet.

    ASPX:
    <EditFormSettings EditFormType="Template">
         <EditColumn UniqueName="Comments" />
         <PopUpSettings Modal="true" Width="600px" Height="300px" ZIndex="1000" />
         <FormTemplate>
             <table width="600px">
                 <tr>
                     <td width="100px">
                         <b>Comments</b>
                     </td>
                     <td colspan="1">
                         <asp:TextBox ID="tbEvaluationComments" runat="server" TextMode="MultiLine" Width="500px" Text='<%# Bind("EvaluationComments") %>'>
                         </asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="3">
                         <asp:Button ID="btnUpdate" Text="Save Comment"
                                 runat="server" CommandName="Update">
                         </asp:Button>                      
                         <asp:Button ID="btnCancel" Text="Close" runat="server"
                                 CommandName="Cancel">
                         </asp:Button>                      
                         <asp:Button ID="btnClear" Text="Clear Text" runat="server"
                                 CommandName="Clear" OnClick="subClearText">
                         </asp:Button>
     ..............................Here you have to close the tags properly......................
                     </td>
                 </tr>
             </table>                     
         </FormTemplate>
     </EditFormSettings>

    Thanks,
    Princy
  6. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 18 Dec 2013 Link to this post

    Thank you!  I knew it was something I was missing there.
  7. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 18 Dec 2013 Link to this post

    One more question.  I've added the Clear Text button to this edit form.  It's function is to clear the text from the text box.  I know it seems strange but it's a client request.  My problem is I can't seem to get to the text box in code behind to clear the text from the box.  Any suggestions would be appreciated.
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Dec 2013 Link to this post

    Hi John,

    Please try the following code snippet to clear the TextBox values:

    ASPX:
    <asp:Button ID="btnClear" Text="Clear Text" runat="server" OnClick="btnClear_Click">
    </asp:Button>

    C#:
    protected void btnClear_Click(object sender, EventArgs e)
    {
      Button btn = (Button)sender;
      GridEditableItem edit = (GridEditableItem)btn.NamingContainer;
      TextBox txt = (TextBox)edit.FindControl("tbEvaluationComments");
      txt.Text = string.Empty;      
    }

    Thanks,
    Princy
  9. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 19 Dec 2013 Link to this post

    Perfect!  I wasn't sure how to get to the GridEdit part.  All works perfect.  Thanks for your help.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017