This is a migrated thread and some comments may be shown as answers.

How to access multiple objects in a GridTemplateColumn

7 Answers 147 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Stol
Top achievements
Rank 1
Stol asked on 12 Jan 2012, 09:25 AM
hello,

I have this column in a RadGrid :
<Telerik:GridTemplateColumn DataType="System.Int32" HeaderText="Impression Papier" UniqueName="NbPapier">
 <ItemTemplate>
  <asp:CheckBox ID="ChkBoxNb" runat="server" AutoPostBack="false" OnCheckedChanged="ToggleRadNumericState"/>
  <Telerik:RadNumericTextBox ID="RadNumericTextBoxNb" runat="server" AllowOutOfRangeAutoCorrect="true"
                                                AutoPostBack="false" DataType="System.Int32" Enabled="true" MinValue="0" NumberFormat-AllowRounding="false"
                                                NumberFormat-DecimalDigits="0" ShowSpinButtons="true" Type="Number" ValidationGroup="MyValidationGroup"
                                                MaxLength="3" Value="0" />
 </ItemTemplate>
</Telerik:GridTemplateColumn>


I
need to access a CheckBox and a RadNumericTextBox that are in the same GridTemplateColumn to affect the enabled property of the  RadNumericTextBox as CheckBox.checked and take into account the change is immediate without the need of a PostBack like this code but as javascript :

protected void ToggleRadNumericState(object sender, EventArgs e)
{
        (((sender as CheckBox).NamingContainer as GridItem).FindControl("RadNumericTextBoxNb") as RadNumericTextBox).Enabled = (sender as CheckBox).Checked;
}
Why can I do it?

Thanks for your help.

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 12 Jan 2012, 10:27 AM
Hello,

Try the following.
C#:
protected void ToggleRadNumericState(object sender, EventArgs e)
   {
      CheckBox CheckBox1=sender as CheckBox;
      GridDataItem itm = (GridDataItem)CheckBox1.NamingContainer;
      RadNumericTextBox NumericTextBox1=(RadNumericTextBox)itm.FindControl("RadNumericTextBox1");
   }
Note: Set AutoPostBack of CheckBox as true.

Thanks,
Princy.
0
Stol
Top achievements
Rank 1
answered on 12 Jan 2012, 10:53 AM
Hello Princy,

thanks for your solution, but i don't want to use AutoPostBack because it's much slow if I want to quickly check multiple checkbox.

This is why i need to use JavaScript.

I have already recovered the row with this but I'm unable to get the checkbox :

function ToggleRadNumericState(sender, args) {
            var master = $find("<%=RadGridDemandes.ClientID %>").get_masterTableView();
            var row = master.get_dataItems()[0];
            debugger;
            // Need to get the checkbox
            var chkbox = row.findElement("chkBoxNb"); //Doesn't work
            var numtxtbox = row.findElement("RadNumericTextBoxNb"); //Doesn't work
}

Have you an idea?
0
Stol
Top achievements
Rank 1
answered on 12 Jan 2012, 04:56 PM
I need your help for using javascript for refresh radGrid, i don't need to access the items in row if the radgrid is refresh quickly on the server-side, like GridClientSelectColumn on client-side.

Excuse
me for my English, I'm French and I do not entirely mastering the language
.

Thanks for advance.
0
Marin
Telerik team
answered on 13 Jan 2012, 10:12 AM
Hi Stol,

 You can change the enabled state of the NumericTextBox on the client without postback in the following way:

<telerik:GridTemplateColumn DataType="System.Int32" HeaderText="Impression Papier"
                        UniqueName="NbPapier">
                        <ItemTemplate>
                            <asp:CheckBox ID="ChkBoxNb" runat="server" onchange="check_changed(event);return false;"/>
                            <telerik:RadNumericTextBox ID="RadNumericTextBoxNb" runat="server" AllowOutOfRangeAutoCorrect="true"
                                AutoPostBack="false" DataType="System.Int32" Enabled="false" MinValue="0" NumberFormat-AllowRounding="false"
                                NumberFormat-DecimalDigits="0" ShowSpinButtons="true" Type="Number" ValidationGroup="MyValidationGroup"
                                MaxLength="3" Value="0" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

function check_changed(e)
                {
                    //gets the html element triggering the event (which is the checkbox)
                    var evt = e? e : window.event;
                    var target = e.target? e.target : e.srcElement;
 
                    //gets the cell holding the checkbox and the NumericTextBox;
                    var cell = target.parentNode.parentNode;
 
                    //enables or diables the textbox depending on the checked state of the checkbox
                    var numTxb = $telerik.findControl(cell, "RadNumericTextBoxNb");
                    target.checked ? numTxb.enable() : numTxb.disable();
                }


All the best,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Stol
Top achievements
Rank 1
answered on 17 Jan 2012, 04:19 PM
Hello,

Thanks for your help, but i have encounter 2 problem with your solution :
- The first : The asp:ChexkBox doesn't have onchange handler (i have using an <input type="CheckBox" />)
- The second : I use IE8, witch does not support well onchange handler (it performs a focus and wait a focus off to execute the onchange), I've read that i was to use onblur handler.

Finally, i have used JQuery for having the great run using :
$(document).ready(function () {
        
           $('table.riTable').toggle();
            
           $('.ChkBoxNb').change(function(e) {
               var me = $(this);
               //var suffix = 'RadNumericTextBoxNb_text';
               var textbox = me.parents(':first').find('table.riTable');
          
               textbox.toggle();
           });
       });

Great thanks,

Frédéric Stol.
0
Marin
Telerik team
answered on 18 Jan 2012, 10:13 AM
Hello,

 The server side ASP.NET control basically renders nothing more than a input type=checkbox, so even if the onchange (onclick) event is not actually event of the server control it will still be set as an attribute to the input that is rendered. Of course you can also use the classic HTML input type checkbox if you don't require any server-side processing. 
About the second problem: indeed the onchange event is not supported in older versions of IE. That's why it is better to use the onclick event to ensure cross-browser compatibility. It should work fine in all browsers:

<ItemTemplate>
                            <asp:CheckBox ID="ChkBoxNb" runat="server" onclick="check_changed(event);"/>
.....

Of course using jQuery is also an option here.

All the best,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Aprajita
Top achievements
Rank 1
answered on 25 Sep 2014, 10:10 AM
I want this type of layout code of JQuery.... Please help if u can.....
Tags
Ajax
Asked by
Stol
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Stol
Top achievements
Rank 1
Marin
Telerik team
Aprajita
Top achievements
Rank 1
Share this question
or