Grouping - Drag & Drop RadGrid Columns to Panel/Div which is not a part of RadGrid

[Ankesh Bharti]

Hi,
I have to use grouping in RadGrid. But my requirement to use this feature in some different way. I want to drag and drop the columns on my own created Div in the same page(having RadGrid) instead of using GridGroupPanel. And then on the click of button (which is on the Div) to apply grouping performs the desired result of grouping. Can you please help me in this regard. How can i achive this functionality.

Thanks in Advance ... 

[Yavor]

Hello Ankesh,

Basically, the control does not expose any api for performing these actions. The grouping will be cancelled if you drag the column to an invalid element on the page - different from the group panel. Another option would be to expose a panel which allows the user to construct the group expression, and apply it dynamically, to the grid control. Such a setup is demonstrated in the following example:

http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/expressions/defaultcs.aspx

I hope this information helps.

Best wishes,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rachana]

Hello Yavor,
 i want to darg and drop the groups in radgrid view..but am not getting how to drag and drop the groups in the grid can u please explain me about this plz..

[Rachana]

Hello Yavor,
 i want to darg and drop the groups in radgrid view..but am not getting how to drag and drop the groups in the grid i have written code for onGroupschanging event still nthg is happening..am not able to drag the group can u please explain me about this plz.

<telerik:RadGrid runat="server" Skin="Vista" ID="gvSectionList" AllowPaging="false"
              ClientSettings OnRowDrop="gvSectionList_RowDrop" Width="100%" AllowMultiRowSelection="true"
               OnNeedDataSource="gvSectionList_NeedDataSource" OnGroupsChanging="gvSectionlist_GroupsChanging"
                AutoGenerateColumns="false" OnItemDataBound="gvSectionList_ItemDataBound">
               <MasterTableView DataKeyNames="tmpSectionId">
                   <GroupByExpressions>
                       <telerik:GridGroupByExpression>
                           <SelectFields>
                               <telerik:GridGroupByField FieldAlias="Term" FieldName="tmpTerm_Name" FormatString=""
                                   HeaderValueSeparator=" Name: "></telerik:GridGroupByField>
                           </SelectFields>
                           <GroupByFields>
                               <telerik:GridGroupByField FieldName="tmpTerm_Name" FormatString=""
                                   HeaderText=""></telerik:GridGroupByField>
                           </GroupByFields>
                       </telerik:GridGroupByExpression>
                   </GroupByExpressions>
                   <Columns>
                       <telerik:GridBoundColumn DataField="tmpTermId" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpTerm_Name" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpTerm_EndDate" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpCourseID" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpCourse_Name" HeaderText="Course Name" HeaderStyle-Width="25%"
                           ItemStyle-Width="25%" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpSectionId" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpSection_Name" HeaderText="Section Name" HeaderStyle-Width="25%"
                           ItemStyle-Width="25%" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpTerm_Status" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpRegUserCount" HeaderText="Registered Students" HeaderStyle-Width="25%"
                           ItemStyle-Width="25%" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpGustUserCount" HeaderText="Guest Students" HeaderStyle-Width="25%"
                           ItemStyle-Width="25%" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="tmpStartDate" Resizable="false" Reorderable="false">
                       </telerik:GridBoundColumn>
                   </Columns>
               </MasterTableView>
               <ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" AllowDragToGroup="True"  ReorderColumnsOnClient="true">
                   <Resizing AllowColumnResize="true"/>
                   <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                   <ClientEvents OnRowDropping="onRowDropping" />
                   <Scrolling AllowScroll="true"/>
               </ClientSettings>
               <PagerStyle Mode="NumericPages" PageButtonCount="4" />
           </telerik:RadGrid>

[Richard]

see below

[Richard]

Rachana:

The grouping functionality of RadGrid is covered in-depth on this page of the documentation: Basic Grouping. And, the online demo that provides the best insights is the Grid/Outlook-Style Grouping

It looks like you have not enabled the GridGroupPanel in your RadGrid definition. This is done by adding the ShowGroupPanel="true" property as in the following markup from the demo:

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" PageSize="20"
    AllowSorting="True" AllowMultiRowSelection="True" AllowPaging="True" ShowGroupPanel="True"
    AutoGenerateColumns="False" GridLines="none">

Let me know if this helps!

[Vamsi Kamal]

Hi,

Is it possible to enable grouping drag and drop without providing any default column in RadGrid?
When the RadGrid is loaded first time I don't want any grouping, Based on my need I will drag and drop the columns to use group by facility. Is it possible in RadGrid, if yes could you plz give me a sample code.

Many thanks in advance,
Vamsi

[Eyup]

Hello Vamsi,

You could achieve the requested behavior by simply removing the GroupExpressions from your RadGrid's declaration:

<GroupByExpressions>
     ...
</GroupByExpressions>

 and enable the GroupPanel drag-n-drop feature:

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

I hope this will prove helpful.

Regards,
Eyup
the Telerik team

[Vamsi Kamal]

Thanks for your reply, But I am getting "Expression cannot be null or empty " error after removing those lines and dragging and droping my desired column.

Currently I am facing two problems using RadGrid Grouping after providing one default column for grouping field.

1. The RadGrid is not rendering properly when it is loaded for the first time. (Please find the screenshot.)
2. If I Drag and Drop any column to GroupPanel then it is showing below error.
Error Message : "Expression cannot be null or empty"


I can see both the above issues only when the RadGrid is loaded for the first time.
If I do any action like ungroup the initail grouped column/ Changed the paging/ Refresh/ Sort then it is rendering properly and then onwards it is working fine as expected.

Could you please suggest me a solution for this.?
Many Thanks,
Vamsikamal

[Eyup]

Hello Vamsi,

