[Solved] adding onclick event to a checkbox in a grid

[Daniel Carmo]

Hello,

I currently have a telerik grid with a checkbox on it and i would like to add an onclick event to it. I create the text box on the grid in the following manner.

columns.Template(o =>
            { %>
                <%= Html.CheckBox(o.UrlOverride + "," + o.GroupName + "," + o.DomainName, (bool)o.Active)%>
            <% }).Title("Active");

now for each row created I want to add an event to the checkbox  that will then make the user unable to edit the entry or able to edit the entry based on if this active is true (checked) or false (unchecked).

Thanks,
DC

[Atanas Korchev]

Hi Daniel Carmo,

 You have two options:

1. Use the Html.CheckBox overload that accepts html attributes and add an "onclick" attribute:
   

   <%= Html.CheckBox("", "", new { onclick="checkHandler(this)" })

2. Use jQuery to wire all checkboxes in the grid during its OnLoad event:
   

   <%= Html.Telerik().Grid().Name("Grid")
                     .ClientEvents(e => e.OnLoad("onLoad"))
   %>
     <script type="text/javascript">
   function onLoad() {
        $(this).find(':checkbox').click(function(e) {
              var checked = this.checked;
              //handle the click event
        })
   }
    </script>

Regards,
Atanas Korchev
the Telerik team

[Daniel Carmo]

Alright,

now when you pass 'this' into the java function (sorry I'm a little new to java) will it contain the information for that row? Since I need to alter text boxes for that row, I need to use the information of that row in order to change the text boxes value to the row value, or a message stating the text box is disabled (and also disabling the text box).

Thanks,
D

[Atanas Korchev]

Hi Daniel Carmo,

This is a DOM node representing the checkbox (the clicked element), when used in the context of the onclick attribute.

If you need to get the row which contains the checkbox you can use the following jQuery code:

function checkHandler(checkbox) {
var row = $(checkbox).closest('tr')[0];
        // use the row DOM node to access its cells and their children
}

Regards,
Atanas Korchev
the Telerik team

[Daniel Carmo]

Thanks a lot so far for all the help,

Not sure if i'm doing this right can you shed any light on the situation. Here is what I have

<% String functionCall = String.Format("javascript:checkChanged({0},'{1}','{2}','{3}','{4}',{5}')", "this", o.Percentage, o.BlockAdSource, o.UrlOverride, o.GroupName, o.DomainName); %>
                <%= Html.CheckBox(o.UrlOverride + "," + o.GroupName + "," + o.DomainName, (bool)o.Active, new { @onclick = functionCall })%>

<script type="text/javascript">
        function checkChanged(chkbox, percent, blockAd, urlOverride, groupName, domainName) {
            var row = $(chkbox).closest('tr')[0];
            var textBox = row.getElementsByTagName(urlOverride + groupName + domainName)
            if ($(chkbox).attr('checked').is(":checked")) {
                textBox.Value = percent;
                textBox.attr("disabled", "");
            }
            else {
                textBox.Value = "NA GroupDomain InActive";
                textBox.attr("disabled", "disabled");
            }

            textBox = row.getElementsByTagName(domainName + "," + groupName + "," + urlOverride)
            if ($(chkbox).attr('checked').is(":checked")) {
                textBox.Value = blockAd;
                textBox.attr("disabled", "");
            }
            else {
                textBox.Value = "NA GroupDomain InActive";
                textBox.attr("disabled", "disabled");
            }

            textBox = row.getElementsByTagName(domainName + "," + urlOverride + "," + groupName)
            if ($(chkbox).attr('checked').is(":checked")) {
                textBox.Value = urlOverride;
                textBox.attr("disabled", "");
            }
            else {
                textBox.Value = "NA GroupDomain InActive";
                textBox.attr("disabled", "disabled");
            }
        }
    </script>

when I click the check box nothing occurs.

Thanks,
D

[Atanas Korchev]

Hi Daniel Carmo,

 I cannot tell what is going on based on the source code. Does your function get executed at all?

I suggest you attach a runnable project so I can run it and see what went wrong.

Regards,
Atanas Korchev
the Telerik team

[Daniel Carmo]

Hello Atanas Korchev,

no worries over the weekend I figured out what I needed to do!

Thanks for all the help,
Daniel