This is a migrated thread and some comments may be shown as answers.

Delete selected row(s) from RadToolBar Ajaxified

1 Answer 102 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mattias Moberg asked on 12 Oct 2011, 08:23 PM

Hi.
I´m facing scenario that i do not understand, and can not solve.

In RadToolBar1 I´ve added:
<telerik:RadToolBarButton Text="Delete" CommandName="DeletePost" PostBack="false" ImageUrl="Themes/Default/Icons/Telerik/Delete.png"></telerik:RadToolBarButton>

In RadGrid1 I´ve added:
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" CommandName="SelectPost" HeaderStyle-Width="40px" />

When client press button in RadToolBar1 with CommandName="DeletePost" , I want to run my server-side code that will delete selected row(s) from db. Ajaxified.

Markup:

<%@ Page Title="" Language="C#" MasterPageFile="App_master/MasterPage.master" AutoEventWireup="true"

CodeFile="Posts.aspx.cs" Inherits="ccc_Posts" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

<telerik:AjaxUpdatedControl ControlID="RadToolBar1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadToolBar1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">

</telerik:RadAjaxLoadingPanel>

<telerik:RadTreeView runat="Server" ID="RadTreeView1" EnableViewState="False" Style="margin-top: 4px;

margin-left: 4px;">

</telerik:RadTreeView>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

var toolbar;

var grid;

function pageLoad() {

grid = $find("<%=RadGrid1.ClientID %>");

toolbar = $find("<%= RadToolBar1.ClientID %>");

if (grid.get_masterTableView().get_selectedItems().length == 0)

toolbar.findButtonByCommandName("DeletePost").disable();

}

function onGridRowSelected(sender, args) {

toolbar.findButtonByCommandName("DeletePost").enable();

}

// Open window

function OpenWindow(url) {

radopen(url, "NewPost");

}

