Webmail CRUD Automatic Using LINQDataSource

[irwan]

Hai,

I did some changes to the webmail sample ( http://demos.telerik.com/aspnet-ajax/webmail/ ) in order to perform the function of Create, Update and Delete. The following is the code on default.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="Inbox" Title="Telerik Web Mail Demo - Inbox" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DetailsView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolBar1" />
                    <telerik:AjaxUpdatedControl ControlID="DetailsView1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="DetailsView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadTreeView runat="Server" ID="RadTreeView1" OnNodeClick="RadTreeView1_NodeClick"
        EnableViewState="false">
        <Nodes>
            <telerik:RadTreeNode Text="John Smith" Expanded="true" ImageUrl="Images/mailbox.gif"
                PostBack="false">
                <Nodes>
                    <telerik:RadTreeNode Text="Calendar" ImageUrl="Images/calendar.gif" NavigateUrl="Calendar.aspx" />
                    <telerik:RadTreeNode Text="Contacts" ImageUrl="Images/contacts.gif" NavigateUrl="Contacts.aspx" />
                    <telerik:RadTreeNode Text="Inbox" ImageUrl="Images/inbox.gif" Expanded="true" Selected="True">
                        <Nodes>
                            <telerik:RadTreeNode Text="AJAX" ImageUrl="Images/inbox.gif" />
                            <telerik:RadTreeNode Text="Announcements" ImageUrl="Images/inbox.gif" />
                            <telerik:RadTreeNode Text="OpenAccess ORM" ImageUrl="Images/inbox.gif" />
                            <telerik:RadTreeNode Text="Silverlight" ImageUrl="Images/inbox.gif" />
                            <telerik:RadTreeNode Text="WinForms" ImageUrl="Images/inbox.gif" />
                            <telerik:RadTreeNode Text="WPF" ImageUrl="Images/inbox.gif" />
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Notes" ImageUrl="Images/notes.gif" NavigateUrl="Notes.aspx" />
                </Nodes>
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

        <script type="text/javascript">
            /* <![CDATA[ */
            var toolbar;
            var grid;
            var searchButton;
            var ajaxManager;

            function pageLoad() {
                grid = $find("<%=RadGrid1.ClientID %>");
                toolbar = $find("<%= RadToolBar1.ClientID %>");
                ajaxManager = $find("<%=RadAjaxManager1.ClientID %>");

                if (grid.get_masterTableView().get_selectedItems().length == 0)
                    toolbar.findButtonByCommandName("reply").disable();

                searchButton = toolbar.findButtonByCommandName("doSearch");

                $telerik.$(".inbox-search-textbox")
                            .bind("keypress", function(e) {
                                searchButton.set_imageUrl("images/search.gif");
                                searchButton.set_value("search");
                            });
            }

            function onKeyPress(sender, args) {
                if (args.get_keyCode() == 13) {
                    args.get_domEvent().stopPropagation();
                    args.get_domEvent().preventDefault();
                    performSearch(sender);
                    return;
                }
            }

            function onButtonClicked(sender, args) {
                var commandName = args.get_item().get_commandName();
                if (commandName == "doSearch") {
                    var searchTextBox = sender.findButtonByCommandName("searchText").findControl("RadTextBox1");
                    if (searchButton.get_value() == "clear") {
                        searchTextBox.set_value("");
                        searchButton.set_imageUrl("images/search.gif");
                        searchButton.set_value("search");
                    }

                    performSearch(searchTextBox);
                } else if (commandName == "reply") {
                    window.radopen(null, "Edit");
                }
            }

            function performSearch(searchTextBox) {
                if (searchTextBox.get_value()) {
                    searchButton.set_imageUrl("images/clear.gif");
                    searchButton.set_value("clear");
                }

                ajaxManager.ajaxRequest(searchTextBox.get_value());
            }

            function onGridRowSelected(sender, args) {
                toolbar.findButtonByCommandName("reply").enable();
            }

            function onWindowLoad(sender, args) {

                var html = "<br /><br /><br /><hr />" +
                            "<strong>From:</strong> " + $get("from").innerHTML + "<br />" +
                            "<strong>Sent:</strong> " + $get("sent").innerHTML + "<br />" +
                            "<strong>Subject:</strong> " + $get("subject").innerHTML + "<br />" +

                            $get("message-body").innerHTML;

                sender.get_contentFrame().contentWindow.setEditorContent(html);
            }
            /* ]]> */
        </script>

    </telerik:RadScriptBlock>
    <telerik:RadWindowManager runat="Server" ID="RadWindowManager1" EnableViewState="false">
        <Windows>
            <telerik:RadWindow runat="server" ID="Edit" NavigateUrl="~/Reply.aspx" OnClientPageLoad="onWindowLoad"
                Width="870px" Height="550px" ReloadOnShow="true"
                ShowContentDuringLoad="false" Modal="True" Behaviors="Close,Move" VisibleStatusbar="false">
            </telerik:RadWindow>
        </Windows>
    </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="32px" EnableViewState="false" Scrollable="false">
            <telerik:RadToolBar runat="server" ID="RadToolBar1" CssClass="inbox-search-toolbar"
                OnClientButtonClicked="onButtonClicked" EnableViewState="false">
                <Items>
                    <telerik:RadToolBarButton ImageUrl="~/Images/print.gif" Enabled="false" />
                    <telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" />
                    <telerik:RadToolBarButton ImageUrl="~/Images/delete_inbox.gif" Enabled="false" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton Text="Reply" ImageUrl="~/Images/reply.gif" CommandName="reply" />
                    <telerik:RadToolBarButton Value="searchTextBoxButton" CommandName="searchText">
                        <ItemTemplate>
                            <telerik:RadTextBox
                                runat="server" ID="RadTextBox1"
                                EmptyMessage="Search Inbox"
                                CssClass="inbox-search-textbox" Width="300px"
                                ClientEvents-OnKeyPress="onKeyPress" />
                        </ItemTemplate>
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="~/Images/search.gif" Value="search" CommandName="doSearch" />
                </Items>
            </telerik:RadToolBar>
        </telerik:RadPane>
        <telerik:RadPane runat="server" ID="RadPane2">
            <telerik:RadGrid Skin="Vista" AutoGenerateDeleteColumn="True"
                AutoGenerateEditColumn="True" ShowGroupPanel="True"
                runat="server" DataSourceID="LinqDataSource1" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
                AllowAutomaticUpdates="True" AllowPaging="True" PageSize="8" AllowSorting="True"
                AllowFilteringByColumn="True" ID="RadGrid1" CellSpacing="0"
                GridLines="None">
                <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="False">
                    <%--<GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldName="ParentId" />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="ParentId" />
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>--%>
                    <CommandItemSettings ExportToPdfText="Export to PDF" />
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"
                        Visible="True">
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"
                        Visible="True">
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="CustomerID"
                            FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID"
                            SortExpression="CustomerID" UniqueName="CustomerID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName"
                            FilterControlAltText="Filter CompanyName column" HeaderText="CompanyName"
                            SortExpression="CompanyName" UniqueName="CompanyName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactName"
                            FilterControlAltText="Filter ContactName column" HeaderText="ContactName"
                            SortExpression="ContactName" UniqueName="ContactName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactTitle"
                            FilterControlAltText="Filter ContactTitle column" HeaderText="ContactTitle"
                            SortExpression="ContactTitle" UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Address"
                            FilterControlAltText="Filter Address column" HeaderText="Address"
                            SortExpression="Address" UniqueName="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="City"
                            FilterControlAltText="Filter City column" HeaderText="City"
                            SortExpression="City" UniqueName="City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Region"
                            FilterControlAltText="Filter Region column" HeaderText="Region"
                            SortExpression="Region" UniqueName="Region">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="PostalCode"
                            FilterControlAltText="Filter PostalCode column" HeaderText="PostalCode"
                            SortExpression="PostalCode" UniqueName="PostalCode">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Country"
                            FilterControlAltText="Filter Country column" HeaderText="Country"
                            SortExpression="Country" UniqueName="Country">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Phone"
                            FilterControlAltText="Filter Phone column" HeaderText="Phone"
                            SortExpression="Phone" UniqueName="Phone">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Fax"
                            FilterControlAltText="Filter Fax column" HeaderText="Fax" SortExpression="Fax"
                            UniqueName="Fax">
                        </telerik:GridBoundColumn>
                        <telerik:GridCheckBoxColumn DataField="Bool" DataType="System.Boolean"
                            FilterControlAltText="Filter Bool column" HeaderText="Bool"
                            SortExpression="Bool" UniqueName="Bool">
                        </telerik:GridCheckBoxColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                    <PagerStyle PageSizeControlType="RadComboBox" />
                </MasterTableView>
                <ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true">
                </ClientSettings>
                <PagerStyle PageSizeControlType="RadComboBox" />
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
            </telerik:RadGrid>
            <asp:LinqDataSource runat="server" ID="LinqDataSource1" ContextTypeName="HelpDeskDataContext"
                TableName="Customers"  EnableInsert="True" EnableUpdate="true" EnableDelete="true" OrderBy="CustomerID">
            </asp:LinqDataSource>
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

and the following code in Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Data.SqlClient;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class Inbox : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadGrid1.Rebind();
            //SelectFirstGridRow();
        }
    }

    //private void SelectFirstGridRow()
    //{
    //    GridDataItem firstDataItem = RadGrid1.Items.OfType<GridDataItem>().FirstOrDefault();
    //    if (firstDataItem != null)
    //        firstDataItem.Selected = true;
    //}

    protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
    {
        RadGrid1.Rebind();
        //SelectFirstGridRow();
        RadTextBox searchTextBox =
            (RadTextBox)((RadToolBarButton) RadToolBar1.FindButtonByCommandName("searchText")).FindControl("RadTextBox1");
        searchTextBox.Text = string.Empty;
    }

    //private string searchString;

    //protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    //{
    //    searchString = e.Argument.ToLower();
    //    RadGrid1.Rebind();
    //}

    //protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e)
    //{


    //}
}

