Hello there,
the user should be able to sort some columns, this can be normal text (names), numbers or dates.
I found this example on your page: http://help.infragistics.com/Help/NetAdvantage/ASPNET/2012.1/CLR4.0/html/WebDataGrid_Sorting.html
The example just binds directly to the data, in my case, I have Templates as columns:
<ig:TemplateDataField Key="Name" Width="260px">
<HeaderTemplate>
<asp:Label ID="lblNameHeader" runat="server">Name</asp:Label><br>
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="linkBtnName" runat="server" CausesValidation="False" CommandName="Link"
Width="200px" Font-Underline="true" Style="white-space: pre-wrap;">linkBtnName</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<div class="rowSelectEdit">
<stgwc:TextEdit runat="server" ID="txtIndvId" Width="0px" />
<asp:Label runat="server" ID="lblNameEdit" CssClass="lblRequiredField" Style="white-space: pre-wrap;">
</asp:Label>
<stgwc:ImageLinkButton ID="ibutChange" runat="server" CssClass="icoButton" ToolTip="Opens a search page where you can find your roles entry."
CausesValidation="False" ImageUrl="Images/base/Icons/16x16/media_play_green.png"
CommandName="SearchIndOrgInsert">
</stgwc:ImageLinkButton>
</div>
</FooterTemplate>
</ig:TemplateDataField>
In the Code behind, I set the sorting like this:
private void InitializeSortButtons()
{
dgrRoles.Behaviors.CreateBehavior<Infragistics.Web.UI.GridControls.
Sorting>();
dgrRoles.Behaviors.Sorting.SortingMode =
SortingMode.Single;
dgrRoles.Behaviors.Sorting.SortedColumns.Add(dgrRoles.Columns[COL_NAME], Infragistics.Web.UI.
SortDirection.Ascending);
SortDirection.Descending);
}
const string COL_NAME = "Name";
But I get an error on the preRender:
"An unexpected error occured. Cannot find column Name."
Am I missing something? Is it possible to sort with the template fields?
BTW: Is there a possibility to format code better?
Thanks for your response!
Hi Matthias,
The WDG will not sort Templated columns by default, since in cases where the datasource is able to sort we use the datasource for sorting. Also the grid has no idea what part of the template is sortable, as in do we sort by the label text or label id or what if you have a link, should the URL be sorted or the text, ect?
You can implement sorting for your templated columns though, as you know which parts of the template should be sortable for your particular application/page. This can be achieved in multiple ways. I am attaching two different websites which show you two different ways to implement it.
In order to run the attach sample please change the Infragistics dll reference in the Web.Config and ASPX files to the version that you are currently using. Currently the style directory is set in the Web.Config file to be located in "http://localhost/ig_res12.1" virtual directory, if this is not where you have your Infragisitcs styles installed please change this as well.
Thank You,
Olga
ASP.NET Principal Software Engineer
Infragistics, Inc.
Forgot to attach the 2nd solution. Here it is
Hello Olga,
I have to set the sorting behaviour, because we're setting the url there on the control we're using:
if (this.Behaviors.Sorting != null)
this.Behaviors.Sorting.AscendingImageUrl = this.GetWebResourceUrl(EmbeddedImages.SortAsc);
this.Behaviors.Sorting.DescendingImageUrl = this.GetWebResourceUrl(EmbeddedImages.SortDesc);
Have you a idea on what event it would make sense to sort the datasource? I cant find a event like 'HeaderClicked' or something like this.
ColumnSorted does not shoot if I dont sort and imo the sorted is to late, because I need to sort before the reload.
Matthias
Hello,
You can see the header being click on the client and add the sorting image to the header there too. One of the solutions I posted earlier does this. Please take a look at it.
Thanks
I guess i kinda miss-explained the problem: If I get the sorted event the preRender event fails, because it cant find the field on the datasource. The datasource is a is a rowviewtable, which is kinda special.
So my approach would be to let the Sorting event trigger and cancel this. Before cancelling I request the server-side to sort the datasource directly. Something like this:
<ig:Sorting> <ColumnSettings> <ig:SortingColumnSetting ColumnKey="RoleType" /> </ColumnSettings> <SortingClientEvents ColumnSorting="dgrRoles_Sorting" /> </ig:Sorting>
function dgrRoles_Sorting(sender, eventArgs) { //My Code eventArgs.set_cancel(true); }
Is that the right approach? It seems like sorting does not shoot everytime I press on the RoleType buttons.
That approach is fine, as long as your code will actually trigger a sort before you cancel the sorting client event. Sorting should be triggered every time you click on the header of the column, the reason that I can think of which would prevent this from happening is if you have a template in the header of the column and when you click you are actually clicking on the template (like a button). In which case it is possible that the templated control in the header will process the click event and will not bubble up the event to the TH element of the grid. If you have a click handler for your tempalted controls in the header make sure that you are not preventing the event from bubbling up.
seems like I'm still missing a piece of the puzzle:
We're initializing the images to sort with this code:
if (this.Behaviors.Sorting != null) { this.Behaviors.Sorting.AscendingImageUrl = this.GetWebResourceUrl(EmbeddedImages.SortAsc); this.Behaviors.Sorting.DescendingImageUrl = this.GetWebResourceUrl(EmbeddedImages.SortDesc); }
I switched from using template fields in the header to something like this:
<ig:TemplateDataField Key="RoleType" Width="160px" Footer-CssClass="rowSelectEdit"> <Header Text ="Roletype" /> <ItemTemplate>
The sorting properties are still: <ig:Sorting Enabled="true"> <ColumnSettings> <ig:SortingColumnSetting ColumnKey="RoleType" Sortable="true" /> </ColumnSettings> <SortingClientEvents ColumnSorting="dgrRoles_Sorting" /> </ig:Sorting>
Can you tell me what I'm missing that the images are shown? I hoped to see them in every column header I'm defining in the columnSettings, or am I wrong there?
ok I see the idea behind the sorting.
Thanks alot!
Are you saying when you click on the column header to sort the column the sorting indicate (image) does not show up? The image in the header does not show until the column is sorted (ie added to the sortable columns collection). If you are not adding the column to the sorted columns collection the only way to force the image to show up in the header is with javascript, in the following way:
var currentHTML = grid.get_columns().get_columnFromKey("Template").get_headerElement().innerHTML;
grid.get_columns().get_columnFromKey("Template").get_headerElement().innerHTML = currentHTML + " " + "<img id=\"x:680611362.3:img:1\" title=\"Ascending\" alt=\"Ascending\" style=\"margin-left:5px;\" src=\"ig_res/Default/images/igg_sortAsc.gif\" img=\"1\">";
Thanks,
Olga Kerchentseva