This is a migrated thread and some comments may be shown as answers.

Sort icon vanishes in case of multiple column sorting in client side

3 Answers 124 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Bibhudutta asked on 04 Jun 2013, 01:47 PM

Grid-Header.png

I have a grid and i am applying sorting on the columns on client side using this code :

<script type="text/javascript">
    function AddSortExpression(grid, fieldName, sortOrder) {
        var sortExpression = new Telerik.Web.UI.GridSortExpression();
        sortExpression.set_fieldName(fieldName);
        sortExpression.set_sortOrder(sortOrder);
        grid.get_masterTableView()._sortExpressions.add(sortExpression);
        grid.get_masterTableView()._showSortIconForField(fieldName, sortOrder);
    }
</script>

The code works fine for a single column sorting but if there are two columns
to be sorted then sorting gets applied on the two columns and the column header
color changes to denote that but the little black triangle which denotes whether
it is a ascending or descending sort vanishes. I have attached the image of how 
the header looks.

Please help me out.

3 Answers, 1 is accepted

answered on 09 Jun 2013, 12:19 PM

Hi Angel,

I am binding the grid on client side, a WCF service returns the data to be binded. Here's the code

ASPX page

<telerik:RadGrid ID="rgOrder"

runat="server"

AllowPaging="True"

AutoGenerateColumns="False"

AllowMultiRowSelection="true"

AllowSorting="True"

EnableLinqExpressions="false"

OnItemCommand="rgOrder_ItemCommand"

Height="100%"

OnPreRender="rgOrder_PreRender"

AllowFilteringByColumn="true">

<MasterTableView DataKeyNames="OrderHeaderSK,IsEditable"

ClientDataKeyNames="ModuleTransactionSK,SiteSK,OrderHeaderSK,OrderID,ZeroPriceItems,WorkflowSK,OrderStatusSK,OrderTypeSK,IsEditable"

TableLayout="Fixed"

PagerStyle-Mode="NextPrevAndNumeric"

Name="Order"

AllowFilteringByColumn="true"

CommandItemDisplay="Top"

EnableHeaderContextMenu="false">

<CommandItemTemplate>

<telerik:RadToolBar ID="rtbCommand" runat="server" Width="100%" OnClientButtonClicking="clientbuttonclicking"

OnButtonClick="rtbCommand_ButtonClick" >

<Items>

<telerik:RadToolBarButton Value="Search">

<ItemTemplate>

<asp:Panel ID="pnlCommand" DefaultButton="imgSearch" runat="server">

<table>

<tr>

<td>Search: </td>

<td>

<asp:TextBox ID="txtSearch" runat="server" Text="<%#hfSearchValue.Value%>" Width="120px"

MaxLength="48" ></asp:TextBox>

</td>

<td>

<asp:ImageButton ID="imgSearch" ImageUrl="~/images/view.png" CausesValidation="false"

CommandName="Search" runat="server" OnClientClick="javascript:imgSearch_OnClientClick(this);return false;" ></asp:ImageButton>

</td>

<td>

<asp:ImageButton ID="imgClose" ImageUrl="~/images/cancel2.png" CausesValidation="false"

CommandName="ClearSearch" runat="server" OnClientClick="javascript:imgCancel_OnClientClick(this);return false;"></asp:ImageButton>

</td>

</tr>

</table>

</asp:Panel>

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton Text="New" ImageUrl="~/Images/add.png" CommandName="New" ></telerik:RadToolBarButton>

<telerik:RadToolBarButton Text="Allocate" ImageUrl="~/Images/allocate.png" CommandName="Allocate" />

<telerik:RadToolBarButton Text="Print" ImageUrl="~/Images/print.png" CommandName="Print" />

<telerik:RadToolBarButton Text="Workflow" ImageUrl="~/Images/workflow.png" CommandName="Workflow" />

<telerik:RadToolBarButton Text="Status" ImageUrl="~/Images/status.png" CommandName="Status" />

<telerik:RadToolBarButton Text="Delete" ImageUrl="~/Images/trash.png" CommandName="DeleteSelected" />