I took customers table from  helpdesk.mdf database and successfully displayed when running its program. When i click add new record,all of the fields in the customer table appears but when I clicked insert nothing happens and data can not be inserted into the database. A similar thing happens when i click edit and also delete no data is erased. could you help me to resolve my problem?

Regards
Irwan

[Marin]

Hi,

 The grid looks properly configured. You can check whether the CRUD methods of the LinqDataSource are fired when an Update/Insert operation in the control is performed. Additionally you can also try manually defining the GridEditCommandColumn in the markup. Normally setting AllowAutomaticUpdates, AllowAutomaticInserts to true and enabling the respective operations in the datasource should be sufficient to perform CRUD operations without any problems.
More information sample configuration can be found in the following help topic and demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/automatic-crud-operations/defaultcs.aspx
http://www.telerik.com/help/aspnet-ajax/grid-automatic-datasource-operations.html

Regards,
Marin
Telerik

[irwan]

Hello Marin,

I've tried the link you gave to me but it did not worked. LinqDataSource did not fired when an Update/Insert operation in the control is performed. Is there any idea ?

Best Regards
Irwan

[irwan]

Hai,

I would like to use automatic CRUD LinqDataSource in webmail sample ( http://demos.telerik.com/aspnet-ajax/webmail/ ) using Visual Studio 2010 & RadControls for ASP.NET AJAX Q2 2013. Is there anyone has successfully tried before ?

Thank You

Regards,

Irwan

[Marin]

Hi,

 Make sure you are not rebinding the control (calling Rebind in the code-behind) before the update / insert operation is executed because this can cause the grid to lose its current state without persisting the data.

Regards,
Marin
Telerik