Telerik radgrid and GridClientSelectColumn how to use “click” instead of “ctrl click”)

multi-selectteleriktelerik-grid

I have a telerik radgrid and have added a GridClientSelectColumn to allow users to select single or multiple rows however the default is ctrl click to select multiple.

I want the following functionality without having to override this with my own javascript.

User clicks row and checkbox is checked
User clicks on checked row and checkbox is unchecked
User clicks row and then another row. both checkboxes are checked.
User does not have to use "ctrl click"

Is there an easy way to do this?

Best Answer

I managed this with help from the telerik forum.

Forum post

Add the following code to the RadCodeBlock

var originalClickedRowState = null;
var clickedRow = null;

function rgGrid_OnRowClick(sender, args) {
    clickedRow = args.get_gridDataItem();
    originalClickedRowState = args.get_gridDataItem().get_selected();
}

function rgGrid_OnRowDeselecting(sender, args) {
    if (clickedRow != null && clickedRow != args.get_gridDataItem()) {
            args.set_cancel(true);
    }
}

function rgGrid_OnRowSelecting(sender, args) {
    if (clickedRow == args.get_gridDataItem() && originalClickedRowState) {
        args.set_cancel(true);
        originalClickedRowState = null;
        clickedRow = null;
    }
}

function rgGrid_OnRowSelected(sender, args) {
    originalClickedRowState = null;
    clickedRow = null;
}

A gotcha is that you need to wire up the OnRowCreating and OnRowCreated events in the grids ClientSettings.ClientEvents

function OnRowCreating(sender, args) {}
function OnRowCreated(sender, args) {}

Related Solutions

Telerik RadGrid not allowing to deselect row when there is only one row

Add a GridClientSelectColumn:

<telerik:GridClientSelectColumn UniqueName="SelectColumn">
    <HeaderStyle Width="27px" HorizontalAlign="Center" />
    <ItemStyle HorizontalAlign="Center" />
</telerik:GridClientSelectColumn>

The error you're receiving has nothing to do with master pages. It's because you're not referencing the RadGrid correctly in your JavaScript.

Instead of using OnRowSelected, try using OnRowClick and do something like this:

onRowClick = function(sender, args){
    var grid = $find("<%=grdVendors.UniqueID%>");
    if (grid){
        var item = grid.get_masterTableView().get_dataItems()[args.get_itemIndexHierarchical()];
        if (item.get_selected()){
            item.set_selected(false);
        }        
    }
}

I would suggest looking at the documentation and getting fimiliar with the client-side API. Telerik has one of the best support teams around, and their forum and knowledge base is excellent.

Here's a link to the client-side API reference:
http://www.telerik.com/help/aspnet-ajax/grid-getting-familiar-with-client-side-api.html

Here's some documentation on desecting rows client-side:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-deselectitem.html

C# – Add new record to Telerik RadGrid

Please try with the below code snippet.

ASPX

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowFilteringByColumn="true" AllowPaging="true" OnItemCommand="RadGrid1_ItemCommand">
    <PagerStyle AlwaysVisible="true" />
    <MasterTableView DataKeyNames="UniqueID" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:Button ID="Button1" runat="server" Text="Save All" OnClick="Button1_Click" />

ASPX.CS

public partial class aaaa : System.Web.UI.Page
{

    public List<Employee> lstEmployee
    {
        get
        {
            if (Session["lstEmployee"] != null)
            {
                return (List<Employee>)Session["lstEmployee"];
            }
            else
            {
                return new List<Employee>();
            }
        }
        set
        {
            Session["lstEmployee"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<Employee> list = new List<Employee>();

            Employee obj = new Employee();
            obj.ID = 1;
            obj.Name = "Name1";
            obj.UniqueID = Guid.NewGuid();
            list.Add(obj);

            obj = new Employee();
            obj.ID = 2;
            obj.Name = "Name2";
            obj.UniqueID = Guid.NewGuid();
            list.Add(obj);

            lstEmployee = list;
        }
    }

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = lstEmployee;
    }

    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.InitInsertCommandName)
        {
            saveAllData();
            lstEmployee.Insert(0, new Employee() { UniqueID = Guid.NewGuid() });
            e.Canceled = true;
            RadGrid1.Rebind();
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        saveAllData();
    }

    protected void saveAllData()
    {
        //Update Session
        foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
        {
            Guid UniqueID = new Guid(item.GetDataKeyValue("UniqueID").ToString());
            Employee emp = lstEmployee.Where(i => i.UniqueID == UniqueID).First();
            emp.Name = (item.FindControl("TextBox1") as TextBox).Text;
        }
    }

}

public class Employee
{
    public Guid UniqueID { get; set; }
    public int ID { get; set; }
    public string Name { get; set; }
    public bool IsActive { get; set; }
    public int weeknumber { get; set; }
}

Best Answer

Related Solutions

Telerik RadGrid not allowing to deselect row when there is only one row

C# – Add new record to Telerik RadGrid

Related Topic