<telerik:RadToolBarButton Text="Notes" ImageUrl="~/Images/note.png" CommandName="Note" />

<telerik:RadToolBarButton Text="Excel" ImageUrl="~/Images/excel.png" Value="ExportGrid" CommandName="ExportOrderGrid" Enabled="<%#!rgOrder.MasterTableView.IsItemInserted%>" />

<telerik:RadToolBarButton Text="More Actions" ImageUrl="~/Images/moreactions.png" Visible='<%#hfShowMoreActionsDetailButton.Value == "1" %>' Value="MoreActionsDetail" CommandName="MoreActionsDetail" />

<telerik:RadToolBarButton Text="Filter Criteria" Value="FilterCriteria" CommandName="FilterCriteria" ForeColor="#FF5800" OuterCssClass="rightButton"/>

</Items>

</telerik:RadToolBar>

</CommandItemTemplate>

<Columns>

<telerik:GridClientSelectColumn UniqueName="Select"

HeaderStyle-Width="35px"

ItemStyle-HorizontalAlign="Center"

HeaderStyle-HorizontalAlign="Center" />

<telerik:GridHyperLinkColumn UniqueName="OrderID"

DataNavigateUrlFields="OrderHeaderSK,OrderTypeName"

DataTextField="OrderID"

HeaderText="Transaction"

SortExpression="OrderID"

AutoPostBackOnFilter="false"

CurrentFilterFunction="Contains"

DataNavigateUrlFormatString='javascript:OpenOrder({0},"{1}");'

DataTextFormatString="{0}"

ShowFilterIcon="false"

DataType="System.String">

<HeaderStyle HorizontalAlign="Left"

Width="80px" />

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn UniqueName="DocumentID"

DataField="DocumentID"

SortExpression="DocumentID"

HeaderText="Doc Type"

CurrentFilterFunction="Contains"

DataType="System.String"

ShowFilterIcon="False"

AutoPostBackOnFilter="false">

<HeaderStyle Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OriginTransID"

DataField="OriginTransID"

SortExpression="OriginTransID"

HeaderText="Prev. Trans #"

CurrentFilterFunction="Contains"

DataType="System.String"

ShowFilterIcon="False"

AutoPostBackOnFilter="false">

<HeaderStyle Width="65px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OrderDate"

DataField="OrderDate"

HeaderText="Doc Date"

SortExpression="OrderDate"

CurrentFilterFunction="EqualTo"

ShowFilterIcon="False"

AutoPostBackOnFilter="false"

DataFormatString="{0:MM/dd/yy}"

DataType="System.DateTime">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right"

Width="65px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ScheduledShipDate"

DataField="ScheduledShipDate"

HeaderText="Ship By"

SortExpression="ScheduledShipDate"

CurrentFilterFunction="EqualTo"

DataType="System.DateTime"

ShowFilterIcon="False"

AutoPostBackOnFilter="false"

DataFormatString="{0:MM/dd/yy}">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right"

Width="65px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Deliveron"

DataField="ScheduledDeliveryDate"

HeaderText="Deliver On"

SortExpression="ScheduledDeliveryDate"

CurrentFilterFunction="EqualTo"

DataType="System.DateTime"

ShowFilterIcon="False"

AutoPostBackOnFilter="false"

DataFormatString="{0:MM/dd/yy}">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right"

Width="65px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ActualShip"

DataField="ActualShipDate"

DataFormatString="{0:MM/dd/yy}"

HeaderText="Actual Ship"

SortExpression="ActualShipDate"

CurrentFilterFunction="EqualTo"

DataType="System.DateTime"

ShowFilterIcon="False"

AutoPostBackOnFilter="False">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right" Width="65px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="WorkflowName"

DataField="WorkflowName"

SortExpression="WorkflowName"

HeaderText="Workflow"

CurrentFilterFunction="Contains"

DataType="System.String"

ShowFilterIcon="False"

AutoPostBackOnFilter="False">

<HeaderStyle Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SiteName" DataField="SiteName" HeaderText="Site"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="SiteName">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CustomerName" DataField="CustomerName" HeaderText="Customer Name"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="CustomerName">