I have created a sample RadGrid web site to test the described behavior. On my side everything works as expected and the grid gets rendered and grouped correctly. Please check out the attached application and try to distinguish the crucial differences between our projects.

Regards,
Eyup
the Telerik team

[Vamsi Kamal]

Hello Eyup,

Thanks for your response but I am not able to set up the project. I am getting below error.

The database 'D:\TEST\GROUPING\APP_DATA\NORTHWIND.MDF' cannot be opened because it is version 655. This server supports version 612 and earlier. A downgrade path is not supported.
Could not open new database 'D:\TEST\GROUPING\APP_DATA\NORTHWIND.MDF'. CREATE DATABASE is aborted.
An attempt to attach an auto-named database for file D:\Test\Grouping\App_Data\Northwind.mdf failed. A database with the same name exists, or specified file cannot be opened, or it is located on UNC share

[Eyup]

Hello Vamsi,

Please note that you will need to have SQL Server 2008 installed on your machine to run the sample web site and then add its provided service name in the web config:

<connectionStrings>
  <add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Northwind.mdf;Integrated Security=True;User Instance=True"
   providerName="System.Data.SqlClient" />
 </connectionStrings>

In addition, please note that if you are using GridTemplateColumns, you will need to define their GroupByExpression manually as demonstrated in the last section of the following topic:
http://www.telerik.com/help/aspnet-ajax/grid-group-by-declarative-definition.html

Hope this helps.

Regards,
Eyup
the Telerik team

[shweta]

Hi,

when m trying to group three or four column it is showing "NO records found".

How i'll fix that issue.

plz reply.

thanks.

[Princy]

Hi Shweta,

Please take a look at the sample code snippet to group data. Provide your code snippet if this doesn't help.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="true" AllowPaging="true"  AllowSorting="true" GroupingEnabled="true" GroupingSettings-ShowUnGroupButton="true">
    <MasterTableView >
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="ShipCity" HeaderText="ShipCity" />
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="ShipCity" SortOrder="Descending" />
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID"/>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity"/>
            <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry" UniqueName="ShipCountry"/>
            <telerik:GridBoundColumn DataField="ShipRegion" HeaderText="ShipRegion" UniqueName="ShipRegion"/>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="true">
    </ClientSettings>
</telerik:RadGrid>

Thanks,
Princy

[shweta]

Hi princy,

i have 4 columns in grid but two column has dropdown inside it. now m doing grouping and if i m putting any column after dropdown column for grouping so it is showing NO records found..what i need to do to fix that issue.
below is my code.

<telerik:RadGrid runat="server" ID="radGridContentTitle" AllowPaging="True" PageSize="8"
AllowSorting="True" GridLines="None" Skin="Office2007" ItemStyle-Wrap="true"
AutoGenerateColumns="False" OnItemDataBound="radGridContentTitle_ItemDataBound"
OnNeedDataSource="radGridContentTitle_NeedDataSource" OnPageIndexChanged="radGridContentTitle_PageIndexChanged"
Height="280px" Enabled="true" OnPreRender="radGridContentTitle_PreRender" AllowFilteringByColumn="true" ShowGroupPanel="true">
<AlternatingItemStyle></AlternatingItemStyle>
<ItemStyle Wrap="True"></ItemStyle>
<GroupingSettings CaseSensitive="false" />
<PagerStyle Mode="NextPrevAndNumeric" Position="Bottom" />
<MasterTableView GroupLoadMode="Server" TableLayout="Fixed">

<Columns>
<telerik:GridBoundColumn DataField="ContentTitleId" HeaderText="ID" UniqueName="ID" FilterControlWidth="120px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ContentTitleName" HeaderText="Content Title" FilterControlWidth="120px">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="Flag8125Description" HeaderText="8125 Setup" UniqueName="DropdownColumn" ShowSortIcon="true" SortExpression="Flag8125Description"
Groupable="true" GroupByExpression="Group By Flag8125ID" ColumnGroupName="8125 Setup" FilterControlWidth="120px">
<ItemTemplate>
<telerik:RadComboBox ID="dropDownListInGrid" runat="server" EnableItemCaching="True"
EnableTextSelection="False" AppendDataBoundItems="True" DataTextField="Flag8125Description"
DataValueField="Flag8125ID" ShowDropDownOnTextboxClick="False" Skin="Office2007">
<Items>
<telerik:RadComboBoxItem runat="server" Text="Select One" Value="0" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="EInduction" HeaderText="eInduction" UniqueName="EInductionFlag" SortExpression="EInduction" Groupable="true"
GroupByExpression="Group By EInduction">
<ItemTemplate>
<telerik:RadComboBox ID="rcbGridEInductionFlag" runat="server" EnableItemCaching="True"
EnableTextSelection="False" AppendDataBoundItems="True" DataTextField="EInductionDescription"
DataValueField="EInduction" ShowDropDownOnTextboxClick="False" Skin="Office2007" Width="40">
<Items>
<telerik:RadComboBoxItem runat="server" Text="No" Value="0" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true" AllowGroupExpandCollapse="true" ReorderColumnsOnClient="true">
<Selecting AllowRowSelect="True" />
<Scrolling UseStaticHeaders="true" AllowScroll="true" SaveScrollPosition="true" FrozenColumnsCount="6"
ScrollHeight="260" />
</ClientSettings>
</telerik:RadGrid>
</td>
</tr>

please check and let me know.asap.

thanks.

[Princy]

Hi Shweta,

Please try setting the GroupByExpression as follows for your TemplateColumn:

ASPX:

<telerik:GridTemplateColumn DataField="Flag8125Description" Groupable="true" GroupByExpression="Flag8125ID Group By Flag8125ID">
<ItemTemplate>
 . . . .

Thanks,
Princy