Insert/Update/Delete content items with RadGrid for ASP.NET AJAX

Sunday, December 06, 2009 by Ivan Dimitrov | Comments 4
In the following blog post I'm  going to show you how to create a custom control that uses one of the most powerful controls form Telerik.Web.UI suite - RadGrid for ASP.NET AJAX and its functionality to Insert/Update/Delete content items. The control will allow you to populate the RadGrid with items from different Generic Content providers and then manipulate the items from Sitefinity's front-end. First we need to create a template for our custom control. In this template I will put the following controls:

 

  • RadComboBox which I will use to switch the providers and rebind the RadGrid by setting the combobox' AutoPostBack property to true.
  • RadGrid for ASP.NET AJAX with several columns:
    • "Name" of the content item
    • "Content" of the items
    • "Edit"
    • "Delete"
  • RadAjaxManagerProxy and RadAjaxLoadingPanel

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="GridContentEditorTemplate.ascx.cs" Inherits="CustomControls_GridContentEditorTemplate" %> 
 
<script type="text/javascript"> 
 
    function RemoveItem(object, args) { 
        var combo = $find("<%= RadComboBox1.ClientID %>");         
        if (combo.findItemByText("Libraries") != null) { 
            combo.trackChanges(); 
            combo.get_items().remove(combo.findItemByText("Libraries")); 
            combo.commitChanges(); 
        } 
    } 
</script> 
 
<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server"> 
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
</telerik:RadAjaxManagerProxy> 
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" BackgroundPosition="Center"> 
      <asp:Image runat="server" ID="Image1" ImageUrl="~/Images/ajax-loader.gif" /> 
</telerik:RadAjaxLoadingPanel> 
 
<telerik:RadComboBox ID="RadComboBox1" OnClientLoad="RemoveItem" runat="server" Skin="Black" /> 
<telerik:RadGrid id="RadGrid1" runat="server" Skin="Black"  > 
   <MasterTableView  EditMode="InPlace" CommandItemDisplay="TopAndBottom" AutoGenerateColumns="False" DataKeyNames="ID" AllowAutomaticInserts="true"> 
    <EditFormSettings InsertCaption="Add new item" CaptionFormatString="Edit Item: {0}" CaptionDataField="ID" PopUpSettings-Modal="true" /> 
    <Columns> 
     <telerik:GridBoundColumn HeaderText="ContentName" UniqueName="Name"></telerik:GridBoundColumn> 
     <telerik:GridBoundColumn HeaderText="Content" DataField="Content" UniqueName="Content"></telerik:GridBoundColumn> 
     <telerik:GridEditCommandColumn HeaderText="Edit" UniqueName="EditCommandColumn"></telerik:GridEditCommandColumn> 
     <telerik:GridButtonColumn CommandName="Delete" Text="Delete" HeaderText="Delete" 
      UniqueName= "DeleteColumn" /> 
    </Columns> 
   </MasterTableView> 
</telerik:RadGrid> 

 

In this template I subscribed for the OnClientLoad event of RadComboBox control. This is because I need to remove one of the providers that are populated in the custom control on the server. I have to remove the Libraries provider, because it uses binary data.You can remove the provider from the list if you add a condition inside the "if" check in the GCProviders method, like:

 if (provider !=null && provider.Name != "Libraries")

The custom control:

Here I inherited from the SimpleControl class and overrode the LayoutTemplatePath. Here I set the path to my template which has RadGrid, RadComboBox, RadAjaxManagerProxy and RadAjaxLoadingPanel declarations. I created a new property for the provider name which gets the value from the RadComboBox SelectedItem.

public override string LayoutTemplatePath 
    { 
        get 
        { 
            return "~/CustomControls/GridContentEditorTemplate.ascx"; 
        } 
    } 
 
    public string ProviderName 
    { 
        get 
        { 
            return Combo.SelectedItem.Text; 
        } 
    } 
 

 

