Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Grid Form Template Item

5 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
amit
Top achievements
Rank 1
amit asked on 30 Dec 2010, 02:46 PM
Hello,
 I have a red grid and that grid contains

MasterTableView - > EditFormSettings - > FormTemplate
in FormTemplate I have 2 Radiobutton and on this radio button should Visible true false a TR using js or jquery.
i enable to do that with red grid, plz give me suitable code of js or jquery to do my task...

My grid code is below.............

 

 

<telerik:RadGrid ID="grdPurchaseItems" runat="server" ShowStatusBar="True" AllowAutomaticUpdates="false"

 

 

AllowAutomaticInserts="false" AllowAutomaticDeletes="false" AllowPaging="True"

 

 

Skin="Outlook" AllowSorting="True" OnNeedDataSource="grdPurchaseItems_NeedDataSource"

 

 

OnItemCommand="grdPurchaseItems_ItemCommand" AutoGenerateColumns="false" OnItemDataBound="grdPurchaseItems_ItemDataBound"

 

 

Width="99%">

 

 

<GroupingSettings CaseSensitive="False"></GroupingSettings>

 

 

<MasterTableView DataKeyNames="Sno" EditMode="PopUp" CommandItemDisplay="Top">

 

 

<Columns>

 

 

<telerik:GridEditCommandColumn Visible="False" ButtonType="ImageButton">

 

 

</telerik:GridEditCommandColumn>

 

 

<telerik:GridBoundColumn DataField="Sno" UniqueName="Sno" HeaderText="S.No.">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="ItemID" UniqueName="ItemID" Visible="False" HeaderText="ID">

 

 

<ItemStyle ForeColor="Gray"></ItemStyle>

 

 

<HeaderStyle Width="20px" ForeColor="WhiteSmoke"></HeaderStyle>

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="ItemCode" UniqueName="ItemCode" HeaderText="Item-Code">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="ItemName" UniqueName="ItemName" HeaderText="Item Name">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Size" UniqueName="ItemSize" HeaderText="Size">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Unit" UniqueName="Unit" HeaderText="Unit">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Qty" UniqueName="Qty" HeaderText="Qty">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="RatePerUnit" UniqueName="RatePerUnit" HeaderText="Rate/Unit">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Discount" UniqueName="Discount" HeaderText="Discount(%)">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="NetRatePerUnit" UniqueName="NetRatePerUnit" HeaderText="Net Rate/Unit">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="TotalAmt" UniqueName="TotalAmt" HeaderText="Total Amt."

 

 

Visible="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="TaxRate" UniqueName="TaxRate" HeaderText="Tax Rate(%)">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="TaxAmt" UniqueName="TaxAmt" HeaderText="Tax Amt."

 

 

Visible="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="GrossAmt" UniqueName="GrossAmt" HeaderText="Gross Amt."

 

 

Visible="false" />

 

 

<telerik:GridBoundColumn DataField="Adjustment" UniqueName="Adjustment" HeaderText="Adjustment"

 

 

Visible="false" />

 

 

<telerik:GridBoundColumn DataField="GrandTotal" UniqueName="GrandTotal" HeaderText="GrandTotal"

 

 

Visible="false" />

 

 

<telerik:GridButtonColumn UniqueName="column" Text="Delete" CommandName="Delete"

 

 

ButtonType="ImageButton">

 

 

</telerik:GridButtonColumn>

 

 

</Columns>

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

<EditFormSettings EditFormType="Template">

 

 

<FormTemplate>

 

 

<table id="table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"

 

 

style="border-collapse: collapse; background: white;">

 

 

<tr>

 

 

<td colspan="2" style="font-size: small">

 

 

<b>Item Details</b></td>

 

 

</tr>

 

 

<tr>

 

 

<td colspan="2">

 

 

<table id="table3" cellspacing="1" cellpadding="1" width="100%" border="0">

 

 

<tr>

 

 

<td colspan="5">

 

 

<asp:ValidationSummary ID="ValidationSummary2" runat="server" ShowMessageBox="True"

 

 

ShowSummary="False" ValidationGroup="vsum1" />

 

 

</td>

 

 

<td>

 

 

<asp:HiddenField ID="hdnSno" runat="server" Value='<%# Bind( "Sno" ) %>' />

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="tdleft">

 

 

&nbsp;Item Category<span style="color: #ff0000"> *</span></td>

 

 

<td class="tdleft">

 

 

<asp:DropDownList ID="cmbItemCategory" CssClass="setcombo" DataSource='<%# f_BindItemCategory(0) %>'

 

 

DataTextField="ItemCatName" DataValueField="ItemCatID" runat="server" AutoPostBack="true"

 

 

