Thursday, 17 July 2014

Telerik RadGrid Grouping -Drag and Drop a column header to group by that column in ASP.NET using C#/VB.NET

Hi friends,in this article I will explain about Telerik RadGrid Grouping -Drag and Drop a column header to group by that column in ASP.NET using C#/VB.NET.
I already explained in the previous articles about Telerik RadGrid Grouping -Drag and Drop a column header to group by that column in ASP.NET using C#/VB.NETBatch Editing(Edit/Insert/Update/Delete) in telerik RadGrid in ASP.NET using C#/VB.NET and How to Bind the Dataset to telerik RadGrid in ASP.NET using C#/VB.NET

Before going to use Telerik ,first  download the Telerik dll’s from Telerik site or any another websites.
ASP.NET:
Add ShowGroupPanel="true" to telerik:RadGrid
Add AllowDragToGroup="true" to ClientSettings

<telerik:RadGrid ... ShowGroupPanel="true">
          ...
        <ClientSettings AllowDragToGroup="true" />
     </telerik:RadGrid>

Example:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Telerik RadGrid Grouping -Drag and Drop a column header to group by that column in ASP.NET using C#/VB.NET</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadGrid ID="RadGridDetails" GridLines="None" runat="server" AllowSorting="true"
            AllowMultiRowEdit="True" OnBatchEditCommand="RadGridDetails_BatchEditCommand"
            AllowAutomaticUpdates="True" AllowAutomaticInserts="true" AllowAutomaticDeletes="true"
            PageSize="10" AllowPaging="True" OnNeedDataSource="RadGridDetails_NeedDataSource"
            AllowActiveRowCycle="true" AutoGenerateColumns="False" AllowMultiRowSelection="true" ShowGroupPanel="true"
            Width="750px" Skin="Sunset">
            <HeaderContextMenu EnableTheming="True">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            </HeaderContextMenu>
            <ClientSettings AllowDragToGroup="true">
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
            <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="StudentID" HorizontalAlign="NotSet"
                EditMode="Batch" AutoGenerateColumns="False">
                <BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="StudentID" SortOrder="Ascending" />
                </SortExpressions>
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="25px">
                    </telerik:GridClientSelectColumn>
                    <telerik:GridBoundColumn DataField="StudentID" HeaderStyle-Width="65px" HeaderText="Student ID"
                        ReadOnly="true" SortExpression="StudentID" UniqueName="StudentID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="StudentName" HeaderStyle-Width="80px" HeaderText="Student Name"
                        SortExpression="StudentName" UniqueName="StudentName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="MATHS" HeaderStyle-Width="80px" HeaderText="MATHS"
                        SortExpression="MATHS" UniqueName="MATHS">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="SCIENCE" HeaderStyle-Width="80px" HeaderText="SCIENCE"
                        SortExpression="SCIENCE" UniqueName="SCIENCE">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="SOCIAL" HeaderStyle-Width="80px" HeaderText="SOCIAL"
                        SortExpression="SOCIAL" UniqueName="SOCIAL">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Total" HeaderStyle-Width="80px" HeaderText="Total"
                        SortExpression="Total" UniqueName="Total">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this user?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" HeaderText="Delete" HeaderStyle-Width="50px" ButtonType="ImageButton"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                    </telerik:GridButtonColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>


See the C#/VB.NET code in Telerik RadGrid - Change Cell Value based on another Cell value in ASP.NET using C#/VB.NET

 The output of the above code as shown in the below figure.

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.