How to access multiple objects in a GridTemplateColumn

8 posts, 0 answers
  1. Stol
    Stol avatar
    4 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jan 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stol
    Stol avatar
    4 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    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?
  5. Stol
    Stol avatar
    4 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    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.
  6. Marin
    Admin
    Marin avatar
    1045 posts

    Posted 13 Jan 2012 Link to this post

    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
  7. Stol
    Stol avatar
    4 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    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.
  8. Marin
    Admin
    Marin avatar
    1045 posts

    Posted 18 Jan 2012 Link to this post

    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
  9. Aprajita
    Aprajita avatar
    2 posts
    Member since:
    Sep 2014

    Posted 25 Sep 2014 Link to this post

    I want this type of layout code of JQuery.... Please help if u can.....
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017