OnSelectedIndexChanged="cmbItemCategory_SelectedIndexChanged">

 

 

<asp:ListItem Selected="True" Text="Select" Value="0"></asp:ListItem>

 

 

</asp:DropDownList>

 

 

<asp:RequiredFieldValidator ID="rfvItemCategory" InitialValue="0" runat="server"

 

 

ControlToValidate="cmbItemCategory" Display="Dynamic" ErrorMessage="Please Select Item Category"

 

 

ValidationGroup="vsum1"><span style="COLOR: #ff0000"> *</span></asp:RequiredFieldValidator>

 

 

</td>

 

 

<td class="tdleft">

 

 

&nbsp;Item<span style="color: #ff0000"> *</span></td>

 

 

<td class="tdleft">

 

 

<asp:DropDownList ID="cmbItem" runat="server" AutoPostBack="true" CssClass="setcombo"

 

 

OnSelectedIndexChanged="cmbItem_SelectedIndexChanged">

 

 

<asp:ListItem Selected="True" Text="Select" Value="0"></asp:ListItem>

 

 

</asp:DropDownList>

 

 

<asp:RequiredFieldValidator ID="rfvItem" InitialValue="0" runat="server" ControlToValidate="cmbItem"

 

 

Display="Dynamic" ErrorMessage="Please Select Item" ValidationGroup="vsum1"><span style="COLOR: #ff0000"> *</span></asp:RequiredFieldValidator>

 

 

</td>

 

 

<td class="tdleft">

 

 

&nbsp;Item Code</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="ItemCode" runat="server" Text='<%# Bind( "ItemCode" ) %>' CssClass="textbox">

 

 

</asp:TextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="tdleft">

 

 

&nbsp;Item Name</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="ItemName" runat="server" Text='<%# Bind( "ItemName" ) %>' CssClass="textbox">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

 

&nbsp;Size</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="Size" runat="server" Text='<%# Bind( "Size") %>' CssClass="textbox">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

 

&nbsp;Unit</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="Unit" runat="server" Text='<%# Bind( "Unit") %>' CssClass="textbox">

 

 

</asp:TextBox></td>

 

 

</tr>

 

 

<tr>

 

 

<td colspan="6">

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="tdleft">

 

 

&nbsp;Quantity<span style="color: #ff0000"> *</span></td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="Qty" runat="server" Text='<%# Bind( "Qty") %>' AutoPostBack="true"

 

 

CssClass="textbox" OnTextChanged="Qty_TextChanged" onkeypress="javascript:return numeric_only(event)">

 

 

</asp:TextBox>

 

 

<asp:RequiredFieldValidator ID="rfvQty" runat="server" ControlToValidate="Qty" Display="Dynamic"

 

 

ErrorMessage="Please Enter Quantity" ValidationGroup="vsum1"><span style="COLOR: #ff0000"> *</span></asp:RequiredFieldValidator>

 

 

<asp:CompareValidator ID="cvQty" runat="server" Operator="GreaterThan" SetFocusOnError="True"

 

 

Display="Dynamic" ErrorMessage="Please Input At Least 1 Qty." ValueToCompare="0"

 

 

ValidationGroup="vsum1" ControlToValidate="Qty"><span style="COLOR: #ff0000"> *</span></asp:CompareValidator>

 

 

</td>

 

 

<td class="tdleft">

 

 

&nbsp;Rate/Unit</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="RatePerUnit" runat="server" Text='<%# Bind( "RatePerUnit") %>' AutoPostBack="true"

 

 

CssClass="textbox" OnTextChanged="RatePerUnit_TextChanged" onkeypress="return numeric_only(event);">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

 

&nbsp;Discount</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="Discount" runat="server" Text='<%# Bind( "Discount") %>' AutoPostBack="true"

 

 

CssClass="textbox" OnTextChanged="Discount_TextChanged" onkeypress="return numeric_only(event);">

 

 

</asp:TextBox>%</td>

 

 

</tr>

 

 

<tr>

 

 

<td colspan="6">

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="tdleft">

 

 

&nbsp;Net Rate/Unit</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="NetRatePerUnit" runat="server" Text='<%# Bind( "NetRatePerUnit") %>'

 

 

CssClass="textbox" ReadOnly="true" onkeypress="return numeric_only(event);">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

 

&nbsp;Total Amount</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="TotalAmt" runat="server" Text='<%# Bind( "TotalAmt") %>' CssClass="textbox"

 

 

ReadOnly="true" onkeypress="return numeric_only(event);">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

 

&nbsp;Tax Rate<span style="color: #ff0000"> *</span></td>

 

 

<td class="tdleft">

 

 