<HeaderStyle Width="125px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PurchaseOrder" DataField="PurchaseOrder" HeaderText="PO"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="PurchaseOrder">

<HeaderStyle Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OrderStatusName" DataField="OrderStatusName" AutoPostBackOnFilter="true"

HeaderText="Status" DataType="System.String" ShowFilterIcon="false" SortExpression="OrderStatusName" >

<HeaderStyle Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CarrierName"

DataField="CarrierName"

SortExpression="CarrierName"

HeaderText="Carrier"

CurrentFilterFunction="Contains"

DataType="System.String"

ShowFilterIcon="False"

AutoPostBackOnFilter="False">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Truck" DataField="Truck" HeaderText="Truck"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="Truck" >

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OrderTypeName"

DataField="OrderTypeName"

SortExpression="OrderTypeName"

HeaderText="Trans Type"

CurrentFilterFunction="Contains"

DataType="System.String"

ShowFilterIcon="False"

AutoPostBackOnFilter="False">

<HeaderStyle Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ShipState" DataField="ShipState" HeaderText="State"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="ShipState" >

<HeaderStyle Width="40px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Exception" DataField="OrderExceptionExists" HeaderText="Exception"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="OrderExceptionExists">

<HeaderStyle Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="InternalNote" DataField="InternalNote" HeaderText="Internal Note"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="InternalNote">

<HeaderStyle Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ShipAddressID" DataField="ShipAddressID" HeaderText="Address ID"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="ShipAddressID">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ShipAttentionTo" DataField="ShipAttentionTo"

HeaderText="Attention To" CurrentFilterFunction="Contains" DataType="System.String"

ShowFilterIcon="False" AutoPostBackOnFilter="True" SortExpression="ShipAttentionTo">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Salesperson" DataField="SalesPerson" HeaderText="Salesperson"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="Salesperson" >

<HeaderStyle Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="ShipPhone1" DataField="ShipPhone1" HeaderText="Ship Phone"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="ShipPhone1" >

<HeaderStyle Width="45px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CurrencyID" DataField="CurrencyID" HeaderText="Currency"

CurrentFilterFunction="Contains" DataType="System.String" ShowFilterIcon="False"

AutoPostBackOnFilter="True" SortExpression="Currency ID" >

<HeaderStyle Width="55px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Amount" DataField="Amount" HeaderText="Amount"

CurrentFilterFunction="EqualTo" ShowFilterIcon="False" AutoPostBackOnFilter="True"

DataFormatString="{0:C2}" DataType="System.Double" SortExpression="Amount">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right" Width="80px" />

<FooterStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OrderedUnits" HeaderText="Ord. Units" DataField="OrderedUnits"

DataFormatString="{0:N2}" AutoPostBackOnFilter="True" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false" DataType="System.Decimal" SortExpression="OrderedUnits">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right" Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="OrderedWeight" HeaderText="Ord. Weight" DataField="OrderedWeight"

DataFormatString="{0:N2}" AutoPostBackOnFilter="True" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false" DataType="System.Decimal" SortExpression="OrderedWeight">

<ItemStyle HorizontalAlign="Right" />

<HeaderStyle HorizontalAlign="Right" Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="AllocatedUnits" DataField="AllocatedUnits" HeaderText="Alloc. Units"

DataFormatString="{0:N2}" AutoPostBackOnFilter="True" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false" DataType="System.Decimal" SortExpression="AllocatedUnits">

<HeaderStyle HorizontalAlign="Right" Width="100px" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="AllocatedWeight" DataField="AllocatedWeight"

HeaderText="Alloc. Weight" DataFormatString="{0:N2}" AutoPostBackOnFilter="True"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false" DataType="System.Decimal" SortExpression="AllocatedWeight">

<HeaderStyle HorizontalAlign="Right" Width="100px" />

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CreatedBy" DataField="CreatedBy"

HeaderText="Created By" AutoPostBackOnFilter="true" SortExpression="CreatedBy"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false" DataType="System.String">

<HeaderStyle HorizontalAlign="Left" Width="125px" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />

