In my previous post, I have shown how to do data binding, data sorting and different type of columns of AjaxDataControls GridView. In this post, I will show how to enable Drag and Drop of the GridView Columns and automatically persist it with the help of Ajax Profile Service.
The GridView internally uses the preview version of Asp.net Ajax Drag and Drop script for the column Drag and Drop. So the first thing you have to do is to add these scripts in your script manager, the GridView also uses the animation script (PreviewGlitz.js) to do the animation when binding with data, So I would also recommend to add this script to exploit the full feature of GridView.
<asp:ScriptManager ID="TheScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/DataService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/PreviewScripts/PreviewScript.js" />
<asp:ScriptReference Path="~/PreviewScripts/PreviewDragDrop.js" />
<asp:ScriptReference Path="~/PreviewScripts/PreviewGlitz.js" />
</Scripts>
</asp:ScriptManager>
By default the GridView turns on the drag and drop for all type of columns except Button, Command and Radio columns. But you can also allow Drag and Drop for those column types by setting the AllowDragAndDrop property to true of the individual columns. Now, lets take quick example of the GridView, here we will see the Suppliers of the Northwind database. The following shows the control declaration in the aspx page:
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle"/>
<HeaderStyle CssClass="HeaderStyle"/>
<Columns>
<AjaxData:GridViewBoundColumn HeaderText="Company" DataField="Company"/>
<AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName"/>
<AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle"/>
</Columns>
</AjaxData:GridView>
As you can see we are doing nothing special except adding the preview scripts in the script manager. Next, add the following JavaScript codes in your aspx page:
<script type="text/javascript">
var _gridView;
function pageLoad(sender, e)
{
_gridView = $find('<%= GridView1.ClientID %>');
loadSuppliers();
}
function loadSuppliers()
{
DataService.GetAllSupplier(onLoadSuccess);
}
function onLoadSuccess(result)
{
_gridView.set_dataSource(result);
_gridView.dataBind();
}
</script>
Once done, run it, you will able to do the drag and drop like the following:
As you can see it gives some cool drag and drop abilities of the columns, but once you refresh the page the GridView appears same as it appears for the first time, which means the Drag and Drop of the columns has not been persisted. To add the persistence support we have to do the following things:
- Configure the Asp.net Profile Provider.
- Configure the Ajax Profile Services to allow access the Profile Object. Click here if you need to know how to configure the Ajax Profile Service.
- Few modification in the control declaration and javascript code.
For the shake of this example I have add the Asp.net Provider support in the Northwind database and added the following settings in the web.config file:
<anonymousIdentification enabled="true"/>
<membership defaultProvider="SqlMemberShipProvider" userIsOnlineTimeWindow="1">
<providers>
<clear/>
<add name="SqlMemberShipProvider" applicationName="Northwind" connectionStringName="NorthwindConnectionString" type="System.Web.Security.SqlMembershipProvider"/>
</providers>
</membership>
<profile defaultProvider="SqlProfileProvider">
<providers>
<clear/>
<add name="SqlProfileProvider" applicationName="Northwind" connectionStringName="NorthwindConnectionString" type="System.Web.Profile.SqlProfileProvider"/>
</providers>
<properties>
<add name="DndColumns" type="System.String" provider="SqlProfileProvider" allowAnonymous="true"/>
</properties>
</profile>
</system.web>
<system.web.extensions>
<scripting>
<webServices>
<profileService enabled="true" readAccessProperties="DndColumns" writeAccessProperties="DndColumns"/>
</webServices>
</scripting>
</system.web.extensions>
As you can see, in the profile provider I have added a property named DndColumns which type is string. You can name it anything but the type needs to be string. Next, I gave both read/write permission of this property to Ajax Profile Service. Now we have to change the previous javascript code and the control to load and persist the columns. The following shows control, the modifications are in bold:
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" ColumnsLoadedFromProfileEvent="onColumnsLoaded" ColumnDroppedEvent="onColumnDropped">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle"/>
<HeaderStyle CssClass="HeaderStyle"/>
<Columns>
<AjaxData:GridViewBoundColumn HeaderText="Company" DataField="Company"/>
<AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName"/>
<AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle"/>
</Columns>
</AjaxData:GridView>
In the new declaration, I have added two new client side events, the control will fire the onColumnsLoaded function when the grid completes the column loading from the asp.net profile and it will also fire the onColumnsDropped function when a column is dropped. And the following shows the modified code for the client side:
<script type="text/javascript">
var _gridView;
function pageLoad(sender, e)
{
_gridView = $find('<%= GridView1.ClientID %>');
_gridView.loadColumnsFromProfile('DndColumns');
}
function onColumnsLoaded(sender, e)
{
loadSuppliers();
}
function loadSuppliers()
{
DataService.GetAllSupplier(onLoadSuccess);
}
function onLoadSuccess(result)
{
_gridView.set_dataSource(result);
_gridView.dataBind();
}
function onColumnDropped(sender, e)
{
_gridView.saveColumnsToProfile('DndColumns');
}
</script>
As you can see, here in the pageLoad event (which automatically fired by the Asp.net Ajax Framework) we are instructing the GridView to load the columns from the previously configured Profile property DndColumns. Once the columns are loaded, the GridView fires the onColumnLoaded function where we are loading the suppliers and when a column is dropped the onColumDropped function gets executed where we are storing the newly ordered columns in the Profile. Now when you refresh the page or re visit the page you will find it persisted.
You will find the full working demo in the Sample folder of the CodePlex Release tab.