<asp:DropDownList ID="cmbTaxRate" runat="server" CssClass="setcombo" AutoPostBack="true"

 

 

OnSelectedIndexChanged="cmbTaxRate_SelectedIndexChanged" DataSource='<%# f_BindTaxRate() %>'

 

 

DataTextField="TaxRate" DataValueField="TaxRateID">

 

 

<asp:ListItem Selected="True" Text="Select" Value="0"></asp:ListItem>

 

 

</asp:DropDownList>%<asp:RequiredFieldValidator ID="rfvTaxRate" InitialValue="0"

 

 

runat="server" ControlToValidate="cmbTaxRate" Display="Dynamic" ErrorMessage="Please Select Tax Rate"

 

 

ValidationGroup="vsum1"><span style="COLOR: #ff0000"> *</span></asp:RequiredFieldValidator></td>

 

 

</tr>

 

 

<tr>

 

 

<td colspan="6">

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="tdleft">

 

 

&nbsp;Tax Amount</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="TaxAmt" runat="server" Text='<%# Bind( "TaxAmt") %>' CssClass="textbox"

 

 

ReadOnly="true" onkeypress="javascript:return numeric_only(event);">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

 

&nbsp;Gross Amount</td>

 

 

<td class="tdleft">

 

 

<asp:TextBox ID="GrossAmt" runat="server" Text='<%# Bind( "GrossAmt") %>' CssClass="textbox"

 

 

ReadOnly="true" onkeypress="return numeric_only(event);">

 

 

</asp:TextBox></td>

 

 

<td class="tdleft">

 

Excies Applicable

</td>

 

 

<td class="tdleft">

 

 

<asp:RadioButton ID="rbtnYes" runat="server" Text="Yes" Checked="true" GroupName="Excies"

 

 

onclick="show(this,'Yes');" />

 

 

<asp:RadioButton ID="rbtnNo" runat="server" Text="No" GroupName="Excies" onclick="show(this,'No');" />

 

 

</td>

 

 

</tr>

 

 

<tr id="trExcies" runat="server" visible="false">

 

 

<td>

 

 

</td>

 

 

<td>

 

 

</td>

 

 

<td>

 

 

</td>

 

 

<td>

 

 

</td>

 

 

<td>

 

Excise Tax rate

</td>

 

 

<td>

 

 

<asp:TextBox ID="txtExciseTaxRate" runat="server" />%

 

 

<asp:RequiredFieldValidator ID="rfvExciseTaxRate" runat="server" SetFocusOnError="true"

 

 

Display="Dynamic" ControlToValidate="txtExciseTaxRate" ErrorMessage="Please enter Excise Tax Rate" />

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td align="right" colspan="2">

 

 

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'

 

 

runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

 

 

OnClick="btnUpdate_Click" ValidationGroup="vsum1"></asp:Button>&nbsp;

 

 

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"

 

 

CommandName="Cancel"></asp:Button></td>

 

 

</tr>

 

 

</table>

 

 

</FormTemplate>

 

 

<PopUpSettings Modal="True" Width="80%"></PopUpSettings>

 

 

<FormStyle Width="100%"></FormStyle>

 

 

<EditColumn UniqueName="EditCommandColumn1">

 

 

</EditColumn>

 

 

</EditFormSettings>

 

 

</MasterTableView>

 

 

</telerik:RadGrid>


thanks
Amit

 

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 31 Dec 2010, 10:05 AM
Hello Amit,

Here is a sample code to achieve your requirement. You need to set id for <tr> to hide it. The following code shows how to hide/unhide <tr> with id='tr1' based on the selection of RadioButton.

ASPX:
<FormTemplate>
    <table id="table2" border="1">
        <tr>
            <td>
                <table id="table1" border="0">
                    <tr id="tr1">
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server"
                                Text='<%# Bind( "FirstName") %>'>
                            </asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="table3" border="0">
                    <tr>
                        <td>
                            <asp:RadioButton ID="rbtnYes" runat="server"
                                Text="Yes" Checked="true" GroupName="Excies"
                                onclick="show(this,'Yes');" />
                            <asp:RadioButton ID="rbtnNo" runat="server"
                                 Text="No" GroupName="Excies"
                                 onclick="show(this,'No');" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</FormTemplate>

JavaScript:
<script type="text/javascript">
    function show(radiobtn, value) {
        var tr = document.getElementById("tr1");
        if (value == "Yes")
            tr.style.display = "block";
        else
            tr.style.display = "none";
    }
</script>

Thanks,
Princy.
0
amit
Top achievements
Rank 1
answered on 31 Dec 2010, 10:45 AM
Hello Princy,

