Insert,Upadate and delete in Telerik RadGrid

Insert,Upadate and delete in Telerik  RadGrid


Step 1:Database design

Table Creation.
CREATE TABLE [dbo].[GridView](
      [id] [int] IDENTITY(1,1) NOT NULL,
      [name] [varchar](50) NULL,
      [age] [int] NULL,
      [salary] [decimal](18, 0) NULL,
      [country] [varchar](50) NULL,
      [city] [varchar](50) NULL,
 CONSTRAINT [PK_GridView] PRIMARY KEY CLUSTERED
(
      [id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF,ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

Step 2: Design web form .aspx page

    <div>
            <asp:ScriptManager ID="sx" runat="server"></asp:ScriptManager>
            <asp:Label ID="Label1" runat="server" EnableViewState="False" Visible="false"></asp:Label>
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowAutomaticDeletes="True"
                Width="800px" AllowSorting="true" AllowAutomaticUpdates="true"
                AllowAutomaticInserts="true" OnItemInserted="RadGrid1_ItemInserted"
                OnItemUpdated="RadGrid1_ItemUpdated"  OnDeleteCommand="RadGrid1_DeleteCommand">
                <MasterTableView DataKeyNames="ID" CommandItemDisplay="Top" Width="100%">
                    <Columns>

                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">
                        </telerik:GridEditCommandColumn>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" ReadOnly="true" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" FilterControlWidth="80%" EditFormColumnIndex="1">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Age" HeaderText="Age" Visible="false" FilterControlWidth="80%" EditFormColumnIndex="2">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Salary" HeaderText="Salary" FilterControlWidth="80%" EditFormColumnIndex="2">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Country" Visible="false" HeaderText="Country" FilterControlWidth="80%" EditFormColumnIndex="2">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="city" HeaderText="city" FilterControlWidth="80%" EditFormColumnIndex="2">
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" ButtonType="ImageButton" ConfirmText="r u SURE" ConfirmTitle="SURE"></telerik:GridButtonColumn>
                    </Columns>
                    <EditFormSettings ColumnNumber="3" CaptionFormatString="Edit details for employee with ID {0}"
                        CaptionDataField="Id">
                        <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                        <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                        <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" Width="100%"></FormMainTableStyle>
                        <FormTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="2" CssClass="module"
                            Height="110px" Width="100%"></FormTableStyle>
                        <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                        <FormStyle Width="100%" BackColor="#eef2ea"></FormStyle>
                        <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                        </EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Left" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                    </EditFormSettings>
                    <ExpandCollapseColumn ButtonType="ImageButton" Visible="False" UniqueName="ExpandColumn">
                        <HeaderStyle Width="19px"></HeaderStyle>
                    </ExpandCollapseColumn>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>
                </ClientSettings>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" DataSourceMode="DataSet" ConnectionString="<%$ ConnectionStrings:kandy %>" DeleteCommand="DELETE FROM  [GridView] WHERE [ID] = @ID"
                SelectCommand="SELECT [ID], [name], [age], [salary],[country],[city] FROM [GridView]" UpdateCommand="UPDATE [GridView] SET [name] = @name, [age] = @age, [salary] = @salary,[country]=@country WHERE [ID] = @ID"
                InsertCommand="INSERT INTO [GridView] ([name], [age], [salary],[country]) VALUES (@name, @age, @salary,@country)">
                <DeleteParameters>
                    <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="name" Type="String"></asp:Parameter>
                    <asp:Parameter Name="age" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="salary" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="country" Type="String"></asp:Parameter>
                </UpdateParameters>
                <InsertParameters>
                    <asp:Parameter Name="name" Type="String"></asp:Parameter>
                    <asp:Parameter Name="age" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="salary" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="country" Type="String"></asp:Parameter>
                </InsertParameters>

            </asp:SqlDataSource>
        </div>


Step 3:Logic on .Cs page


   protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
        {
            if (e.Exception != null)
            {
                e.KeepInEditMode = true;
                e.ExceptionHandled = true;
                DisplayMessage(true, "Employee " + e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"] + " cannot be updated. Reason: " + e.Exception.Message);
            }
            else
            {
                DisplayMessage(false, "Employee " + e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"] + " updated");
            }
        }

        protected void RadGrid1_ItemInserted(object source, GridInsertedEventArgs e)
        {
            if (e.Exception != null)
            {
                e.ExceptionHandled = true;
                e.KeepInInsertMode = true;
                DisplayMessage(true, "Employee cannot be inserted. Reason: " + e.Exception.Message);
            }
            else
            {
                DisplayMessage(false, "Employee inserted");
            }
        }

        protected void RadGrid1_ItemDeleted(object source, GridDeletedEventArgs e)
        {
            if (e.Exception != null)
            {
                e.ExceptionHandled = true;
                DisplayMessage(true, "Employee " + e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"] + " cannot be deleted. Reason: " + e.Exception.Message);
            }
            else
            {
                DisplayMessage(false, "Employee " + e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"] + " deleted");
            }
        }

        private void DisplayMessage(bool isError, string text)
        {
            this.Label1.Font.Bold = true;
            this.Label1.Visible = true;
            if (isError)
            {
                this.Label1.ForeColor = Color.Red;
            }
            else
            {
                this.Label1.ForeColor = Color.Green;
            }

            this.Label1.Text = text;
        }

          protected void RadGrid1_PreRender(object sender, System.EventArgs e)
          {
               if ( !this.IsPostBack )
               {
                    this.RadGrid1.MasterTableView.Items[1].Edit = true;
                    this.RadGrid1.MasterTableView.Rebind();
               }
          }
          protected void RadGrid1_DeleteCommand(object sender, GridCommandEventArgs e)
          {

          }

It will look like :-





Comments

Popular posts from this blog

Create and save QR code in asp.net with C#

Change text of RadGrid Header Dynamically

Telerik Radwindow Open on Button Click