<ClientSettings AllowColumnsReorder="true"

AllowColumnHide="true"

ColumnsReorderMethod="Reorder"

AllowAutoScrollOnDragDrop="false"

ReorderColumnsOnClient="true">

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

<Resizing AllowColumnResize="true" />

<ClientEvents OnRowDeselected="rgOrder_OnClientRowDeselected" OnRowSelected="rgOrder_OnClientRowSelected"

OnRowSelecting="RowSelecting" OnCommand="rgOrder_OnClientCommnad" OnGridCreated="ResizeGrid" />

</ClientSettings>

</telerik:RadGrid>

Javascript

var tableView;

//This will hold only the filter expression

var onlyFilterExpression = "";

//This will hold only the sort expression

var onlySortExpression = "";

function pageLoad(sender, args) {

//This hidden feild holds all the settings sort expression, filter expression and column settings.

var settings = $("#hfSettings").val();

onlySortExpression = GetSortSettings(settings, onlySortExpression);

onlyFilterExpression = GetFilterSettings(settings, onlyFilterExpression);

$("#hfSettings").val("");

var keyValuePairText = $("#hfColumnDataFieldPairs").val().split('|');

var keyValuePair = {};

for (var i = 0; i < keyValuePairText.length; i++) {

var keyAndValue = keyValuePairText[i].split(':');

if (trim(keyAndValue[0]) != "") {

keyValuePair[keyAndValue[0]] = keyAndValue[1];

}

$(".rgHeader a").click(function () {

var sortExpr = $("#hfSortCommandName").val();

var columnName = $(this).text();

var dataFieldName = keyValuePair[$(this).text()];

if (sortExpr != "" && sortExpr.indexOf(dataFieldName) >= 0) {

$(this).parent().addClass("rgSorted");

}

else {

$(this).parent().removeClass("rgSorted");

}

});

$("#ctl00_Main_rgOrder_ctl00_ctl02_ctl00_rtbCommand_i0_imgClose").css("display", "none");

//setInterval(getData, 5000);

tableView = $find("<%= rgOrder.ClientID %>").get_masterTableView();

var filterExpressions = tableView.get_filterExpressions();

var currentDataEntityCompanySK = '<%= CurrentDataEntityCompanySK %>';

var currentUserSK = '<%= CurrentUserSK %>';

// Get the LotList data by calling the service with proper values supplied.

OrderListService.GetOrderList(currentDataEntityCompanySK, currentUserSK, "", 0, tableView.get_pageSize(),

tableView.get_sortExpressions().toString() + onlySortExpression, filterExpressions.toString() + onlyFilterExpression, updateGrid);

OrderListService.GetOrderListCount(updateVirtualItemCount);

SetVisibilityOfFilterCriteria(filterExpressions.toString() + onlyFilterExpression);

ApplyFilterSettings(onlyFilterExpression);

ApplySortSettings(onlySortExpression);

onlySortExpression = "";

onlyFilterExpression = "";

}

function updateGrid(result) {

tableView.set_dataSource(result);

tableView.dataBind();

}

function rgOrder_OnClientCommnad(sender, args) {

//alert(args.get_commandName());

var searchParamValue = $("#ctl00_Main_rgOrder_ctl00_ctl02_ctl00_rtbCommand_i0_txtSearch").val();

args.set_cancel(true);

var currentDataEntityCompanySK = '<%= CurrentDataEntityCompanySK %>';

var currentUserSK = '<%= CurrentUserSK %>';

var pageSize = sender.get_masterTableView().get_pageSize();

var sortExpressions = sender.get_masterTableView().get_sortExpressions();

var filterExpressions = sender.get_masterTableView().get_filterExpressions();

$("#hfSortCommandName").val(sortExpressions);

var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();

if (args.get_commandName() == "Filter")

currentPageIndex = 0;

var sortExpressionsAsSQL = sortExpressions.toString() + onlySortExpression;

var filterExpressionsAsSQL = filterExpressions.toString() + onlyFilterExpression;

setCookie("SortExpr", sortExpressionsAsSQL, null);

setCookie("FilterExpr", filterExpressionsAsSQL, null);

OrderListService.GetOrderList(currentDataEntityCompanySK, currentUserSK, searchParamValue, currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, filterExpressionsAsSQL, updateGrid);

if (args.get_commandName() == "Filter") {

OrderListService.GetOrderListCount(updateVirtualItemCount);

}

function GetFilterSettings(settings, filterExpression) {

if (trim(settings) != "") {

var settingsArray = settings.split('|');

if (settingsArray.length >= 2) {

if (settingsArray[0].indexOf("FilterExpression") >= 0) {

filterExpression = settingsArray[0].replace("FilterExpression[", "");

filterExpression = filterExpression.substring(0, filterExpression.length - 1);

}

else if (settingsArray[1].indexOf("FilterExpression") >= 0) {

filterExpression = settingsArray[1].replace("FilterExpression[", "");

filterExpression = filterExpression.substring(0, filterExpression.length - 1);

}

else if (settingsArray.length == 1) {

if (settingsArray[0].indexOf("FilterExpression") >= 0) {

filterExpression = settingsArray[0].replace("FilterExpression[", "");

filterExpression = filterExpression.substring(0, filterExpression.length - 1);

}

return filterExpression;

}

function GetSortSettings(settings, sortExpression) {

if (trim(settings) != "") {

var settingsArray = settings.split('|');

if (settingsArray.length >= 2) {

if (settingsArray[0].indexOf("SortExpression[") >= 0) {

sortExpression = settingsArray[0].replace("SortExpression[", "");

sortExpression = sortExpression.substring(0, sortExpression.length - 1);

}

else if (settingsArray[1].indexOf("SortExpression[") >= 0) {

sortExpression = settingsArray[1].replace("SortExpression[", "");

sortExpression = sortExpression.substring(0, sortExpression.length - 1);

}

else if (settingsArray.length == 1) {

if (settingsArray[0].indexOf("SortExpression[") >= 0) {

sortExpression = settingsArray[0].replace("SortExpression[", "");

sortExpression = sortExpression.substring(0, sortExpression.length - 1);

}

return sortExpression;

}

function GetColumnSettings(settings, columnSettings) {

if (trim(settings) != "") {

var settingsArray = settings.split('|');

if (settingsArray.length >= 2) {

// first of all remove the ColumnSettings word from it with square braces used for it.

if (settingsArray[1] != undefined && settingsArray[1].indexOf("ColumnSettings[") >= 0) {

columnSettings = settingsArray[1].replace("ColumnSettings[", "");

columnSettings = columnSettings.substring(0, columnSettings.length - 1);

}

else if (settingsArray[2] != undefined && settingsArray[2].indexOf("ColumnSettings[") >= 0) {

columnSettings = settingsArray[2].replace("ColumnSettings[", "");

columnSettings = columnSettings.substring(0, columnSettings.length - 1);

}

return columnSettings;

}

function ApplySortSettings(onlySortExpression) {

if (trim(onlySortExpression) != "") {

if (onlySortExpression.indexOf(",") >= 0) {

var sortExpressionArray = onlySortExpression.split(",");

if (sortExpressionArray != undefined && sortExpressionArray.length > 0) {

for (var i = 0; i < sortExpressionArray.length; i++) {

var sortOperandArray = sortExpressionArray[i].split(' ');

for (var j = 0; j < tableView.get_columns().length; j++) {

var column = tableView.get_columns()[j];

var columnName = trim(column.get_uniqueName()).toString();

var columnNameInExpression = trim(sortOperandArray[0]);

if (columnName == columnNameInExpression) {

AddSortExpression(tableView, columnName, sortOperandArray[1]);

}

else if (columnName == "LotID" && columnNameInExpression == "Lot") {

AddSortExpression(tableView, columnName, sortOperandArray[1]);

}

function ApplyFilterSettings(onlyFilterExpression) {

if (trim(onlyFilterExpression) != "") {

if (onlyFilterExpression.indexOf(" AND ") >= 0) {

var filterExpressionArray = onlyFilterExpression.split(" AND ");

if (filterExpressionArray != undefined && filterExpressionArray.length > 0) {

for (var i = 0; i < filterExpressionArray.length; i++) {

var filterOperandArray = filterExpressionArray[i].split(' ');

for (var j = 0; j < tableView.get_columns().length; j++) {

var column = tableView.get_columns()[j];

if (trim(column.get_uniqueName()) == trim(filterOperandArray[0].substring(1, filterOperandArray[0].length - 1))) {

AddFilterExpressionOnFilterCotrol(tableView, column.get_uniqueName(), column.get_uniqueName(), filterOperandArray);

}

else if(trim(column.get_uniqueName()) == "LotID" && trim(filterOperandArray[0].substring(1, filterOperandArray[0].length - 1)) == "Lot")

{

AddFilterExpressionOnFilterCotrol(tableView, column.get_uniqueName(), "Lot", filterOperandArray);

}

else {

var filterOperandArray = onlyFilterExpression.split(' ');

for (var j = 0; j < tableView.get_columns().length; j++) {

var column = tableView.get_columns()[j];

if (trim(column.get_uniqueName()) == trim(filterOperandArray[0].substring(1, filterOperandArray[0].length - 1))) {

AddFilterExpressionOnFilterCotrol(tableView, column.get_uniqueName(), column.get_uniqueName(), filterOperandArray);

}

else if (trim(column.get_uniqueName()) == "LotID" && trim(filterOperandArray[0].substring(1, filterOperandArray[0].length - 1)) == "Lot") {

AddFilterExpressionOnFilterCotrol(tableView, column.get_uniqueName(), "Lot", filterOperandArray);

}

onlyFilterExpression = "";

}

function AddFilterExpressionOnFilterCotrol(tblView, columnName, fieldName, filterOperandArray) {

var filterFunction = "";

if (filterOperandArray[1] == "LIKE")

filterFunction = "Contains";

if (filterOperandArray[1] == "=")

filterFunction = "EqualTo";

var filterValue = "";

if (filterOperandArray[2] != undefined) {

if (filterOperandArray[2].indexOf("%") >= 0)

filterValue = filterOperandArray[2].replace(/%/g, '');

else

filterValue = filterOperandArray[2];

if (filterValue.indexOf("'") >= 0) {

filterValue = filterValue.replace(/'/g, '');

}

else

filterValue = filterOperandArray[2];

}

AddFilterExpression(tblView, columnName, fieldName, filterFunction, filterValue);

}

function AddSortExpression(tableview, fieldName, sortOrder) {

var sortExpression = new Telerik.Web.UI.GridSortExpression();

sortExpression.set_fieldName(fieldName);

sortExpression.set_sortOrder(sortOrder);

tableview._sortExpressions.add(sortExpression);

tableview._showSortIconForField(fieldName, sortOrder);

}

function AddFilterExpression(tableview, columnUniqueName, dataField, filterFunction, filterValue) {

var filterExpression = new Telerik.Web.UI.GridFilterExpression();

var column = tableview.getColumnByUniqueName(columnUniqueName);

column.set_filterFunction(filterFunction);

filterExpression.set_fieldName(dataField);

filterExpression.set_fieldValue(filterValue);

filterExpression.set_filterFunction(filterFunction);

filterExpression.set_columnUniqueName(columnUniqueName);

tableview._updateFilterControlValue(filterValue, columnUniqueName, filterFunction);

tableview._filterExpressions.add(filterExpression);

}

Please let me know why the code works fine for a single column sorting but if there are two columns to be sorted then sorting gets applied on the two columns and the column header color changes to denote that but the little black triangle which denotes whether
it is a ascending or descending sort is npt present for both the columns headers.

answered on 13 Jun 2013, 06:02 AM

Hello Bibhudutta,

I have carefully examined the code provided but still I am unable to point out what is causing this behavior. It would be best to provide us with a runnable project that we can debug locally. That said I would like to ask you to upload a test project and provide us with a download link. Please note that without a runnable sample it would not be possible to pinpoint what is causing the problem.

Regards,
Angel Petrov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.