ClientSideSelectColumn - Disallow other selection

Thread is closed for posting
4 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 17 Jan 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version
    4.5.x and later


    2008.1.415 and later
    .NET version 2.0 and later
    Visual Studio version 2005 and later
    Programming language JavaScript
    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX

    To convert code from posted projects Telerik online converter


    PROJECT DESCRIPTION

    This project demonstrates how to select grid rows only when a check box (part of GridClientSelectColumn) is clicked. The main function is attached to the grid's OnRowSelecting and OnRowDeselecting client events and returns false if the clicked element is not check box. The project works as expected in all browsers supported by telerik by means of attaching an event listener to the click event.

    The essential part of the logic is posted below:

    <script type="text/javascript">  
                var currentClickEvent = null
     
                function GridCreated() 
                { 
                    var grid = this
                     
                    //non-ie click event capture 
                    //the event handler will get fired *before* the row click event  
                    //and we use that to cache the current event object 
                    if (grid.Control.addEventListener) 
                        grid.Control.addEventListener("click", GridTableClick, true); 
                } 
     
                function GridTableClick(e) 
                { 
                    currentClickEvent = e; 
                } 
                 
                //IE has a global event object. We get the previously cached event object for other browsers 
                function GetClickEvent() 
                { 
                    return window.event || currentClickEvent; 
                } 
                 
                //cancel all select/deselect operation triggered by non-checkbox row clicks 
                function CancelNonInputSelect(row)  
                {  
                    var e = GetClickEvent(); 
                    //IE - srcElement, Others - target 
                    var targetElement = e.srcElement || e.target; 
     
                    //is the clicked element a checkbox? <input type="checkbox"...> 
                    if(targetElement.tagName.toLowerCase() != "input" && 
                        targetElement.type.toLowerCase() != "checkbox"
                    { 
                        //cancel the event 
                        return false
                    } 
                     
                    //clean up after all (de)selections are performed 
                    window.setTimeout(function() { 
                        currentClickEvent = null
                       }, 0); 
                }  
              </script> 

    Working project is attached to this thread as well.
  2. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 18 Feb 2008 Link to this post

    Hello,

    The project is migrated to Telerik.Web.UI and SqlDataSource. The code is simplified:

            <script type="text/javascript">    
                    function CancelNonInputSelect(sender, args)  
                    {  
                            
                           var e = args.get_domEvent();  
                            //IE - srcElement, Others - target  
                            var targetElement = e.srcElement || e.target;  
                              
                              
                            //this condition is needed if multi row selection is enabled for the grid  
                            if (typeof(targetElement)!="undefined")  
                            {  
                                    //is the clicked element an input checkbox? <input type="checkbox"...>  
                                    if(targetElement.tagName.toLowerCase() != "input" &&   
                                        (!targetElement.type || targetElement.type.toLowerCase() != "checkbox"))// && currentClickEvent)  
                                    {                      
                                      
                                        //cancel the event  
                                        args.set_cancel(true);  
                                    }  
                            }  
                            else 
                                args.set_cancel(true);  
                    }  
            </script> 
  3. 3D1F9A60-3105-4527-9BDA-5E2173E4CCB4
    3D1F9A60-3105-4527-9BDA-5E2173E4CCB4 avatar
    6 posts
    Member since:
    Feb 2008

    Posted 21 Mar 2008 Link to this post

    Thanks,

    That was just the information that I was looking for.

    Alan
  4. 35FC6F20-EEB5-48C4-B91B-06C770662FC5
    35FC6F20-EEB5-48C4-B91B-06C770662FC5 avatar
    3388 posts
    Member since:
    Apr 2016

    Posted 31 Jan 2011 Link to this post

    Hi,

    Since Q3 2009 SP1 (version 2009.3.1208) this functionality is built-in for RadGrid for ASP.NET AJAX. You can set the UseClientSelectColumnOnly property in the ClientSettings-Selecting section to true to achieve it. 

    All the best,
    Iana
    the Telerik team

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

This Code Library is part of the product documentation and subject to the respective product license agreement.