How to "un-select" a checkbox

[Timothy Ogilvie]

We have a grid where users can select one checkbox (multi-select is false). We're unable to uncheck the checkbox. This seems to be the default functionality, as in this example:
http://demos.telerik.com/aspnet-ajax/Grid/Examples/Client/Selecting/DefaultCS.aspx

But we want to allow users to "un-select" checkboxes by clicking a second time on the checkbox. How can we do this?

Thanks

[Shinu]

Hi Timothy,

I tried the online demo and I was able to check/uncheck the CheckBox for row selection. I guess you have trouble in deselecting a row on clicking the selected row. If so go through the following forum discussion which explains on this issue.
how to deselect a row in the radgrid

Regards
Shinu

[Timothy Ogilvie]

Did you set multi-select equal to false in the demo (i.e. Uncheck the box at the top labeled "Allow multiple row selection")? This isn't working for me. 

[Princy]

Hi Timothy,

I have tried this and facing the similar scenario as you said. I tried following JavaScript and got it working on my end. Please try adding following JavaScript and check if it resolves. Also add GridCreated event in RadGrid.

ASPX:

<ClientSettings>
            <ClientEvents OnGridCreated="GridCreated"  OnRowSelected="RowSelected"/>
            <Selecting AllowRowSelect="true" />
</ClientSettings>

JavaScript:

<script type="text/javascript">
var grid;
var ischecked=false;
var ctrlId;
function RowSelected(sender, args)
    {
        var e = args.get_domEvent();
        var targetElement = e.srcElement || e.target;

       if(targetElement.tagName.toLowerCase() != "input" && (!targetElement.type || targetElement.type.toLowerCase() != "checkbox"))
       {
          ischecked=true;
       }
       else
       {
          if(ischecked)
          {
              if(ctrlId==targetElement.id)
              {
              document.getElementById(targetElement.id).checked=false;
              ischecked=false;
              masterTable=grid.get_masterTableView();
              masterTable.clearSelectedItems();
              ctrlId=targetElement.id;
              }
              else
              {
              document.getElementById(targetElement.id).checked=true;
              ischecked=true;
              ctrlId=targetElement.id;
              }
          }
          else
          {
              masterTable=grid.get_masterTableView();
              document.getElementById(targetElement.id).checked=true;
              ischecked=true;
              ctrlId=targetElement.id;
          }
      }
   }
function GridCreated(sender)
{
    grid = sender;
}
</script>

Thanks,
Princy.

[Daniel]

Hello Timothy,

I created a sample page illustrating how to achieve the same functionality using another approach. Please find it attached to this ticket.

Kind regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.