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.NET, Batch 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
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.NET, Batch 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
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.
The output of the above code as shown in the below figure.
No comments:
Post a Comment