Inside InitializeControls I bound the RadCombobox and subscribed for RadGrid's events - PreRender, UpdateCommand, DeleteCommand, NeedDataSource, InsertCommand

 protected override void InitializeControls(System.Web.UI.Control controlContainer) 
    { 
            base.InitializeControls(controlContainer);              
            this.Combo.DataSource = GCProviders(); 
            this.Combo.AutoPostBack = true; 
            this.Combo.DataBind(); 
            Grid.PreRender += new EventHandler(Grid_PreRender); 
            Grid.UpdateCommand += new GridCommandEventHandler(Grid_UpdateCommand); 
            Grid.DeleteCommand += new GridCommandEventHandler(Grid_DeleteCommand); 
            Grid.NeedDataSource += new GridNeedDataSourceEventHandler(Grid_NeedDataSource); 
            Grid.InsertCommand += new GridCommandEventHandler(Grid_InsertCommand); 
            Grid.AllowMultiRowEdit = true; 
    } 

 

As some of the providers like GenericContent and Wiki have different metakeys for the  "Title", I had to dynamically change the GridBoundColumn value inside Grid's PreRender event handler and then rebind the grid.

void Grid_PreRender(object sender, EventArgs e) 
    { 
        foreach (GridColumn column in Grid.Columns) 
        { 
            if (column.UniqueName == "Name") 
            { 
                if (this.ProviderName == WikiProviderName || this.ProviderName == GenericContentProviderName) 
                { 
                    (column as GridBoundColumn).DataField = "Name"; 
                    break; 
                } 
 
                (column as GridBoundColumn).DataField = "Title"; 
            } 
             
        } 
        Grid.Rebind(); 
    } 

To check the provider I created a helper method, whose value I passed inside the Insert, Update, Delete event handlers.

    { 
        if ((providerName != GenericContentProviderName) && (providerName != WikiProviderName)) 
        { 
            return true; 
        } 
        else 
        { 
            return false; 
        } 
    } 

You can find the complete code below:

 

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using Telerik.Cms.Web.UI; 
using Telerik.Web.UI; 
using System.Collections; 
using Telerik.Cms.Engine; 
using Telerik.News; 
using System.Web.UI.WebControls; 
using Telerik.News.WebControls.Admin; 
 
/// <summary> 
/// Summary description for GridContentEditor 
/// </summary> 
public class GridContentEditor : SimpleControl 
{ 
    public GridContentEditor() 
    { 
 
    } 
    #region Properties 
 
    public override string LayoutTemplatePath 
    { 
        get 
        { 
            return "~/CustomControls/GridContentEditorTemplate.ascx"; 
        } 
    } 
 
    public string ProviderName 
    { 
        get 
        { 
            return Combo.SelectedItem.Text; 
        } 
    } 

    #endregion 

    #region Methods 
 
    protected override void InitializeControls(System.Web.UI.Control controlContainer) 
    { 
            base.InitializeControls(controlContainer);              
            this.Combo.DataSource = GCProviders(); 
            this.Combo.AutoPostBack = true; 
            this.Combo.DataBind(); 
            Grid.PreRender += new EventHandler(Grid_PreRender); 
            Grid.UpdateCommand += new GridCommandEventHandler(Grid_UpdateCommand); 
            Grid.DeleteCommand += new GridCommandEventHandler(Grid_DeleteCommand); 
            Grid.NeedDataSource += new GridNeedDataSourceEventHandler(Grid_NeedDataSource); 
            Grid.InsertCommand += new GridCommandEventHandler(Grid_InsertCommand); 
           
            Grid.AllowMultiRowEdit = true; 
    } 
 
    void Grid_PreRender(object sender, EventArgs e) 
    { 
        foreach (GridColumn column in Grid.Columns) 
        { 
            if (column.UniqueName == "Name") 
            { 
                if (this.ProviderName == WikiProviderName || this.ProviderName == GenericContentProviderName) 
                { 
                    (column as GridBoundColumn).DataField = "Name"; 
                    break; 
                } 
 
                (column as GridBoundColumn).DataField = "Title"; 
            } 
             
        } 
        Grid.Rebind(); 
    } 
 
