RadGrid client side toggle selection with server side persisting of the selected items after Sorting, Filtering and Paging

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

    Posted 09 Aug 2010 Link to this post

    Requirements

    RadControls for ASP .NET AJAX version

     

    Q2 2010 and later
    .NET version

     

    3.5 and later
    Visual Studio version

     

    2008 and later
    Programming language

     

    C#
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX


    PROJECT DESCRIPTION
    The attached sample project demonstrates toggle selection of the RadGrid's rows. The example contains a GridTemplateColumn, with checkbox added into its ItemTemplate, instead of GridClientSelectColumn.



    When the RadGrid row is clicked the javascript function changed its background and check the checkbox from the template column. If all rows are selected the header checkbox is checked too:
    <ClientSettings>
      <ClientEvents OnRowClick="onRowClick" />
    </ClientSettings>
    function removeCssClass(className, element)
    {
         element.className = element.className.replace(className, "").replace(/^\s+/, '').replace(/\s+$/, '');
    }
     
    function onRowClick(sender, eventArgs)
    {
        var radGrid = sender;
        var index = eventArgs.get_itemIndexHierarchical();
        var dataItem = radGrid.get_masterTableView().get_dataItems()[index];
        var row = dataItem.get_element();
        var checkBox = row.children[0].children[0];
        if (!checkBox.checked)
        {
            checkBox.checked = true;
            row.className = row.className + " rgSelectedRow";
        }
        else
        {
            checkBox.checked = false;
            removeCssClass("rgSelectedRow", row);
        }
     
        CheckHeaderCheckBoxIfNeeded(radGrid);
    }
     
    function CheckHeaderCheckBoxIfNeeded(radGrid)
    {
        var checkHeaderCheckBox = true;
        var dataItems = radGrid.get_masterTableView().get_dataItems();
        for (var i = 0; i < dataItems.length; i++)
        {
            var dataItem = dataItems[i];
            var row = dataItem.get_element();
            var ckeckBox = row.children[0].children[0];
            if (!ckeckBox.checked)
            {
                checkHeaderCheckBox = false;
            }
        }
     
        SelectCheckBox(checkHeaderCheckBox);
    }

    All selected items are saved into server side Dictionary object kept into the Session:
    public Dictionary<string, bool> SelectedItems
    {
       get
       {
           if (Session["SelectedItems"] == null)
           {
              Session["SelectedItems"] = new Dictionary<string, bool>();
           }
     
           return Session["SelectedItems"] as Dictionary<string, bool>;
       }
       set
       {
           Session["SelectedItems"] = value;
       }
    }

    When the RadGrid fire some command the SelectedItems dictionary is updated:
    void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
       SaveSelectedItems();
    }
    private void SaveSelectedItems()
    {
       foreach (GridItem item in RadGrid1.Items)
       {
           if (item is GridDataItem)
           {
               GridDataItem dataItem = item as GridDataItem;
               if ((dataItem["template"].FindControl("CheckBox1") as CheckBox).Checked)
               {
                   if (!SelectedItems.ContainsKey(dataItem["ID"].Text))
                   {
                        SelectedItems.Add(dataItem["ID"].Text, true);
                   }
               }
               else
               {
                   if (SelectedItems.ContainsKey(dataItem["ID"].Text))
                   {
                        SelectedItems.Remove(dataItem["ID"].Text);
                   }
               }
           }
        }
    }

    When the RadGrid.ItemDataBound event handler is fired, for the current item, the logic checks if its ID field is contained into SelectedItems. If needed the item's check box is checked and the javascipt function is attached to the checkBox's onclick event:
    void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
       if (e.Item is GridDataItem)
       {
           GridDataItem item = e.Item as GridDataItem;
           CheckBox checkBox = item["template"].FindControl("CheckBox1") as CheckBox;
           string id = item["ID"].Text;
           if (SelectedItems.ContainsKey(id))
           {
              checkBox.Checked = Convert.ToBoolean(SelectedItems[id].ToString());
           }
           string script = "CheckBoxCheckedOnClient('" + item.ClientID + "', '" + checkBox.ClientID + "')";
           checkBox.Attributes.Add("onclick", script);
        }
    }

    This logic guarantees that all selected items will be persisted after filtering, paging and sorting.
Back to Top

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