Dear Telerik-Staff,
in my application, I have an aspx-Page which stores a RadGrid. I am storing all the grid filter (filters, expansions, page) in memory, I am using "Session state" to storing it and i use javaScript for call the method in c#. What should be the right way to apply filters, expansions rows and page? Thanks.
Code: <ClientSettings>
<ClientEvents OnCommand="RadGridOrders_Command" OnHierarchyCollapsed="RadGridOrders_HierarchyCollapsed" OnHierarchyExpanding="RadGridOrders_HierarchyExpanding" OnDataBound="RadGridOrders_OnDataBound"/>
</ClientSettings> <script> //START SAVE FILTER
function RadGridOrders_Command(sender, args) {
spinner.spin(spinTarget);
args.set_cancel(true);
commandName = args.get_commandName();
if (commandName == "Page" || commandName == "Filter") {
for (var i = 0; i < tableView.get_pageSize() ; i++) {
tableView.collapseItem(i);
}
SaveOrderStatusState(); //Hear i save the filter to memory
}
} function SaveOrderStatusState() {
var expandRow = new Array();
pageIndex = tableView.get_currentPageIndex();
pageSize = tableView.get_pageSize();
sortExpression = tableView.get_sortExpressions().toList();
filterExpression = tableView.get_filterExpressions().toList();
selectedOrderDate = cbxOrderDateObject.get_selectedIndex();
selectedOrderStatus = cbxOrderStatusObject.get_selectedIndex();
selectedOrderStatusOption = cbxOrderStatusOption.get_selectedIndex();
//Checking the expanded rows
for (var i = 0; i < tableView.get_dataItems().length; i++) {
var row = tableView.get_dataItems()[i];
if (row.get_expanded() == true) {
var value = {row: parseInt(row.get_itemIndexHierarchical())};
expandRow.push(value);
}
}
state.pageIndex = pageIndex;
state.pageSize = pageSize;
state.sortExpression = sortExpression;
state.filterExpression = filterExpression;
state.selectedOrderDate = selectedOrderDate;
state.selectedOrderStatus = selectedOrderStatus;
state.exandRow = expandRow;
state.selectedOrderStatusOption = selectedOrderStatusOption;
var stateJson = JSON.stringify(state);
Data.Web.Services.Frontend.SaveOrderStatusState(stateJson, callBackSaveSuccess, CallBackError);
} function callBackSaveSuccess() {
//refreshing the Grid
if (selectedOrderStatusOption == 0) {
Data.Web.Services.Frontend.GetOpenOrders(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(), tableView.get_sortExpressions().toList(), tableView.get_filterExpressions().toList(), updateGrid);
}
else {
Data.Web.Services.Frontend.GetOrders(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(), tableView.get_sortExpressions().toList(), tableView.get_filterExpressions().toList(),
updateGrid);
}
} //END SAVE FILTER //STAR GET FILTER AND APPLY //Load the page $(document).ready(function () {
tableView = $find("<%= RadGridOrders.ClientID %>").get_masterTableView();
spinner = new Spinner(spinOptions);
spinTarget = document.getElementById('<%=RadGridOrders.ClientID %>');
commandName = "Load"
spinner.spin(spinTarget);
GetOrderStatusState(); //here call the filters
});
function GetOrderStatusState() {
Data.Web.Services.Frontend.GetOrderStatusState(successResponse, CallBackError);
} function successResponse(jsonString) {
var jS = JSON.parse(jsonString);
if (jS) {
state = JSON.parse(jS);
pageIndex = state.pageIndex;
pageSize = state.pageSize;
sortExpresion = state.sortExpression;
selectedOrderDate = state.selectedOrderDate;
selectedOrderStatus = state.selectedOrderStatus;
selectedOrderStatusOption = state.selectedOrderStatusOption;
if (selectedOrderStatusOption == null) {
selectedOrderStatusOption = 0;
}
//Applying the filter for the comboboxes
cbxOrderDateObject.get_items().getItem(selectedOrderDate).select();
cbxOrderStatusObject.get_items().getItem(selectedOrderStatus).select();
cbxOrderStatusOption.get_items().getItem(selectedOrderStatusOption).select();
//re-formatting the date
if (state.filterExpression.length > 0) {
for (var i = 0; i < state.filterExpression.length; i++) {
var filter = state.filterExpression[i];
if (filter.FieldName == "OrderDate") {
filter.FieldValue = isoDateReviver(filter.FieldValue);
}
}
}
filterExpression = state.filterExpression;
}
//Applying filter
if (selectedOrderStatusOption == 0) {
Data.Web.Services.Frontend.GetOpenOrders(pageIndex * pageSize, pageSize,
sortExpression, filterExpression,
updateGrid);
}
else {
Data.Web.Services.Frontend.GetOrders(pageIndex * pageSize, pageSize,
sortExpression, filterExpression,
updateGrid);
} }
function updateGrid(result) {
tableView.set_dataSource(result.Data);
tableView.dataBind();
if (commandName == "Filter" || commandName == "Load") {
tableView.set_virtualItemCount(result.Count);
}
//Applying expanded rows. if (state.exandRow.length > 0) {
for (var i = 0; i < state.exandRow.length; i++) {
var rowItem = state.exandRow[i];
if (rowItem != null) {
tableView.expandItem(rowItem.row);
}
}
spinner.stop(spinTarget);
} //END GET FILTER AND APPLY
</script>
Thanks.
in my application, I have an aspx-Page which stores a RadGrid. I am storing all the grid filter (filters, expansions, page) in memory, I am using "Session state" to storing it and i use javaScript for call the method in c#. What should be the right way to apply filters, expansions rows and page? Thanks.
Code: <ClientSettings>
<ClientEvents OnCommand="RadGridOrders_Command" OnHierarchyCollapsed="RadGridOrders_HierarchyCollapsed" OnHierarchyExpanding="RadGridOrders_HierarchyExpanding" OnDataBound="RadGridOrders_OnDataBound"/>
</ClientSettings> <script> //START SAVE FILTER
function RadGridOrders_Command(sender, args) {
spinner.spin(spinTarget);
args.set_cancel(true);
commandName = args.get_commandName();
if (commandName == "Page" || commandName == "Filter") {
for (var i = 0; i < tableView.get_pageSize() ; i++) {
tableView.collapseItem(i);
}
SaveOrderStatusState(); //Hear i save the filter to memory
}
} function SaveOrderStatusState() {
var expandRow = new Array();
pageIndex = tableView.get_currentPageIndex();
pageSize = tableView.get_pageSize();
sortExpression = tableView.get_sortExpressions().toList();
filterExpression = tableView.get_filterExpressions().toList();
selectedOrderDate = cbxOrderDateObject.get_selectedIndex();
selectedOrderStatus = cbxOrderStatusObject.get_selectedIndex();
selectedOrderStatusOption = cbxOrderStatusOption.get_selectedIndex();
//Checking the expanded rows
for (var i = 0; i < tableView.get_dataItems().length; i++) {
var row = tableView.get_dataItems()[i];
if (row.get_expanded() == true) {
var value = {row: parseInt(row.get_itemIndexHierarchical())};
expandRow.push(value);
}
}
state.pageIndex = pageIndex;
state.pageSize = pageSize;
state.sortExpression = sortExpression;
state.filterExpression = filterExpression;
state.selectedOrderDate = selectedOrderDate;
state.selectedOrderStatus = selectedOrderStatus;
state.exandRow = expandRow;
state.selectedOrderStatusOption = selectedOrderStatusOption;
var stateJson = JSON.stringify(state);
Data.Web.Services.Frontend.SaveOrderStatusState(stateJson, callBackSaveSuccess, CallBackError);
} function callBackSaveSuccess() {
//refreshing the Grid
if (selectedOrderStatusOption == 0) {
Data.Web.Services.Frontend.GetOpenOrders(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(), tableView.get_sortExpressions().toList(), tableView.get_filterExpressions().toList(), updateGrid);
}
else {
Data.Web.Services.Frontend.GetOrders(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(), tableView.get_sortExpressions().toList(), tableView.get_filterExpressions().toList(),
updateGrid);
}
} //END SAVE FILTER //STAR GET FILTER AND APPLY //Load the page $(document).ready(function () {
tableView = $find("<%= RadGridOrders.ClientID %>").get_masterTableView();
spinner = new Spinner(spinOptions);
spinTarget = document.getElementById('<%=RadGridOrders.ClientID %>');
commandName = "Load"
spinner.spin(spinTarget);
GetOrderStatusState(); //here call the filters
});
function GetOrderStatusState() {
Data.Web.Services.Frontend.GetOrderStatusState(successResponse, CallBackError);
} function successResponse(jsonString) {
var jS = JSON.parse(jsonString);
if (jS) {
state = JSON.parse(jS);
pageIndex = state.pageIndex;
pageSize = state.pageSize;
sortExpresion = state.sortExpression;
selectedOrderDate = state.selectedOrderDate;
selectedOrderStatus = state.selectedOrderStatus;
selectedOrderStatusOption = state.selectedOrderStatusOption;
if (selectedOrderStatusOption == null) {
selectedOrderStatusOption = 0;
}
//Applying the filter for the comboboxes
cbxOrderDateObject.get_items().getItem(selectedOrderDate).select();
cbxOrderStatusObject.get_items().getItem(selectedOrderStatus).select();
cbxOrderStatusOption.get_items().getItem(selectedOrderStatusOption).select();
//re-formatting the date
if (state.filterExpression.length > 0) {
for (var i = 0; i < state.filterExpression.length; i++) {
var filter = state.filterExpression[i];
if (filter.FieldName == "OrderDate") {
filter.FieldValue = isoDateReviver(filter.FieldValue);
}
}
}
filterExpression = state.filterExpression;
}
//Applying filter
if (selectedOrderStatusOption == 0) {
Data.Web.Services.Frontend.GetOpenOrders(pageIndex * pageSize, pageSize,
sortExpression, filterExpression,
updateGrid);
}
else {
Data.Web.Services.Frontend.GetOrders(pageIndex * pageSize, pageSize,
sortExpression, filterExpression,
updateGrid);
} }
function updateGrid(result) {
tableView.set_dataSource(result.Data);
tableView.dataBind();
if (commandName == "Filter" || commandName == "Load") {
tableView.set_virtualItemCount(result.Count);
}
//Applying expanded rows. if (state.exandRow.length > 0) {
for (var i = 0; i < state.exandRow.length; i++) {
var rowItem = state.exandRow[i];
if (rowItem != null) {
tableView.expandItem(rowItem.row);
}
}
spinner.stop(spinTarget);
} //END GET FILTER AND APPLY
</script>
Thanks.
7 Answers, 1 is accepted
0
Hello Teo,
I am experiencing difficulties understanding the scenario. Now if I am correct the grid settings are stored server-side in the session. Is there a reason why you can not apply them server-side? Could you please elaborate more on how do you want to apply the settings, server-side or on the client? If you could provide the whole page code that would be great. This will facilitate us to give you a more precise answer.
All the best,
Angel Petrov
the Telerik team
I am experiencing difficulties understanding the scenario. Now if I am correct the grid settings are stored server-side in the session. Is there a reason why you can not apply them server-side? Could you please elaborate more on how do you want to apply the settings, server-side or on the client? If you could provide the whole page code that would be great. This will facilitate us to give you a more precise answer.
All the best,
Angel Petrov
the Telerik team
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 their blog feed now.
0
Teo
Top achievements
Rank 1
Rank 1
answered on 19 Apr 2013, 07:44 PM
Hi, thanks for you quick answer,
My data source is web services, i need to save my filter from client side but i need to set my grid from code behind because i am using web services data.
this is the rest of the code.
<div>
<telerik:RadComboBox ID="uxOrderType"
Height="100%"
AppendDataBoundItems="true"
Width="108px"
runat="server"
OnClientSelectedIndexChanged="OrderTypeIndexChanged"
OnClientLoad="OrderTypeLoad">
<Items>
<telerik:RadComboBoxItem Text="Order Open" Value="OrderOpen"/>
<telerik:RadComboBoxItem Text="Order History" Value="OrderHistory" />
</Items>
</telerik:RadComboBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Label ID="StatusLabel" runat="server"></asp:Label>
</div>
<telerik:GridTextBoxColumnEditor runat="server" ID="CustomerPONumberEditor" >
<TextBoxStyle Width="50px" BorderColor="Yellow" BackColor="Window"/>
</telerik:GridTextBoxColumnEditor>
<telerik:RadGrid ID="RadGridOrders" AllowFilteringByColumn="true" FilterItemStyle-CssClass="" runat="server"
EnableEmbeddedSkins="true" Skin="Default" GridLines="None" AllowPaging="true" AllowSorting="true" PageSize="10" FilterMenu-OnClientLoad="OnLoadGrid" EnableLinqExpressions="false" OnDataBound="SaveSetting">
<ClientSettings>
<ClientEvents OnCommand="RadGridOrders_Command" OnHierarchyCollapsed="RadGridOrders_HierarchyCollapsed" OnHierarchyExpanding="RadGridOrders_HierarchyExpanding" />
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" ClientDataKeyNames="SalesOrderHeaderID" AllowMultiColumnSorting="true">
<Columns>
<telerik:GridBoundColumn SortExpression="CustomerPONumber" DataField="CustomerPONumber" UniqueName="CustomerPONumber" HeaderText="Purchase Order #" CurrentFilterFunction="EqualTo" FilterDelay="4000" ShowFilterIcon="false" />
<telerik:GridBoundColumn SortExpression="SalesOrderNumber" DataField="SalesOrderNumber" UniqueName="SalesOrderNumber" HeaderText="CT Order #" CurrentFilterFunction="EqualTo" FilterDelay="4000" ShowFilterIcon="false" />
<telerik:GridBoundColumn SortExpression="OrderDate" DataField="OrderDate" HeaderText="Order Date" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}">
<HeaderStyle Width="180px"></HeaderStyle>
<ItemStyle Height="35px"></ItemStyle>
<FilterTemplate>
<div >
<div id="DivOrderDateFilter">
<telerik:RadComboBox ID="rcbOrderDateFilter"
Height="100%"
AppendDataBoundItems="true"
Width="108px"
runat="server"
OnClientSelectedIndexChanged="OrderDateIndexChanged"
OnClientLoad="OnLoadOrderDate">
<Items>
<telerik:RadComboBoxItem Text="Any" Value="Any"/>
<telerik:RadComboBoxItem Text="After" Value="GreaterThan" />
<telerik:RadComboBoxItem Text="Before" Value="LessThan" />
<telerik:RadComboBoxItem Text="Exactly" Value="EqualTo" />
<telerik:RadComboBoxItem Text="Between" Value="Between" />
</Items>
</telerik:RadComboBox>
</div>
<div id="DivFromDate" >
<label id="lbDateFrom" for="RadFromDate" style ="padding: 0px 0px 0px 33px"></label>
<telerik:RadDatePicker ID="RadFromDate" runat="server" Calendar-EnableNavigation="true" DateInput-DisplayDateFormat="MM/dd/yyyy" Skin="Default" Width="105px" Enabled="true"
DateInput-ClientEvents-OnLoad="OnClientLoadDateFrom" />
<input type="button" title="Filter" onclick="javascript: OrderDateFilter();" class="rgFilter"/>
</div>
<div id="DivToDate" style="display:none; text-align:left" >
<label for="RadDateTo" style="padding:0px 0px 0px 14px">To:</label>
<telerik:RadDatePicker ID="RadDateTo" runat="server" DateInput-DisplayDateFormat="MM/dd/yyyy" Skin="Default" Width="105px"
DateInput-ClientEvents-OnLoad="OnClientLoadDateTo"/>
</div>
</div>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
var filter = "NoFilter";
var _arguments = '';
var cbxOrderDateObject;
var dFrom, dTo;
var DateFromObject;
var DateFromLabel;
var DateToObject, cbxOrderType;
var Grid;
function OnLoadOrderDate(sender) {
cbxOrderDateObject = sender;
}
function OrderTypeLoad(sender) {
cbxOrderType = sender;
}
function OnLoadGrid(sender, args) {
Grid = sender;
}
function OnClientLoadDateFrom(sender) {
var cur_date = new Date();
DateFromObject = sender;
var date = new Date(cur_date.getFullYear(), cur_date.getMonth() , 1) ;
DateFromObject.set_value(date);
}
function OnClientLoadDateTo(sender) {
DateToObject = sender;
}
function OrderDateIndexChanged(sender, args) {
var parameter = args.get_item().get_value();
var DateFromlabel = document.getElementById('lbDateFrom');
DateFromlabel.textContent = "";
DateFromlabel.style.padding = "0px 0px 0px 33px";
DateToObject.set_value(null);
var curr_date = new Date();
var lastDateofTheMonth = new Date(curr_date.getFullYear(), curr_date.getMonth(), 0);
//setting the filter values from memory in Page_load
if (!orderDateStateIsLoaded) {
if (filterExpression != null) {
for (var i = 0; i < filterExpression.length; i++) {
var filter = filterExpression[i];
if (filter.FieldName == "OrderDate") {
if (filter.FieldValue) {
if (filter.FieldValue.toString().indexOf(",") !== -1) {
var value = filter.FieldValue.split(",");
DateFromObject.set_value(new Date(value[0]));
lastDateofTheMonth = new Date(value[1]);
}
else {
DateFromObject.set_value(filter.FieldValue);
}
}
}
}
}
orderDateStateIsLoaded = true;
}
//if between selected apply the date format MM/dd/yyyy HH:mm:ss
if (parameter == "Between") {
DateFromlabel.textContent = "From:";
DateFromlabel.style.padding = "0px 0px 0px 0px";
DateToObject.set_value(lastDateofTheMonth);
DivToDate.style.display = 'block';//Display ToDate
} else {
DivToDate.style.display = 'none'; //Hide ToDate
}
}
function OrderDateFilter(sender, args) {
//set _argument and filter variables
setValues();
IsToBeSaved = true;
if (cbxOrderDateObject.get_value() == "Any") {
tableView.filter("OrderDate", _arguments, filter);
} else {
if (_arguments) {
tableView.filter("OrderDate", _arguments, filter);
} else {
alert("Please enter valid date");
IsToBeSaved = false;
}
}
}
function setValues() {
filter = cbxOrderDateObject.get_value();
var dFrom = DateFromObject.get_value();
var dTo = DateToObject.get_value();
_arguments = '';
if (filter == "Any") {
filter = "NoFilter";
_arguments = null;
}
else {
if (filter == "Between") {
if (dFrom !== null) {//if has value apply the format
dFrom = setNewFormatDate(dFrom);
_arguments = dFrom;
}
if (dTo !== null) {//if has value apply the format
dTo = setNewFormatDate(dTo);
if (dFrom && dTo) { //adding comma ','
_arguments += ',' + dTo
} else {
_arguments += dTo
}
}
if (dFrom = null || dTo == null) {
_arguments = '';
}
} else {
dTo = "";
$find("ctl00_Content_ctl00_RadGridOrders_ctl00_ctl02_ctl02_RadDateTo_dateInput").set_value(null);
_arguments = new Date(dFrom);
}
}
}
function setNewFormatDate(selectedDate) {
var sOriginalDate = selectedDate;
var oDate = new Date(sOriginalDate);
var sNewDate = [oDate.getFullYear(),
('0' + (oDate.getMonth() + 1)).slice(-2), //format 00 if less than 10 digits
('0' + (oDate.getDate())).slice(-2)].join('-') +
' ' +
[('0' + (oDate.getHours())).slice(-2),
('0' + (oDate.getMinutes())).slice(-2),
('0' + (oDate.getSeconds())).slice(-2)].join(':');
return sNewDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderStatusName" DataField="OrderStatusName" HeaderText="Order Status" >
<ItemStyle Width="5px"/>
<FilterTemplate>
<telerik:RadComboBox ID="RadComboBoxOrderStatus"
Height="100px" AppendDataBoundItems="true"
Width="120px"
OnClientLoad="OnLoadOrderStatus"
runat="server" OnClientSelectedIndexChanged="OrderStatusIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" Value="" />
<telerik:RadComboBoxItem Text="In Process" Value="0" />
<telerik:RadComboBoxItem Text="Shipped" Value="1" />
<telerik:RadComboBoxItem Text="Completed" Value="2" />
<telerik:RadComboBoxItem Text="On Hold" Value="3" />
<telerik:RadComboBoxItem Text="Cancelled" Value="4" />
<telerik:RadComboBoxItem Text="Deleted" Value="5" />
<telerik:RadComboBoxItem Text="Unknown" Value="6" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlockOrderStatus" runat="server">
<script type="text/javascript">
var cbxOrderStatusObject;
function OrderStatusIndexChanged(sender, args) {
if (orderStatusStateIsLoaded) {
IsToBeSaved = true;
tableView.filter("OrderStatusName", args.get_item().get_value(), "EqualTo");
}
else {
orderStatusStateIsLoaded = true;
}
}
function OnLoadOrderStatus(sender, args) {
cbxOrderStatusObject = sender;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
</Columns>
<NestedViewTemplate>
<telerik:RadGrid ID="RadGridOrderLines" AllowFilteringByColumn="false" EnableEmbeddedSkins="true" Skin="Default" runat="server"
GridLines="None" AllowPaging="true" AllowSorting="false" PageSize="10" MasterTableView-AllowFilteringByColumn="false" AutoGenerateColumns="false">
<ClientSettings>
<%--<ClientEvents OnCommand="RadGridOrders_Command" OnHierarchyCollapsed="RadGridOrders_HierarchyCollapsed" OnHierarchyExpanding="RadGridOrders_HierarchyExpanding" OnDataBound="RadGridOrders_OnDataBound"/>--%>
</ClientSettings>
<ClientSettings>
<ClientEvents OnCommand="RadGridOrderLines_Command" />
</ClientSettings>
<MasterTableView ClientDataKeyNames="SalesOrderLineID">
<Columns>
<telerik:GridHyperLinkColumn UniqueName="AddToCart" HeaderText="Add to Cart" AllowFiltering="false" DataNavigateUrlFormatString="javascript:AddToCart(\'{0}\')" DataNavigateUrlFields="ItemOrderCode"
ImageUrl="~/App_Themes/Online Sales/images/os-cart.png">
<ItemStyle Width="9%"/>
<HeaderStyle Width="9%" />
</telerik:GridHyperLinkColumn>
<telerik:GridBoundColumn SortExpression="Position" DataField="Position" HeaderText="Line #" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="ItemOrderCode" DataField="ItemOrderCode" HeaderText="Order Code" AllowFiltering="true" />
<telerik:GridBoundColumn SortExpression="ItemDescription" DataField="ItemDescription" HeaderText="Description" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="OrderedQuantity" DataField="OrderedQuantity" HeaderText="Qty" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="Amount" DataField="Amount" HeaderText="Total Price" DataFormatString="{0:C}" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="PlannedDeliveryDate" DataField="PlannedDeliveryDate" HeaderText="Ship Date"
DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="OrderLineStatusName" DataField="OrderLineStatusName" HeaderText="Status" AllowFiltering="true" />
<telerik:GridBoundColumn SortExpression="TrackingReference" DataField="TrackingReference" HeaderText="Tracking #" ItemStyle-BorderWidth="1px">
<ItemStyle Width="9%" />
<HeaderStyle Width="9%" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="InvoiceDate" DataField="InvoiceDate" HeaderText="Invoice Date" AllowFiltering="true" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}"/>
<telerik:GridBoundColumn SortExpression="InvoiceNumber" DataField="InvoiceNumber" HeaderText="Invoice #" AllowFiltering="true">
</telerik:GridBoundColumn>
</Columns>
<NoRecordsTemplate> No records match your request.</NoRecordsTemplate>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>
</NestedViewTemplate>
<NoRecordsTemplate><div>No records match your request.</div></NoRecordsTemplate>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>
</div>
<div id="dialog" title="Add to Cart" style="display:none">
<p id="myDialogText"></p>
</div>
My data source is web services, i need to save my filter from client side but i need to set my grid from code behind because i am using web services data.
this is the rest of the code.
<div>
<telerik:RadComboBox ID="uxOrderType"
Height="100%"
AppendDataBoundItems="true"
Width="108px"
runat="server"
OnClientSelectedIndexChanged="OrderTypeIndexChanged"
OnClientLoad="OrderTypeLoad">
<Items>
<telerik:RadComboBoxItem Text="Order Open" Value="OrderOpen"/>
<telerik:RadComboBoxItem Text="Order History" Value="OrderHistory" />
</Items>
</telerik:RadComboBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Label ID="StatusLabel" runat="server"></asp:Label>
</div>
<telerik:GridTextBoxColumnEditor runat="server" ID="CustomerPONumberEditor" >
<TextBoxStyle Width="50px" BorderColor="Yellow" BackColor="Window"/>
</telerik:GridTextBoxColumnEditor>
<telerik:RadGrid ID="RadGridOrders" AllowFilteringByColumn="true" FilterItemStyle-CssClass="" runat="server"
EnableEmbeddedSkins="true" Skin="Default" GridLines="None" AllowPaging="true" AllowSorting="true" PageSize="10" FilterMenu-OnClientLoad="OnLoadGrid" EnableLinqExpressions="false" OnDataBound="SaveSetting">
<ClientSettings>
<ClientEvents OnCommand="RadGridOrders_Command" OnHierarchyCollapsed="RadGridOrders_HierarchyCollapsed" OnHierarchyExpanding="RadGridOrders_HierarchyExpanding" />
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" ClientDataKeyNames="SalesOrderHeaderID" AllowMultiColumnSorting="true">
<Columns>
<telerik:GridBoundColumn SortExpression="CustomerPONumber" DataField="CustomerPONumber" UniqueName="CustomerPONumber" HeaderText="Purchase Order #" CurrentFilterFunction="EqualTo" FilterDelay="4000" ShowFilterIcon="false" />
<telerik:GridBoundColumn SortExpression="SalesOrderNumber" DataField="SalesOrderNumber" UniqueName="SalesOrderNumber" HeaderText="CT Order #" CurrentFilterFunction="EqualTo" FilterDelay="4000" ShowFilterIcon="false" />
<telerik:GridBoundColumn SortExpression="OrderDate" DataField="OrderDate" HeaderText="Order Date" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}">
<HeaderStyle Width="180px"></HeaderStyle>
<ItemStyle Height="35px"></ItemStyle>
<FilterTemplate>
<div >
<div id="DivOrderDateFilter">
<telerik:RadComboBox ID="rcbOrderDateFilter"
Height="100%"
AppendDataBoundItems="true"
Width="108px"
runat="server"
OnClientSelectedIndexChanged="OrderDateIndexChanged"
OnClientLoad="OnLoadOrderDate">
<Items>
<telerik:RadComboBoxItem Text="Any" Value="Any"/>
<telerik:RadComboBoxItem Text="After" Value="GreaterThan" />
<telerik:RadComboBoxItem Text="Before" Value="LessThan" />
<telerik:RadComboBoxItem Text="Exactly" Value="EqualTo" />
<telerik:RadComboBoxItem Text="Between" Value="Between" />
</Items>
</telerik:RadComboBox>
</div>
<div id="DivFromDate" >
<label id="lbDateFrom" for="RadFromDate" style ="padding: 0px 0px 0px 33px"></label>
<telerik:RadDatePicker ID="RadFromDate" runat="server" Calendar-EnableNavigation="true" DateInput-DisplayDateFormat="MM/dd/yyyy" Skin="Default" Width="105px" Enabled="true"
DateInput-ClientEvents-OnLoad="OnClientLoadDateFrom" />
<input type="button" title="Filter" onclick="javascript: OrderDateFilter();" class="rgFilter"/>
</div>
<div id="DivToDate" style="display:none; text-align:left" >
<label for="RadDateTo" style="padding:0px 0px 0px 14px">To:</label>
<telerik:RadDatePicker ID="RadDateTo" runat="server" DateInput-DisplayDateFormat="MM/dd/yyyy" Skin="Default" Width="105px"
DateInput-ClientEvents-OnLoad="OnClientLoadDateTo"/>
</div>
</div>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
var filter = "NoFilter";
var _arguments = '';
var cbxOrderDateObject;
var dFrom, dTo;
var DateFromObject;
var DateFromLabel;
var DateToObject, cbxOrderType;
var Grid;
function OnLoadOrderDate(sender) {
cbxOrderDateObject = sender;
}
function OrderTypeLoad(sender) {
cbxOrderType = sender;
}
function OnLoadGrid(sender, args) {
Grid = sender;
}
function OnClientLoadDateFrom(sender) {
var cur_date = new Date();
DateFromObject = sender;
var date = new Date(cur_date.getFullYear(), cur_date.getMonth() , 1) ;
DateFromObject.set_value(date);
}
function OnClientLoadDateTo(sender) {
DateToObject = sender;
}
function OrderDateIndexChanged(sender, args) {
var parameter = args.get_item().get_value();
var DateFromlabel = document.getElementById('lbDateFrom');
DateFromlabel.textContent = "";
DateFromlabel.style.padding = "0px 0px 0px 33px";
DateToObject.set_value(null);
var curr_date = new Date();
var lastDateofTheMonth = new Date(curr_date.getFullYear(), curr_date.getMonth(), 0);
//setting the filter values from memory in Page_load
if (!orderDateStateIsLoaded) {
if (filterExpression != null) {
for (var i = 0; i < filterExpression.length; i++) {
var filter = filterExpression[i];
if (filter.FieldName == "OrderDate") {
if (filter.FieldValue) {
if (filter.FieldValue.toString().indexOf(",") !== -1) {
var value = filter.FieldValue.split(",");
DateFromObject.set_value(new Date(value[0]));
lastDateofTheMonth = new Date(value[1]);
}
else {
DateFromObject.set_value(filter.FieldValue);
}
}
}
}
}
orderDateStateIsLoaded = true;
}
//if between selected apply the date format MM/dd/yyyy HH:mm:ss
if (parameter == "Between") {
DateFromlabel.textContent = "From:";
DateFromlabel.style.padding = "0px 0px 0px 0px";
DateToObject.set_value(lastDateofTheMonth);
DivToDate.style.display = 'block';//Display ToDate
} else {
DivToDate.style.display = 'none'; //Hide ToDate
}
}
function OrderDateFilter(sender, args) {
//set _argument and filter variables
setValues();
IsToBeSaved = true;
if (cbxOrderDateObject.get_value() == "Any") {
tableView.filter("OrderDate", _arguments, filter);
} else {
if (_arguments) {
tableView.filter("OrderDate", _arguments, filter);
} else {
alert("Please enter valid date");
IsToBeSaved = false;
}
}
}
function setValues() {
filter = cbxOrderDateObject.get_value();
var dFrom = DateFromObject.get_value();
var dTo = DateToObject.get_value();
_arguments = '';
if (filter == "Any") {
filter = "NoFilter";
_arguments = null;
}
else {
if (filter == "Between") {
if (dFrom !== null) {//if has value apply the format
dFrom = setNewFormatDate(dFrom);
_arguments = dFrom;
}
if (dTo !== null) {//if has value apply the format
dTo = setNewFormatDate(dTo);
if (dFrom && dTo) { //adding comma ','
_arguments += ',' + dTo
} else {
_arguments += dTo
}
}
if (dFrom = null || dTo == null) {
_arguments = '';
}
} else {
dTo = "";
$find("ctl00_Content_ctl00_RadGridOrders_ctl00_ctl02_ctl02_RadDateTo_dateInput").set_value(null);
_arguments = new Date(dFrom);
}
}
}
function setNewFormatDate(selectedDate) {
var sOriginalDate = selectedDate;
var oDate = new Date(sOriginalDate);
var sNewDate = [oDate.getFullYear(),
('0' + (oDate.getMonth() + 1)).slice(-2), //format 00 if less than 10 digits
('0' + (oDate.getDate())).slice(-2)].join('-') +
' ' +
[('0' + (oDate.getHours())).slice(-2),
('0' + (oDate.getMinutes())).slice(-2),
('0' + (oDate.getSeconds())).slice(-2)].join(':');
return sNewDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderStatusName" DataField="OrderStatusName" HeaderText="Order Status" >
<ItemStyle Width="5px"/>
<FilterTemplate>
<telerik:RadComboBox ID="RadComboBoxOrderStatus"
Height="100px" AppendDataBoundItems="true"
Width="120px"
OnClientLoad="OnLoadOrderStatus"
runat="server" OnClientSelectedIndexChanged="OrderStatusIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" Value="" />
<telerik:RadComboBoxItem Text="In Process" Value="0" />
<telerik:RadComboBoxItem Text="Shipped" Value="1" />
<telerik:RadComboBoxItem Text="Completed" Value="2" />
<telerik:RadComboBoxItem Text="On Hold" Value="3" />
<telerik:RadComboBoxItem Text="Cancelled" Value="4" />
<telerik:RadComboBoxItem Text="Deleted" Value="5" />
<telerik:RadComboBoxItem Text="Unknown" Value="6" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlockOrderStatus" runat="server">
<script type="text/javascript">
var cbxOrderStatusObject;
function OrderStatusIndexChanged(sender, args) {
if (orderStatusStateIsLoaded) {
IsToBeSaved = true;
tableView.filter("OrderStatusName", args.get_item().get_value(), "EqualTo");
}
else {
orderStatusStateIsLoaded = true;
}
}
function OnLoadOrderStatus(sender, args) {
cbxOrderStatusObject = sender;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
</Columns>
<NestedViewTemplate>
<telerik:RadGrid ID="RadGridOrderLines" AllowFilteringByColumn="false" EnableEmbeddedSkins="true" Skin="Default" runat="server"
GridLines="None" AllowPaging="true" AllowSorting="false" PageSize="10" MasterTableView-AllowFilteringByColumn="false" AutoGenerateColumns="false">
<ClientSettings>
<%--<ClientEvents OnCommand="RadGridOrders_Command" OnHierarchyCollapsed="RadGridOrders_HierarchyCollapsed" OnHierarchyExpanding="RadGridOrders_HierarchyExpanding" OnDataBound="RadGridOrders_OnDataBound"/>--%>
</ClientSettings>
<ClientSettings>
<ClientEvents OnCommand="RadGridOrderLines_Command" />
</ClientSettings>
<MasterTableView ClientDataKeyNames="SalesOrderLineID">
<Columns>
<telerik:GridHyperLinkColumn UniqueName="AddToCart" HeaderText="Add to Cart" AllowFiltering="false" DataNavigateUrlFormatString="javascript:AddToCart(\'{0}\')" DataNavigateUrlFields="ItemOrderCode"
ImageUrl="~/App_Themes/Online Sales/images/os-cart.png">
<ItemStyle Width="9%"/>
<HeaderStyle Width="9%" />
</telerik:GridHyperLinkColumn>
<telerik:GridBoundColumn SortExpression="Position" DataField="Position" HeaderText="Line #" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="ItemOrderCode" DataField="ItemOrderCode" HeaderText="Order Code" AllowFiltering="true" />
<telerik:GridBoundColumn SortExpression="ItemDescription" DataField="ItemDescription" HeaderText="Description" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="OrderedQuantity" DataField="OrderedQuantity" HeaderText="Qty" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="Amount" DataField="Amount" HeaderText="Total Price" DataFormatString="{0:C}" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="PlannedDeliveryDate" DataField="PlannedDeliveryDate" HeaderText="Ship Date"
DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}" AllowFiltering="true"/>
<telerik:GridBoundColumn SortExpression="OrderLineStatusName" DataField="OrderLineStatusName" HeaderText="Status" AllowFiltering="true" />
<telerik:GridBoundColumn SortExpression="TrackingReference" DataField="TrackingReference" HeaderText="Tracking #" ItemStyle-BorderWidth="1px">
<ItemStyle Width="9%" />
<HeaderStyle Width="9%" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="InvoiceDate" DataField="InvoiceDate" HeaderText="Invoice Date" AllowFiltering="true" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}"/>
<telerik:GridBoundColumn SortExpression="InvoiceNumber" DataField="InvoiceNumber" HeaderText="Invoice #" AllowFiltering="true">
</telerik:GridBoundColumn>
</Columns>
<NoRecordsTemplate> No records match your request.</NoRecordsTemplate>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>
</NestedViewTemplate>
<NoRecordsTemplate><div>No records match your request.</div></NoRecordsTemplate>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>
</div>
<div id="dialog" title="Add to Cart" style="display:none">
<p id="myDialogText"></p>
</div>
0
Hi Teo,
Such an approach is demonstrated in this demo. As you can see in the example provided the filter and sort expressions are obtained client-side but the data is extracted using a PagMethod.
Regards,
Angel Petrov
the Telerik team
Such an approach is demonstrated in this demo. As you can see in the example provided the filter and sort expressions are obtained client-side but the data is extracted using a PagMethod.
Regards,
Angel Petrov
the Telerik team
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 their blog feed now.
0
Teo
Top achievements
Rank 1
Rank 1
answered on 26 Apr 2013, 09:09 PM
Sorry for not being so explicit, I have been reading the documentation. But I do not find much help.
I need to remember PageIndex, PageSize, multiple rows expanded, filterExpression, SortExpression.
Currently working on the client side and I have the following:
/ / Global Variables
var state = new Object ();
var tableView = $ find ("<% = RadGridOrders.ClientID%>"). get_masterTableView ();
/ / SAVING THE FILTERS
saveState function () {
tableView.get_currentPageIndex state.PageIndex = ();
tableView.get_pageSize state.PageSize = ();
tableView.get_filterExpressions state.filterExpressions = (). toList ();
tableView.get_sortExpression state.sortExpression = (). toList ();
/ / Getting the expanded rows from the grid
for (var i = 0; i <tableView.get_dataItems (). length; i + +) {
var row = tableView.get_dataItems () [i];
if (row.get_expanded () == true) {
var rowValue = {row: parseInt (row.get_itemIndexHierarchical ())};
expandedRows.push (value);
}
}
state.ExpandedRows = expandedRows;
/ / Converting to json string
stateJson var = JSON.stringify (state);
SaveToSessionMemory ();
refreshTheGrid ();
}
getStateFromSessionMemory function (resultString) {
var parseToJsonString = JSON.parse (resultString);
if (parseToJsonString) {
state = JSON.parse (parseToJsonString)
}
refreshTheGrid ();
}
refreshTheGrid function () {
HERE IS MY QUESTION:
WHAT SHOULD BE THE BEST WAY TO APPLY FOR FILTERS AND MULTIPLE ROWS EXPANDEDS?
}
THANKS.
I need to remember PageIndex, PageSize, multiple rows expanded, filterExpression, SortExpression.
Currently working on the client side and I have the following:
/ / Global Variables
var state = new Object ();
var tableView = $ find ("<% = RadGridOrders.ClientID%>"). get_masterTableView ();
/ / SAVING THE FILTERS
saveState function () {
tableView.get_currentPageIndex state.PageIndex = ();
tableView.get_pageSize state.PageSize = ();
tableView.get_filterExpressions state.filterExpressions = (). toList ();
tableView.get_sortExpression state.sortExpression = (). toList ();
/ / Getting the expanded rows from the grid
for (var i = 0; i <tableView.get_dataItems (). length; i + +) {
var row = tableView.get_dataItems () [i];
if (row.get_expanded () == true) {
var rowValue = {row: parseInt (row.get_itemIndexHierarchical ())};
expandedRows.push (value);
}
}
state.ExpandedRows = expandedRows;
/ / Converting to json string
stateJson var = JSON.stringify (state);
SaveToSessionMemory ();
refreshTheGrid ();
}
getStateFromSessionMemory function (resultString) {
var parseToJsonString = JSON.parse (resultString);
if (parseToJsonString) {
state = JSON.parse (parseToJsonString)
}
refreshTheGrid ();
}
refreshTheGrid function () {
HERE IS MY QUESTION:
WHAT SHOULD BE THE BEST WAY TO APPLY FOR FILTERS AND MULTIPLE ROWS EXPANDEDS?
}
THANKS.
0
Hi Teo,
You should not mix client with server binding, they do not work together. Pick one kind of a binding and try to insulate the problem in sample page that we can test here. It is hard to answer your questions, without having your exact code.
Kind regards,
Vasil
the Telerik team
You should not mix client with server binding, they do not work together. Pick one kind of a binding and try to insulate the problem in sample page that we can test here. It is hard to answer your questions, without having your exact code.
Kind regards,
Vasil
the Telerik team
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 their blog feed now.
0
Teo
Top achievements
Rank 1
Rank 1
answered on 01 May 2013, 02:43 PM
I really appreciate your help, this help me a lot to understand how should I implement my code.
Another thing is how I apply the expanded rows previously stored in memory?.
GetExpandeRows(response);
function response(result){
}
The Question is how to apply this to my grid on the pageLoad event.
GENERAL GRID SETTINGS.
<telerik:RadGrid ShowStatusBar="true" ID="RadGridHeader" AutoGenerateColumns="false">
<PagerStyle Mode="NextPrevAndNumeric" />
DataKeyNames="SalesOrderHeaderID" width="100%" <MasterTableView AllowMultiColumnSorting="true">
<DetailTables>
Name="OrderDetails" DataKeyNames="SalesOrderHeaderID" <telerik:GridTableView width="100%">
<Columns>
</ Columns>
</ telerik: GridTableView>
</ DetailTables>
<Columns>
</ Columns>
</ MasterTableView>
</ telerik: RadGrid>
Another thing is how I apply the expanded rows previously stored in memory?.
GetExpandeRows(response);
function response(result){
}
The Question is how to apply this to my grid on the pageLoad event.
GENERAL GRID SETTINGS.
<telerik:RadGrid ShowStatusBar="true" ID="RadGridHeader" AutoGenerateColumns="false">
<PagerStyle Mode="NextPrevAndNumeric" />
DataKeyNames="SalesOrderHeaderID" width="100%" <MasterTableView AllowMultiColumnSorting="true">
<DetailTables>
Name="OrderDetails" DataKeyNames="SalesOrderHeaderID" <telerik:GridTableView width="100%">
<Columns>
</ Columns>
</ telerik: GridTableView>
</ DetailTables>
<Columns>
</ Columns>
</ MasterTableView>
</ telerik: RadGrid>
0
Hi Teo,
If you have stored the items client side, you can use the expandItem function of the MasterTableView to expand the items.
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-expanditem.html
Note that in order to avoid PostBack in-between the expanding of all items you have to be sure that you are using Client HierarchyLoadMode for the given TableView.
All the best,
Vasil
the Telerik team
If you have stored the items client side, you can use the expandItem function of the MasterTableView to expand the items.
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-expanditem.html
Note that in order to avoid PostBack in-between the expanding of all items you have to be sure that you are using Client HierarchyLoadMode for the given TableView.
All the best,
Vasil
the Telerik team
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 their blog feed now.