tag selected grid items in client

[rik butcher]

this multiselect works great however - many complaints about the "flashing" or "postbacks" each time a row is "selected" or tagged.
is there a way to do this on the client-side without the "Postback" each time?
thanks again
rik

 

 

<telerik:RadGrid ID="ReleaseableItemsRadGrid" runat="server" AllowPaging="true" AllowSorting="false"

 

 

 

OnNeedDataSource="ReleaseableItemsRadGrid_NeedDataSource" EnableLinqExpressions="false"

 

 

 

Width="2100px" AutoGenerateColumns="false" Skin="WebBlue" AllowFilteringByColumn="false" AllowMultiRowSelection="true"

 

 

 

OnItemDataBound="ReleaseableItemsRadGrid_ItemDataBound" AllowCustomPaging="false" OnItemCreated="ReleaseableItemsRadGrid_Created"

 

 

 

PageSize="15">

 

 

 

<Columns>

 

 

 

<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="20px" UniqueName="SelectionCheckBoxCell"

 

 

 

ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20px" ItemStyle-Wrap="false"

 

 

 

ItemStyle-VerticalAlign="Middle">

 

 

 

<ItemTemplate>

 

 

 

<asp:CheckBox ID="RowSelectionCheckBox" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxRowSelection" />

 

 

 

</ItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="40px" UniqueName="QtyInColumn"

 

 

 

ItemStyle-HorizontalAlign="Left" ItemStyle-Width="40px" HeaderText="Qty Rel">

 

 

 

<ItemTemplate>

 

 

 

<telerik:RadTextBox ID="QuantityInGridTextBox" runat="server" Width="30px" CssClass="textbox"

 

 

 

Skin="WebBlue" AutoPostBack="true" OnTextChanged="Ck_Qty" />

 

 

 

</ItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

</

 

 

Columns>

 

 

 

protected void ReleaseableItemsRadGrid_Created(object sender, GridItemEventArgs e)

 

{

 

 

if (e.Item is GridDataItem)

 

{

e.Item.PreRender +=

 

new EventHandler(ReleaseableItemsRadGrid_ItemPreRender);

 

}

}

 

 

private void ReleaseableItemsRadGrid_ItemPreRender(object sender, EventArgs e)

 

{

((sender

 

as GridDataItem)["SelectionCheckBoxCell"].FindControl("RowSelectionCheckBox") as CheckBox).Checked = (sender as GridDataItem).Selected;

 

}

[Princy]

Hi ,

I guess you want a client side event when check box checked.Please try the following code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server"  AllowMultiRowSelection="true"    OnItemCreated="RadGrid1_ItemCreated">
    <MasterTableView>
        <Columns>
           . . . . . . . .
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem data = (GridDataItem)e.Item;
        CheckBox chk = (CheckBox)data.FindControl("CheckBox1");
        chk.Attributes.Add("onclick", "CheckAll('"+data.ItemIndex+"','"+chk.ClientID+"')");
    }
}

JS:

function CheckAll(rowid, cid)
{
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    var row = masterTable.get_dataItems();
    var checkbox = document.getElementById(cid);
    if (checkbox.checked == true)
        {
        masterTable.get_dataItems()[rowid].findElement("CheckBox1").checked = true;
        masterTable.get_dataItems()[rowid].set_selected(true);
    }
    else
    {
        masterTable.get_dataItems()[rowid].findElement("CheckBox1").checked = false;
        masterTable.get_dataItems()[rowid].set_selected(false);
    }
}
</script>

Thanks,
Princy