function OnClientButtonClickingHandler(sender, eventArgs) {

if (eventArgs.get_item().get_value() == "NewPost") {

OpenWindow('NewPost.aspx');

}

</script>

</telerik:RadScriptBlock>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="true" Width="1024px"

OnClientClose="closeRadWindow" Behaviors="Close, Reload, Resize, Move, Maximize"

Height="710px" ViewStateMode="Disabled" ShowContentDuringLoad="false" VisibleStatusbar="false">

</telerik:RadWindowManager>

<telerik:RadSplitter runat="server" ID="RadSplitter1" Width="100%" BorderSize="0"

BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">

<telerik:RadPane runat="server" ID="RadPane1" Height="30px" EnableViewState="false"

Scrollable="false">

<telerik:RadToolBar runat="server" ID="RadToolBar1" EnableViewState="false" CssClass="inbox-search-toolbar"

OnClientButtonClicking="OnClientButtonClickingHandler" OnButtonClick="RadToolBar1_ButtonClick">

<Items>

<telerik:RadToolBarButton Text="New Post" Value="NewPost" PostBack="false" ImageUrl="Themes/Default/Icons/Telerik/Add.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton IsSeparator="true" />

<telerik:RadToolBarButton Text="Delete" CommandName="DeletePost" PostBack="false" ImageUrl="Themes/Default/Icons/Telerik/Delete.png">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton IsSeparator="true" />

<telerik:RadToolBarButton Value="searchTextBoxButton">

<ItemTemplate>

<telerik:RadTextBox runat="server" ID="blogToolBarSearchTb" EmptyMessage="Search Posts"

CssClass="inbox-search-textbox" Width="300px" />

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton ImageUrl="Themes/Default/Icons/16x16/search.png" Value="search" />

</Items>

</telerik:RadToolBar>

</telerik:RadPane>

<telerik:RadPane runat="server" ID="RadPane2">

<telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false" GridLines="None"

AllowMultiRowSelection="true" Height="100%" BorderWidth="0px" AllowSorting="True"

Style="outline: none" ShowGroupPanel="True">

<ClientSettings Scrolling-AllowScroll="True" Scrolling-UseStaticHeaders="true" Selecting-AllowRowSelect="true"

EnablePostBackOnRowClick="false" AllowDragToGroup="true" EnableRowHoverStyle="true"

ClientEvents-OnRowSelected="onGridRowSelected">

</ClientSettings>

<MasterTableView TableLayout="Fixed" GroupLoadMode="Client" Width="100%">

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" CommandName="SelectPost"

HeaderStyle-Width="40px" />

<telerik:GridTemplateColumn HeaderText="Title" UniqueName="BlogTitle" Groupable="false"

HeaderStyle-Width="100%">

<ItemTemplate>

<a href="#"><b>

<%# Eval("Title")%></b></a>

<div style="margin: 4px 0px;">

<asp:ImageButton ID="statusBtn" runat="server" ImageUrl="~/Themes/Default/Icons/16x16/finished-work2.png"

Style="vertical-align: middle;" />

<span style="vertical-align: middle; margin-left: 2px;">Status:</span>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Action" UniqueName="BlogAction" HeaderStyle-Width="110px"

Groupable="false">

<ItemTemplate>

<div style="margin: 4px 0px;">

<asp:ImageButton ID="actionBtn" runat="server" ImageUrl="~/Themes/Default/Icons/16x16/edit.png"

Style="vertical-align: middle;" />

<span style="vertical-align: middle; margin-left: 2px;"><a href="javascript:OpenWindow('NewPost.aspx?id=<%# Eval("BlogPostId")%>')">

Edit</a></span>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Comments" UniqueName="BlogComments" HeaderStyle-Width="85px"

Groupable="false">

<ItemTemplate>

<div style="margin: 4px 0px;">

<span style="vertical-align: middle; margin-left: 2px;">(num)</span>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="User" UniqueName="BlogUserName" HeaderStyle-Width="170px"

GroupByExpression="Username Group by Username">

<ItemTemplate>

<div style="margin: 4px 0px;">

<span style="vertical-align: middle; margin-left: 2px;">

<%# Eval("Username")%></span>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Blog Date" UniqueName="BlogDate" HeaderStyle-Width="150px"

GroupByExpression="BlogDate Group by BlogDate">

<ItemTemplate>

<div style="margin: 4px 0px;">

<span style="vertical-align: middle; margin-left: 2px;">

<%# Eval("BlogDate")%></span>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

function closeRadWindow() {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest();

}

</script>

</asp:Content>

Code:

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using CSSUtilityLib;

using CSSUtilityLib.Configuration;

using CSSUtilityLib.Cookie;

using CSSUtilityLib.DataAccess;

using CSSUtilityLib.Email;

using CSSUtilityLib.Process;

using CSSUtilityLib.Security;

using CSSUtilityLib.Transfer;

using CSSUtilityLib.Validation;

using System.Data;

using System.Data.SqlClient;

using Telerik.Web.UI;

public partial class ccc_Posts : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

// code layer for testing purpose

string connStr = ConfigManager.GetConnStr("CSSBlogDB");

DataSet ds0 = SqlServerDataAccessHelper.ExecuteDataSet(connStr, CommandType.StoredProcedure, "SelectAllBlogPost");

RadGrid1.DataSource = ds0;

RadGrid1.DataBind();

}

protected void RadToolBar1_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e)

{

string sCommand = e.Item.Text;

switch (sCommand)

{

case "Delete":

// Code here..

break;

}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

RadGrid1.Rebind();

}

1 Answer, 1 is accepted

answered on 17 Oct 2011, 04:03 AM

Hello Mattias,

In order to achieve your goal, I suggest that you first revise the grid binding. Using simple data-binding as in your case will reset the selected grid items on each postback. You would better implement the advanced data-binding. From then on, to achieve your goal, you can handle the selected items deletion by looping through the grid SelectedItems/SelectedIndexes.

Find more information in the below resources:
http://www.telerik.com/help/aspnet-ajax/grid-simple-data-binding.html
http://www.telerik.com/help/aspnet-ajax/grid-advanced-data-binding.html
http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html
http://www.telerik.com/help/aspnet-ajax/grid-using-getitems-getcolumn-methods.html
http://www.telerik.com/help/aspnet-ajax/grid-retrieve-primary-key-field-values-for-items.html
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/commanditem/defaultcs.aspx

Give it a try and let me know how it goes.

Greetings,
Iana Tsolova
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now