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!
Hello Olga,
ok I see the idea behind the sorting.
Thanks alot!
Hi Matthias,
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
ASP.NET Principal Software Engineer
Infragistics, Inc.
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?
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.
Thanks
Olga
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.