I think you not geting my prob, i have a tr in my radgrid and 2 radio button is same rad grid in form template now i have to show and hide this tr.

your last solution was infeasible, please provide me solution acording to my problem, i have deadline . plz five me as soon as possible.


Amit
0
Princy
Top achievements
Rank 2
answered on 03 Jan 2011, 08:22 AM
Hello,


Sorry if I misunderstood about your requirement. I believed that you want to hide <table> row <tr> from client side. If so accessing the <tr> using "id" from client code and setting style will work for you.

Could you please elaborate your requireement if it is different than this scenario, since I am really perplexed?


Thanks,
Princy.
0
amit
Top achievements
Rank 1
answered on 04 Jan 2011, 06:36 AM
Hello Princy,


I am attaching part of code. Please go threw with Id's of controls.
I want to show/hide "trExcies" on rbtnYes Check/Uncheck, both are exists in telerik:RadGrid. Please find with Id's and Provide me solution so i move ahead.

 

<telerik:RadGrid ID="grdPurchaseItems" runat="server" ShowStatusBar="True" AllowAutomaticUpdates="false" AllowAutomaticInserts="false" AllowAutomaticDeletes="false" AllowPaging="True" Skin="Outlook" AllowSorting="True" OnNeedDataSource="grdPurchaseItems_NeedDataSource" OnItemCommand="grdPurchaseItems_ItemCommand" AutoGenerateColumns="false" OnItemDataBound="grdPurchaseItems_ItemDataBound" Width="99%">
 <MasterTableView DataKeyNames="Sno" EditMode="PopUp" CommandItemDisplay="Top">
<Columns>
        <telerik:GridEditCommandColumn Visible="False" ButtonType="ImageButton"/> 
        <telerik:GridBoundColumn DataField="Sno" UniqueName="Sno" HeaderText="S.No."/> 
        <telerik:GridBoundColumn DataField="ItemID" UniqueName="ItemID" Visible="False" HeaderText="ID"/>
         </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="ItemCode" UniqueName="ItemCode" HeaderText="Item-Code">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="ItemName" UniqueName="ItemName" HeaderText="Item Name">
        </telerik:GridBoundColumn>
</Columns>
<EditFormSettings EditFormType="Template">
    <FormTemplate>    
            <table id="table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none" style="border-collapse: collapse; background: white;">
                    <tr>
                            <td colspan="2">
                                     <table id="table3" cellspacing="1" cellpadding="1" width="100%" border="0">
                                            <tr>    
                                                        <td colspan="5">
                                                                       <asp:ValidationSummary ID="ValidationSummary2" runat="server" ShowMessageBox="True" ShowSummary="False" ValidationGroup="vsum1" />
                                                        </td>
                                                         <td class="tdleft">
                                                                    Is Excies Applicable
                                                        </td>
                                                        <td class="tdleft">
                                                                    <asp:CheckBox ID="rbtnYes" runat="server" Checked="true" /> 
                                                        </td>
                                            </tr>
                                            <tr id="trExcies" style="height:30px;" runat="server" visible="true">
                                                <td></td>
                                                 <td></td>
                                                 <td></td>
                                                <td></td>
                                                <td>
                                                        <asp:Label id="lblExciseTaxRate" runat="server" Text="Excise Tax rate"></asp:Label> 
                                                </td>
                                                <td>
                                                        <asp:TextBox ID="txtExciesRate" runat="server"> 
                                                </td>
                                          </tr>
                            </table>
                    </td>
            </tr>
 </table>
</FormTemplate>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>

Thanks & Regard's
Amit

 

0
Princy
Top achievements
Rank 2
answered on 04 Jan 2011, 07:34 AM
Hello Amit,

Try the following code snippet to achieve this.

ASPX:
<EditFormSettings EditFormType="Template">
    <FormTemplate>
          .  .  .  .  .  .  .  . .  .  .
              <asp:CheckBox ID="rbtnYes" runat="server" Checked="true" onclick="show(this);" />
                            </td>
                        </tr>
                        <tr id="trExcies" style="height: 30px;">
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                                <asp:Label ID="lblExciseTaxRate" runat="server" Text="Excise Tax rate"></asp:Label>
                            </td>
                            <td>
                                <asp:TextBox ID="txtExciesRate" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FormTemplate>
</EditFormSettings>

Java Script:
<script type="text/javascript">
    function show(checkbox) {
        var tr = document.getElementById("trExcies");
        if (!checkbox.checked)
            tr.style.display = "block";
        else
            tr.style.display = "none";
    }
</script>

Thanks,
Princy.
Tags
Grid
Asked by
amit
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
amit
Top achievements
Rank 1
Share this question
or