    void Grid_InsertCommand(object source, GridCommandEventArgs e) 
    { 
        manager = new ContentManager(ProviderName); 
        GridEditableItem editedItem = e.Item as GridEditableItem; 
 
        Hashtable newValues = new Hashtable(); 
        e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem); 
        IContent insertContent = manager.CreateContent("text/html"); 
        if (CheckProvider(ProviderName)) 
        { 
            insertContent.SetMetaData("Title", newValues["Title"]); 
            insertContent.Content = newValues["Content"]; 
            manager.SaveContent(insertContent); 
        } 
        else 
        { 
            this.MetaData = "Name"; 
            insertContent.SetMetaData(MetaData, newValues[MetaData]); 
            insertContent.Content = newValues["Content"]; 
            manager.SaveContent(insertContent); 
        } 
        
        Grid.Rebind(); 
    } 
 
    void Grid_UpdateCommand(object source, GridCommandEventArgs e) 
    { 
        manager = new ContentManager(ProviderName); 
        GridEditableItem editedItem = e.Item as GridEditableItem; 
        Guid cntId = (Guid)editedItem.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["ID"]; 
 
        Hashtable newValues = new Hashtable(); 
        e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem); 
        IContent UpdatedContent = manager.GetContent(cntId); 
        if (CheckProvider(ProviderName)) 
        { 
            UpdatedContent.SetMetaData("Title", newValues["Title"]); 
            UpdatedContent.Content = newValues["Content"]; 
            manager.SaveContent(UpdatedContent); 
        } 
        else 
        { 
            this.MetaData = "Name"; 
            UpdatedContent.SetMetaData(MetaData, newValues[MetaData]); 
            UpdatedContent.Content = newValues["Content"]; 
            manager.SaveContent(UpdatedContent); 
        } 
    } 
 
 
    void Grid_DeleteCommand(object source, GridCommandEventArgs e) 
    { 
        manager = new ContentManager(ProviderName); 
        Guid deleteITemID = (Guid)e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["ID"]; 
        IContent newCnt = manager.GetContent(deleteITemID) as IContent; 
        manager.DeleteContent(newCnt.ID); 
    } 
 
    void Grid_NeedDataSource(object source, GridNeedDataSourceEventArgs e) 
    { 
        Grid.DataSource = GridDataSource(); 
    } 
 
    public IList GridDataSource() 
    { 
        manager = new ContentManager(ProviderName); 
        IList allItems = manager.GetContent(); 
        return allItems; 
    } 
 
    public IList GCProviders() 
    { 
 
        List<string> providers = new List<string>(ContentManager.Providers.Count); 
        foreach (ContentProviderBase provider in ContentManager.Providers.Values) 
        { 
            if (provider !=null) 
            { 
               providers.Add(provider.Name); 
            } 
 
        } 
        return providers.ToArray(); 
 
    } 
 
    private bool CheckProvider(string providerName) 
    { 
        if ((providerName != GenericContentProviderName) && (providerName != WikiProviderName)) 
        { 
            return true; 
        } 
        else 
        { 
            return false; 
        } 
    } 

    #endregion 

    #region Control references 
 
    public virtual RadGrid Grid 
    { 
        get 
        { 
            return base.Container.GetControl<RadGrid>("RadGrid1", true); 
        } 
    } 
 
 
    public virtual RadComboBox Combo 
    { 
        get 
        { 
            return base.Container.GetControl<RadComboBox>("RadComboBox1", true); 
        } 
    } 

    #endregion 


    #region Private constraints  
     
 
    private ContentManager manager; 
    private string GenericContentProviderName = "Generic_Content"; 
    private string WikiProviderName = "Wiki"; 
    private string MetaData; 

    #endregion 
 
 
} 
 

 

Read more articles from Ivan Dimitrov - OR - See the latest posts in Sitefinity blogs