I have a grid in which I have 3 columns where I set the Aggregate to either sum or count. The footers appear properly when the grid is loaded initially (populated via the _NeedDataSource function), but when I rebind client side, the aggregate values are not updated. Is there an easy way to do this?
Regards,
Cynthia
Regards,
Cynthia
7 Answers, 1 is accepted
0
Hi Cynthia,
May I ask to provide additional information about your scenario? Could you specify why you need to rebind the grid client-side? Are you performing some changes to the grid, or do you change the data source which the grid is bound to. It will be helpful if you post the page mark-up declaration and the code-behind.
Best Regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
May I ask to provide additional information about your scenario? Could you specify why you need to rebind the grid client-side? Are you performing some changes to the grid, or do you change the data source which the grid is bound to. It will be helpful if you post the page mark-up declaration and the code-behind.
Best Regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Cynthia
Top achievements
Rank 1
Rank 1
answered on 26 Mar 2009, 07:14 PM
Hi Georgi,
My grid displays purchase orders from my database. I am using client side data binding after the first load. The reason I am doing this is for performance purposes (the client side data binding is much faster than server side). So my aggregates count the number of purhcase orders in the grid and they sum the tonnage and quantity ordered. When my users change the filters and I bind client side I would like those numbers to change to reflect the new data. Somewhat like updating the number of rows returned (set_virtualItemCount).
Regards,
Cynthia
Here is the content of the page:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="cntPurchaseOrder" ContentPlaceHolderID="cphMainContent" runat="server">
<asp:ScriptManagerProxy ID="smpPurchaseOrder" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Prototype.js" />
<asp:ScriptReference Path="~/PurchaseOrders/Scripts/PurchaseOrder.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="~/PurchaseOrders/wsPurchaseOrder.asmx" />
</Services>
</asp:ScriptManagerProxy>
<telerik:RadFormDecorator ID="fdPurchaseOrder" runat="server" DecoratedControls="CheckBoxes, Buttons" />
<table style="border-collapse: collapse">
<tr>
<td><telerik:RadDatePicker ID="dpStartDate" runat="server" Culture="English (United States)"
Width="100px" ToolTip="Start Date">
<Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
</Calendar>
<DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker>
to
<telerik:RadDatePicker ID="dpEndDate" runat="server" Culture="English (United States)"
Width="100px" ToolTip="End Date">
<Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
</Calendar>
<DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker></td>
<td><asp:RadioButtonList ID="rbPSUserMonitored" runat="server" RepeatDirection="Horizontal"
ToolTip="Print Sites">
<asp:ListItem Value="false">All Print Sites</asp:ListItem>
<asp:ListItem Value="true" Selected="True">User Monitored Print Sites</asp:ListItem>
</asp:RadioButtonList></td>
<td style="border-style: solid none none solid; border-width: 1px"><asp:CheckBox ID="chkNew" runat="server" Text="New" /></td>
<td style="border-style: solid solid none none; border-width: 1px"><asp:CheckBox ID="chkSupplierAccepted" runat="server" Text="Supplier Accepted" /></td>
<td>
<button id="btnRefreshGrid" runat="server" style="width: 100px">
<img id="imgRefreshGrid" alt="Refresh Grid" src="../App_Images/RefreshGrid.png" style="border:none"/> Refresh Grid
</button>
</td>
</tr>
<tr>
<td><telerik:RadComboBox ID="cbSupplier" runat="server" Width="250px" EmptyMessage="Supplier Name - minimum 2 characters"
ToolTip="Supplier Name" OnClientItemsRequesting="comboOnClientItemsRequesting" OnClientTextChange="comboOnClientTextChange"
EnableLoadOnDemand="True" WebServiceSettings-Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
WebServiceSettings-Method="GetSupplierList">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox></td>
<td><telerik:RadComboBox ID="cbPONumber" runat="server"
Width="250px"
EmptyMessage="Customer Order No. - minimum 2 characters"
ToolTip="Customer Order No."
OnClientItemsRequesting="comboOnClientItemsRequesting"
OnClientTextChange="comboOnClientTextChange"
EnableLoadOnDemand="True"
WebServiceSettings-Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
WebServiceSettings-Method="GetPOList">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox></td>
<td style="border-width: 1px; border-style: none none none solid"><asp:CheckBox ID="chkChanged" runat="server" Text="Changed" /></td>
<td style="border-style: none solid none none; border-width: 1px"><asp:CheckBox ID="chkChangePending" runat="server" Text="Change Pending" /></td>
<td>
<button id="btnResetFilters" runat="server" style="width: 100px">
<img id="imgResetFilters" alt="Reset Filters" src="../App_Images/ResetFilters.png" style="border:none"/> Reset Filters
</button>
</td>
</tr>
<tr>
<td>
<telerik:RadComboBox runat="server"
ID="cbCorporateMulti"
Width="250px"
DropDownWidth="600px"
OnClientItemsRequesting ="comboOnClientItemsRequesting"
OnClientItemsRequested="cbCorporateMulti_OnClientItemsRequested"
OnClientSelectedIndexChanged="cbCorporateMulti_OnClientSelectedIndexChanged"
OnClientTextChange="comboOnClientTextChange"
EnableLoadOnDemand="true"
EmptyMessage="Corporate Name - minimum 2 characters">
<HeaderTemplate>
<ul style="list-style:none">
<li>
<span style="width:200px; float:left">Corporate Name</span>
<span style="width:100px; float:left">Tonnage Ordered</span>
<span style="width:100px; float:left">Quantity Ordered</span>
<span style="width:100px; float:left">Total Print Sites</span>
</li>
</ul>
</HeaderTemplate>
<WebServiceSettings Method="GetCorporateData" Path="~/PurchaseOrders/wsPurchaseOrder.asmx" />
</telerik:RadComboBox>
</td>
<td>
<telerik:RadComboBox runat="server"
ID="cbPrintSiteMulti"
Width="250px"
DropDownWidth="600px"
OnClientItemsRequesting ="comboOnClientItemsRequesting"
OnClientItemsRequested="cbPrintSiteMulti_OnClientItemsRequested"
EnableLoadOnDemand="true"
EmptyMessage="Print Site Name - minimum 2 characters"
Enabled="false">
<HeaderTemplate>
<ul style="list-style:none">
<li>
<span style="width:200px; float:left">Print Site Name</span>
<span style="width:100px; float:left">Tonnage Ordered</span>
<span style="width:100px; float:left">Quantity Ordered</span>
<span style="width:100px; float:left">Total Orders</span>
</li>
</ul>
</HeaderTemplate>
<WebServiceSettings Method="GetPrintSiteData" Path="~/PurchaseOrders/wsPurchaseOrder.asmx" />
</telerik:RadComboBox></td>
<td style="border-style: none none solid solid; border-width: 1px"><asp:CheckBox ID="chkDeleted" runat="server" Text="Deleted" /></td>
<td style="border-style: none solid solid none; border-width: 1px"><div id="divSelectAll" runat="server">
<u>Select all</u></div></td>
<td>
<button id="btnQuickSearch" runat="server" style="width: 100px">
<img id="imgQuickSearch" alt="Quick Search Order" src="../App_Images/View.png" style="border:none"/> Quick Search
</button>
</td>
</tr>
</table>
<br />
<telerik:RadGrid ID="grdPOHeader" runat="server"
AllowSorting="True"
AllowPaging="True"
PageSize="13"
ShowFooter="true"
EnableViewState="False"
AutoGenerateColumns="False"
OnNeedDataSource="grdPOHeader_NeedDataSource"
EnableLinqExpressions="false">
<ClientSettings>
<ClientEvents OnCommand="grdPOHeader_OnCommand"
OnRowContextMenu="grdPOHeader_OnRowContextMenu"
OnRowMouseOver="grdPOHeader_OnRowMouseOver" />
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" ScrollHeight="420" />
</ClientSettings>
<HeaderContextMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView ClientDataKeyNames="Purchase_Order_Number, Supplier_Code">
<Columns>
<telerik:GridButtonColumn
ButtonType="LinkButton"
CommandName="ViewSupplier"
DataTextField="Supplier_Code"
HeaderText="Supplier"
UniqueName="ViewSupplier">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn
DataField="C_Name"
UniqueName="C_Name"
DataType="System.String"
DataFormatString="<nobr>{0}<nobr>"
HeaderText="Corporate" />
<telerik:GridBoundColumn
DataField="PS_Name"
UniqueName="PS_Name"
DataType="System.String"
DataFormatString="<nobr>{0}<nobr>"
HeaderText="<nobr>Print Site<nobr>" />
<telerik:GridBoundColumn
DataField="User_PO_Number"
UniqueName="User_PO_Number"
DataType="System.String"
Aggregate="Count"
FooterAggregateFormatString="<nobr>{0}<nobr>"
HeaderText="<nobr>Customer Order No.<nobr>" />
<telerik:GridBoundColumn
DataField="Order_Date"
UniqueName="Order_Date"
DataFormatString="<nobr>{0:MM/dd/yyyy}<nobr>"
DataType="System.DateTime"
HeaderText="<nobr>Order Date<nobr>" />
<telerik:GridBoundColumn
DataField="Status"
UniqueName="Status"
DataType="System.String"
DataFormatString="<nobr>{0}<nobr>"
HeaderText="Status" />
<telerik:GridBoundColumn
Aggregate="Sum"
DataField="Tonnage_Ordered"
UniqueName="Tonnage_Ordered"
DataType="System.Decimal"
DataFormatString="{0:N3}"
FooterAggregateFormatString="<nobr>{0}<nobr>"
HeaderText="Tonnage" />
<telerik:GridBoundColumn
DataField="Quantity_Ordered"
UniqueName="Quantity_Ordered"
DataType="System.Int32"
FooterAggregateFormatString="<nobr>{0}<nobr>"
Aggregate="Sum"
HeaderText="Quantity" />
<telerik:GridBoundColumn
DataField="Amendment_Number"
UniqueName="Amendment_Number"
DataType="System.Int32"
HeaderText="<nobr>Amend. No.<nobr>" />
<telerik:GridButtonColumn
ButtonType="LinkButton"
CommandName="ViewDetails"
DataTextField="Total_Details"
HeaderText="<nobr>Total Details<nobr>"
UniqueName="ViewDetails">
</telerik:GridButtonColumn>
<telerik:GridButtonColumn
HeaderText="History"
ButtonType="LinkButton"
CommandName="ViewHistory"
DataTextField="Purchase_Order_Number"
DataTextFormatString="View"
UniqueName="ViewHistory">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn
DataField="Purchase_Order_Number"
UniqueName="Purchase_Order_Number"
Visible="false"
DataType="System.Int32">
</telerik:GridBoundColumn>
</Columns>
<PagerStyle Mode="NextPrevAndNumeric" />
</MasterTableView>
<FilterMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid><!--Div for minimize zone for radWindowManager --><div id="divMinimizeZone">
</div>
<telerik:RadAjaxLoadingPanel ID="lpPOLoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadToolTipManager ID="ttmViewSupplier" runat="server"
ContentScrolling="Auto"
Width="300px"
Height="300px"
ShowEvent="OnClick"
ManualClose="true"
AutoTooltipify="false"
Position="BottomRight"
Style="font-size: 18px;
text-align: center;
font-family: Arial;" >
<WebServiceSettings Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
Method="GetSupplier"/>
</telerik:RadToolTipManager>
<telerik:RadToolTipManager ID="ttmViewDetails" runat="server"
ContentScrolling="Auto"
Width="600px"
Height="200px"
ShowEvent="OnClick"
ManualClose="true"
AutoTooltipify="false"
Position="BottomLeft"
Style="font-size: 18px;
text-align: center;
font-family: Arial;" >
<WebServiceSettings Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
Method="GetDetails"/>
</telerik:RadToolTipManager>
<telerik:RadToolTipManager ID="ttmViewHistory" runat="server"
ContentScrolling="Auto"
Width="600px"
Height="200px"
ShowEvent="OnClick"
ManualClose="true"
AutoTooltipify="false"
Position="BottomLeft"
Style="font-size: 18px;
text-align: center;
font-family: Arial;" >
<WebServiceSettings Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
Method="GetHistory"/>
</telerik:RadToolTipManager>
<telerik:RadContextMenu ID="cmPOHeader" runat="server"
OnClientItemClicked="cmPOHeader_OnClientItemClicked" >
<Items>
<telerik:RadMenuItem Text="Accept" Value="Accept" ImageUrl="~/App_Images/Accept.png" />
<telerik:RadMenuItem Text="View Details" Value="View" ImageUrl="~/App_Images/View.png" />
</Items>
</telerik:RadContextMenu>
<telerik:RadWindowManager ID="wnmPOHeader" runat="server"
MinimizeZoneID="divMinimizeZone"
Animation="None"
KeepInScreenBounds="true"
Behaviors="Minimize,Resize,Pin,Move"
VisibleStatusbar="false">
</telerik:RadWindowManager>
<telerik:RadScriptBlock ID="sbPurchaseOrdersScript" runat="server">
<script type="text/javascript">
Sys.Application.add_load(page_load);
Sys.Application.add_unload(page_unload);
//page level variables for Server controls
var cbSupplierName = null;
var cbPONumber = null;
var dpStartDate = null;
var dpEndDate = null;
var chkNew = null;
var chkChanged = null;
var chkSupplierAccepted = null;
var chkChangePending = null;
var chkDeleted = null;
var divSelectAll = null;
var rbPSUserMonitored = null;
var grdPOHeader = null;
var cbCorporateMulti = null;
var cbPrintSiteMulti = null;
var lpPOLoadingPanel = null;
var ttmViewSupplier = null;
var ttmViewDetails = null;
var ttmViewHistory = null;
var cmPOHeader = null;
var wnmPOHeader = null;
var btnRefreshGrid = null;
var btnResetFilters = null;
var btnQuickSearch = null;
//PURPOSE: To load the page with appropriate size
//CREATED: By CH on February 5, 2009
function page_load(sender, e) {
//Initialize the extention of the javascript
initComboExtensions();
//Get the instance of all controls into objects
cbSupplierName = $find("<%= this.cbSupplier.ClientID %>");
cbPONumber = $find("<%= this.cbPONumber.ClientID %>");
dpStartDate = $find("<%= this.dpStartDate.ClientID %>");
dpEndDate = $find("<%= this.dpEndDate.ClientID %>");
chkNew = $get("<%= this.chkNew.ClientID %>");
chkChanged = $get("<%= this.chkChanged.ClientID %>");
chkSupplierAccepted = $get("<%= this.chkSupplierAccepted.ClientID %>");
chkChangePending = $get("<%= this.chkChangePending.ClientID %>");
chkDeleted = $get("<%= this.chkDeleted.ClientID %>");
divSelectAll = $get("<%= this.divSelectAll.ClientID %>");
rbPSUserMonitored = $get("<%= this.rbPSUserMonitored.ClientID %>");
cbCorporateMulti = $find("<%=this.cbCorporateMulti.ClientID%>");
cbPrintSiteMulti = $find("<%=this.cbPrintSiteMulti.ClientID%>");
grdPOHeader = $find("<%=this.grdPOHeader.ClientID%>");
lpPOLoadingPanel = $find("<%=this.lpPOLoadingPanel.ClientID%>");
ttmViewSupplier = $find("<%=this.ttmViewSupplier.ClientID%>");
ttmViewDetails = $find("<%=this.ttmViewDetails.ClientID%>");
ttmViewHistory = $find("<%=this.ttmViewHistory.ClientID%>");
cmPOHeader = $find("<%=this.cmPOHeader.ClientID%>");
wnmPOHeader = $find("<%=this.wnmPOHeader.ClientID%>");
btnRefreshGrid = $get("<%= this.btnRefreshGrid.ClientID %>");
btnResetFilters = $get("<%= this.btnResetFilters.ClientID %>");
btnQuickSearch = $get("<%= this.btnQuickSearch.ClientID %>");
cbCorporateMulti.onDataBound = cbCorporateMulti_onDataBound;
cbPrintSiteMulti.onDataBound = cbPrintSiteMulti_onDataBound;
//add a handler to call a function for each of the status checkboxes
$addHandler(chkNew, "click", status_onclick);
$addHandler(chkChanged, "click", status_onclick);
$addHandler(chkSupplierAccepted, "click", status_onclick);
$addHandler(chkChangePending, "click", status_onclick);
$addHandler(chkDeleted, "click", status_onclick);
$addHandler(divSelectAll, "click", status_onclick);
$addHandler(divSelectAll, "mouseover", divSelectAll_onmouseover);
$addHandler(divSelectAll, "mouseout", divSelectAll_onmouseout);
$addHandler(btnRefreshGrid, "click", btnRefreshGrid_onclick);
$addHandler(btnResetFilters, "click", btnResetFilters_onclick);
$addHandler(btnQuickSearch, "click", btnQuickSearch_onclick);
//load the grid using the filters on the screen
//bindGrid("Filter");
}
//PURPOSE: To unload the page
//CREATED: By CH on February 9, 2009
function page_unload(sender, e) {
//remove the handlers that were added on page load
$removeHandler(chkNew, "click", status_onclick);
$removeHandler(chkChanged, "click", status_onclick);
$removeHandler(chkSupplierAccepted, "click", status_onclick);
$removeHandler(chkChangePending, "click", status_onclick);
$removeHandler(chkDeleted, "click", status_onclick);
$removeHandler(divSelectAll, "click", status_onclick);
$removeHandler(divSelectAll, "mouseover", divSelectAll_onmouseover);
$removeHandler(divSelectAll, "mouseout", divSelectAll_onmouseout);
$removeHandler(btnRefreshGrid, "click", btnRefreshGrid_onclick);
$removeHandler(btnResetFilters, "click", btnResetFilters_onclick);
$removeHandler(btnQuickSearch, "click", btnQuickSearch_onclick);
//set the objects created on the page load to nothing
cbSupplierName = null;
cbPONumber = null;
dpStartDate = null;
dpEndDate = null;
chkNew = null;
chkChanged = null;
chkSupplierAccepted = null;
chkChangePending = null;
chkDeleted = null;
divSelectAll = null;
rbPSUserMonitored = null;
cbCorporateMulti = null;
cbPrintSiteMulti = null;
grdPOHeader = null;
lpPOLoadingPanel = null;
ttmViewSupplier = null;
ttmViewDetails = null;
ttmViewHistory = null;
cmPOHeader = null;
wnmPOHeader = null;
btnRefreshGrid = null;
btnResetFilters = null;
btnQuickSearch = null;
}
</script>
</telerik:RadScriptBlock>
</asp:Content>
Here is the CS code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Set the start date to the first day of the current month
dpStartDate.SelectedDate = DateTime.Parse(DateTime.Now.Month.ToString() + "/01/" + DateTime.Now.Year.ToString());
//Set the end date to the current date
dpEndDate.SelectedDate = DateTime.Now;
//Set the defaults for status
chkNew.Checked = true;
chkChanged.Checked = true;
chkSupplierAccepted.Checked = true;
}
}
//PURPOSE: Gets the initial data required
protected void grdPOHeader_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
//get the initial data when the page is loaded
wsPurchaseOrder db = new wsPurchaseOrder();
grdPOHeader.DataSource = db.GetData(); //db.GetData(0,radgrdCorporate.PageSize,"",GridSortOrder.None,"");
}
Here is the javascript for client side functionality:
//PURPOSE: To get data and bind it to the grid
//CREATED: By CH on February 16, 2009
function bindGrid(commandName) {
// Display the RadAjaxLoadingPanel
lpPOLoadingPanel.show(grdPOHeader.get_id());
var tableView = grdPOHeader.get_masterTableView();
// Get the number of rows we want to return
var pageSize = tableView.get_pageSize();
// If filtering or sorting data, go back to the first page of the RadGrid
var currentPageIndex = tableView.get_currentPageIndex();
if ((commandName == "Sort" || commandName == "Filter") && currentPageIndex > 0) {
tableView.set_currentPageIndex(0);
currentPageIndex = 0;
}
// Get the start index
var startIndex = currentPageIndex * pageSize;
// Get sort expressions
var sortExpressions = tableView.get_sortExpressions();
var sortField = "";
var sortOrder = Telerik.Web.UI.GridSortOrder.None;
if (sortExpressions.get_count() > 0) {
sortField = sortExpressions.getItem(0).get_fieldName();
sortOrder = sortExpressions.getItem(0).get_sortOrder();
}
//build context
var conFilters = new getContext();
// Load data from web service
Ediwise.EdiConnect.Web.PurchaseOrders.wsPurchaseOrder.GetData(startIndex, pageSize, sortField, sortOrder, conFilters, updateGrid, webServiceCallFailed);
//if ((commandName == "Filter") || (commandName == "Sort") || (commandName == "Page")) {
if (commandName == "Filter") {
// Load data from web service
Ediwise.EdiConnect.Web.PurchaseOrders.wsPurchaseOrder.GetCount(conFilters, updateGridItemCount, webServiceCallFailed);
}
}
//PURPOSE: To call the pop up from quick edit
//CREATED: By CH on March 4, 2009
function btnQuickSearch_onclick() {
// var comboQuickEditFieldName = cbQuickEditFieldName;
// var comboQuickEditFieldValue = cbQuickEditFieldValue;
//if there is no value entered in the combo, raise and error
if (cbPONumber.get_text() == cbPONumber._emptyMessage) {
// don't proceed any further if no items
if (cbPONumber.get_items().get_count() == 0)
radalert("You must enter an order number to use quick search!");
return false;
}
else if (cbPONumber.get_value() == "") {
//an invalid entry was entered
radalert("You must enter a valid order number to use quick search!");
return false;
}
//set the PO number
var intPONumber = cbPONumber.get_value();
//open a radWindow to perform the edit
launchDetailWindow(intPONumber);
//cancel server side event
return false;
}
//PURPOSE: Refresh the grid
//CREATED: By CH on February 12, 2009
function btnRefreshGrid_onclick() {
//call our custom function on the client to call the web service and
//populate the grid with the appropriate data.
bindGrid("Filter");
//cancel server side event
return false;
}
//PURPOSE: Reset the filters
//CREATED: By CH on February 12, 2009
function btnResetFilters_onclick() {
var combo = null;
//loop through all combo boxes and reset them
for (i = 0; i < Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++) {
combo = Telerik.Web.UI.RadComboBox.ComboBoxes[i];
combo.beginUpdate();
combo.clearItems();
combo.clearSelection();
combo._applyEmptyMessage();
combo.endUpdate();
}
//refresh the grid
ibRefreshGrid_onclick();
//cancel server side event
return false;
}
//PURPOSE: Writes the data to the multi column corporate combo
//CREATED: By CH on February 13, 2009
function cbCorporateMulti_OnClientItemsRequested(sender, eventArgs) {
if (cbCorporateMulti.onDataBound != null) {
var ulList = $(cbCorporateMulti.get_id() + "_DropDown").getElementsByClassName("rcbList")[0];
var liElements = ulList.childElements();
var items = sender.get_items();
var dataItem;
var dropDownLine;
//loop throught the data returned and bind it to the combo box
for (var index = 0; index < liElements.length; ++index) {
dataItem = items.getItem(index);
if (dataItem != null) {
dropDownLine = liElements[index];
cbCorporateMulti.onDataBound(dataItem, dropDownLine);
}
}
}
}
//PURPOSE: To manage the PS combo based on the coporate combo
//CREATED: By CH on February 19, 2009
function cbCorporateMulti_OnClientSelectedIndexChanged(sender, eventArgs) {
//If corporate is blank
if (cbCorporateMulti.get_text() == cbCorporateMulti._emptyMessage) {
cbPrintSiteMulti.beginUpdate();
cbPrintSiteMulti.clearItems();
cbPrintSiteMulti.clearSelection();
cbPrintSiteMulti._applyEmptyMessage();
cbPrintSiteMulti.endUpdate();
//Disable the print site combo
cbPrintSiteMulti.disable();
}
else {
//Enable the print site combo
//cbPrintSiteMulti.set_enabled(true);
cbPrintSiteMulti.enable();
//Clear any items that already exist
cbPrintSiteMulti.beginUpdate();
cbPrintSiteMulti.clearItems();
cbPrintSiteMulti.clearSelection();
cbPrintSiteMulti._applyEmptyMessage();
cbPrintSiteMulti.endUpdate();
//Show the print site combo
cbPrintSiteMulti.showDropDown();
}
}
//PURPOSE: Sets up the spans of the multi column combo
//CREATED: By CH on March 4, 2009
function cbCorporateMulti_onDataBound(pComboboxItem, pDropDownLine) {
var customAttributes = pComboboxItem.get_attributes();
pDropDownLine.update(
'<span style="width:40px; float:left"></span><span style="width:200px; float:left">' + pComboboxItem.get_text().truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Tonnage").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Quantity").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_PS").truncate(30, '[...]') + '</span>'
);
}
//PURPOSE: Writes the data to the multi column corporate combo
//CREATED: By CH on February 13, 2009
function cbPrintSiteMulti_OnClientItemsRequested(sender, eventArgs) {
if (cbPrintSiteMulti.onDataBound != null) {
var ulList = $(cbPrintSiteMulti.get_id() + "_DropDown").getElementsByClassName("rcbList")[0];
var liElements = ulList.childElements();
var items = sender.get_items();
var dataItem;
var dropDownLine;
for (var index = 0; index < liElements.length; ++index) {
dataItem = items.getItem(index);
if (dataItem != null) {
dropDownLine = liElements[index];
cbPrintSiteMulti.onDataBound(dataItem, dropDownLine);
}
}
}
}
//PURPOSE: Sets up the spans of the multi column combo
//CREATED: By CH on March 4, 2009
function cbPrintSiteMulti_onDataBound(pComboboxItem, pDropDownLine) {
var customAttributes = pComboboxItem.get_attributes();
pDropDownLine.update(
'<span style="width:40px; float:left"></span><span style="width:200px; float:left">' + pComboboxItem.get_text().truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Tonnage").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Quantity").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Orders").truncate(30, '[...]') + '</span>'
);
}
//PURPOSE: Handles the click of an item in the context menu
//CREATED: By CH on February 20, 2009
function cmPOHeader_OnClientItemClicked(sender, eventArgs) {
var itemValue = eventArgs.get_item().get_value();
switch (itemValue) {
case "Accept":
//raise a messag for now
radalert("User clicked to accept PO number: " + strPONumber + " from row number: " + intRowIndex + ".");
break;
case "View":
//open a radWindow to perform the edit
launchDetailWindow(strPONumber);
break;
}
}
//PURPOSE: To populate combo boxes
//CREATED: By CH on February 6, 2009
function comboOnClientItemsRequesting(sender, eventArgs) {
// If less than 2 characters then cancel call
if (sender.get_text().length < 2) {
eventArgs.set_cancel(true);
}
else {
//Define the context object
var context = eventArgs.get_context();
//Dates and status are always used
context["strStartDate"] = dpStartDate.get_textBox().value;
context["strEndDate"] = dpEndDate.get_textBox().value;
context["strNew"] = chkNew.checked.toString();
context["strChanged"] = chkChanged.checked.toString();
context["strSupplierAccepted"] = chkSupplierAccepted.checked.toString();
context["strChangePending"] = chkChangePending.checked.toString();
context["strDeleted"] = chkDeleted.checked.toString();
//Loop throught the items of the radio button list
for (intList = 0; intList < rbPSUserMonitored.getElementsByTagName("input").length; intList++) {
if (rbPSUserMonitored.getElementsByTagName("input")[intList].checked) {
//set the context
context["strPSUserMonitored"] = rbPSUserMonitored.getElementsByTagName("input")[intList].value;
break;
}
}
//Determine which combo box was called
switch (sender.get_id()) {
//The calling combo is cbSupplier
case cbSupplierName.get_id():
context["strSupplierName"] = eventArgs.get_text();
//populate context from other combo boxes
context["strCorporateName"] = cbCorporateMulti.get_value();
context["strPONumber"] = cbPONumber.get_value();
context["strPrintSiteName"] = cbPrintSiteMulti.get_value();
break;
//The calling combo is cbCorporate
case cbPONumber.get_id():
context["strPONumber"] = eventArgs.get_text();
//populate context from other combo boxes
context["strSupplierName"] = cbSupplierName.get_value();
context["strCorporateName"] = cbCorporateMulti.get_value();
context["strPrintSiteName"] = cbPrintSiteMulti.get_value();
break;
case cbCorporateMulti.get_id():
context["strCorporateName"] = eventArgs.get_text();
//populate context from other combo boxes
context["strSupplierName"] = cbSupplierName.get_value();
context["strPONumber"] = cbPONumber.get_value();
context["strPrintSiteName"] = cbPrintSiteMulti.get_value();
break;
case cbPrintSiteMulti.get_id():
context["strPrintSiteName"] = eventArgs.get_text();
//populate context from other combo boxes
context["strSupplierName"] = cbSupplierName.get_value();
context["strPONumber"] = cbPONumber.get_value();
context["strCorporateName"] = cbCorporateMulti.get_value();
break;
}
}
}
//PURPOSE: Clear the list of items since the text has changed
//CREATED: By CH on February 9, 2009
function comboOnClientTextChange(sender, eventArgs) {
if (sender.get_text() == sender._emptyMessage) {
// clear the current list of items as the text has been deleted
sender.beginUpdate();
sender.clearItems();
sender.clearSelection();
sender._applyEmptyMessage();
sender.endUpdate();
//if it was the corporate combo that was blanked out call the function
//to reset the print site
if (sender.get_id() == cbCorporateMulti.get_id()) {
cbCorporateMulti_OnClientSelectedIndexChanged(sender, eventArgs);
}
}
}
//PURPOSE: Changes the pointer to a hand on mouse over
//CREATED: By CH on February 10, 2009
function divSelectAll_onmouseover() {
document.body.style.cursor = 'pointer';
}
//PURPOSE: Chnages the pointer to an arrow on mouse out
//CREATED: By CH on February 10, 2009
function divSelectAll_onmouseout() {
document.body.style.cursor = 'default';
}
//PURPOSE: Gets the values from the filter controls
//CREATED: By CH on February 16, 2009
function getContext() {
this.strStartDate = dpStartDate.get_textBox().value;
this.strEndDate = dpEndDate.get_textBox().value;
this.strNew = chkNew.checked.toString();
this.strChanged = chkChanged.checked.toString();
this.strSupplierAccepted = chkSupplierAccepted.checked.toString();
this.strChangePending = chkChangePending.checked.toString();
this.strDeleted = chkDeleted.checked.toString();
this.strCorporateName = cbCorporateMulti.get_value();
this.strPrintSiteName = cbPrintSiteMulti.get_value();
this.strSupplierName = cbSupplierName.get_value();
this.strPONumber = cbPONumber.get_value();
//Loop throught the items of the radio button list
for (intList = 0; intList < rbPSUserMonitored.getElementsByTagName("input").length; intList++) {
if (rbPSUserMonitored.getElementsByTagName("input")[intList].checked) {
//set the context
this.strPSUserMonitored = rbPSUserMonitored.getElementsByTagName("input")[intList].value;
break;
}
}
}
//PURPOSE: To handle grid related commands
//CREATED: By CH on February 13, 2009
function grdPOHeader_OnCommand(sender, args) {
//set cancel to true we will handle the server call on the client side
//and call the web service method to populate the grid with the approprite data.
args.set_cancel(true);
//determine what command is calling the function
var commandName = args.get_commandName();
//determine the current table view
var tableView = grdPOHeader.get_masterTableView();
tableView.selectItem(tableView.get_dataItems()[intRowIndex].get_element(), true);
//determine what the user selected
switch (commandName) {
case "ViewSupplier":
// display history via tooltip manager
var viewSupplier = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[intRowIndex], "ViewSupplier");
showToolTip(ttmViewSupplier, viewSupplier, intRowIndex, commandName);
break;
case "ViewDetails":
//open a radWindow to perform the edit
launchDetailWindow(strPONumber);
break;
case "ViewHistory":
// display history via tooltip manager
var viewHistory = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[intRowIndex], "ViewHistory");
showToolTip(ttmViewHistory, viewHistory, intRowIndex, commandName);
break;
default:
//call our custom function on the client to call the web service and
//populate the grid with the appropriate data.
bindGrid(commandName);
}
}
//PURPOSE: Calls the context menu
//CREATED: By CH on February 13, 2009
function grdPOHeader_OnRowContextMenu(sender, eventArgs) {
var menu = cmPOHeader;
var evt = eventArgs.get_domEvent();
if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
return;
}
var tableView = sender.get_masterTableView();
//select the row that was clicked
tableView.selectItem(tableView.get_dataItems()[intRowIndex].get_element(), true);
strPONumber = eventArgs.getDataKeyValue("Purchase_Order_Number");
menu.show(evt);
evt.cancelBubble = true;
evt.returnValue = false;
if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
}
//PURPOSE: To keep track of the last row the mouse was over
//CREATED: By CH on February 13, 2009
function grdPOHeader_OnRowMouseOver(sender, eventArgs) {
strPONumber = eventArgs.getDataKeyValue("Purchase_Order_Number");
strSupplierCode = eventArgs.getDataKeyValue("Supplier_Code");
intRowIndex = eventArgs.get_itemIndexHierarchical();
}
//PURPOSE: Initializes the combo extentions
//CREATED: By CH on March 4, 2009
function initComboExtensions() {
//extend radCombobox class
Telerik.Web.UI.RadComboBox.prototype.onDataBound = null;
}
//PURPOSE: Launches the radwindow
//CREATED: By CH on February 23, 2009
function launchDetailWindow(strPONumber) {
var winManager = wnmPOHeader;
//switch (strMode) {
//case "View":
var oWndEdit = winManager.getWindowByName("ViewDetails");
if (oWndEdit == null) {
//open a radWindow to perform the view
oWndEdit = radopen("PurchaseOrderView.aspx?strPONumber=" + strPONumber, "ViewDetails");
oWndEdit.set_title("View Details");
oWndEdit.setSize(800, 425);
oWndEdit.center();
}
else {
//refresh the existing window with the current PO to be viewed
oWndEdit.get_contentFrame().contentWindow.updateWindow(strPONumber);
oWndEdit.restore();
}
//break;
//}
}
//PURPOSE: To show the tool tips
//CREATED: By CH on February 17, 2009
function showToolTip(tooltipManager, element, rowID, commandName) {
//If the user hovers the link before the page has loaded, there is no manager created
if (!tooltipManager) return;
//Find the tooltip for this element if it has been created
var tooltip = tooltipManager.getToolTipByElement(element);
//Create a tooltip if no tooltip exists for this element
if (!tooltip) {
switch (commandName) {
case "ViewSupplier":
// attach tooltip via tooltip manager
tooltipManager.beginUpdate();
tooltip = tooltipManager.createToolTip(element);
tooltipManager.set_targetControl(element);
tooltip.set_value(strSupplierCode + '&' + rowID);
tooltipManager.endUpdate();
break;
case "ViewDetails":
// attach tooltip via tooltip manager
tooltipManager.beginUpdate();
tooltip = tooltipManager.createToolTip(element);
tooltipManager.set_targetControl(element);
tooltip.set_value(strPONumber + '&' + rowID);
tooltipManager.endUpdate();
break;
case "ViewHistory":
// attach tooltip via tooltip manager
tooltipManager.beginUpdate();
tooltip = tooltipManager.createToolTip(element);
tooltipManager.set_targetControl(element);
tooltip.set_value(strPONumber + '&' + rowID);
tooltipManager.endUpdate();
break;
}
}
tooltip.show();
}
//PURPOSE: Manages the way the status area works
//CREATED: By CH on February 10, 2009
function status_onclick(sender, eventArgs) {
var blnAll = null;
//If the calling control is the select all div the bln is true, otherwise false
//When a checkbox is clicked the sender.target.id is defined, but when the div is called it is not defined
if ((sender.target.id == chkNew.id) || (sender.target.id == chkChanged.id) || (sender.target.id == chkSupplierAccepted.id) || (sender.target.id == chkChangePending.id) || (sender.target.id == chkDeleted.id)) blnAll = false;
else blnAll = true;
if ((blnAll == true) && (divSelectAll.innerHTML == '<U>Select all</U>')) {
chkNew.checked = true;
chkChanged.checked = true;
chkSupplierAccepted.checked = true;
chkChangePending.checked = true;
chkDeleted.checked = true;
divSelectAll.innerHTML = '<U>Deselect all</U>';
}
else if ((blnAll == true) && (divSelectAll.innerHTML == '<U>Deselect all</U>')) {
chkNew.checked = false;
chkChanged.checked = false;
chkSupplierAccepted.checked = false;
chkChangePending.checked = false;
chkDeleted.checked = false;
divSelectAll.innerHTML = '<U>Select all</U>';
}
else if (blnAll == false) {
if ((chkNew.checked == true) && (chkChanged.checked == true) && (chkSupplierAccepted.checked == true) && (chkChangePending.checked == true) && (chkDeleted.checked == true)) {
divSelectAll.innerHTML = '<U>Deselect all</U>';
}
else {
divSelectAll.innerHTML = '<U>Select all</U>';
}
}
return;
}
//PURPOSE: Binds the data to the grid
//CREATED: By CH on February 16, 2009
function updateGrid(data) {
var tableView = grdPOHeader.get_masterTableView();
tableView.set_dataSource(data);
tableView.dataBind();
// Hide the RadAjaxLoadingPanel
lpPOLoadingPanel.hide(grdPOHeader.get_id());
//update the text of all link button columns
updateLinkButtons(data);
//Update the Supplier tooltips in the grid
updateToolTips(ttmViewSupplier);
//Update the Address tooltips in the grid
updateToolTips(ttmViewDetails);
//Update the view history tooltips in the grid
updateToolTips(ttmViewHistory);
}
//PURPOSE: Updates the grid data count
//CREATED: By CH on February 17, 2009
function updateGridItemCount(itemCount) {
var tableView = grdPOHeader.get_masterTableView();
tableView.set_virtualItemCount(itemCount);
// function updateVirtualItemCount(result) {
// var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
// tableView.set_virtualItemCount(result);
// var pagerDiv = $get("pagerTemplate");
// if (pagerDiv) {
// pagerDiv.innerHTML = "";
// for (var i = 1, len = Math.ceil(result / tableView.get_pageSize()); i <= len; i++) {
// var link = document.createElement("a");
// link.href = "#";
// link.innerHTML = i;
// link.onclick = function(index) {
// var pageIndex = index;
// return function() { tableView.page(pageIndex); }
// } (i);
// pagerDiv.appendChild(link);
// pagerDiv.appendChild(document.createTextNode(" "));
// }
// }
// }
}
//PURPOSE: Update link buttons
//CREATED: By CH on February 19, 2009
function updateLinkButtons(data) {
//get the master table view
var tableView = grdPOHeader.get_masterTableView();
//declare the cell object
var cell = null;
//loop through each record in the grid
for (i = 0; i < data.length; i++) {
//update the view details cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "ViewSupplier")
//update the value
cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">" + data[i]["Supplier_Code"].toString() + "<");
//update the view details cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "ViewDetails")
//update the value
cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">" + data[i]["Total_Details"].toString() + "<");
//update the view history cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "ViewHistory")
//update the value
cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">View<");
//num.toFixed(2)
//update the view history cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "Amendment_Number")
//update the value
//cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">View<");
cell.innerHTML = cell.innerHTML.replace(cell.innerText, data[i]["Amendment_Number"].toFixed(0));
}
}
//PURPOSE: Updates the tool tip values when the grid is refreshed
//CREATED: By CH on February 19, 2009
function updateToolTips(tooltipManager) {
//If the user hovers the link before the page has loaded, there is no manager created
if (!tooltipManager) return;
var toolTipArray = tooltipManager.get_toolTips();
if (!toolTipArray) return;
var ttmID = tooltipManager.get_id();
var strcontextValue = null;
var strcontextArray = null;
var rowID = null;
var tableView = null;
switch (ttmID) {
case ttmViewSupplier.get_id():
var strSupplierCode = null;
for (i = 0; i < toolTipArray.length; i++) {
strcontextValue = toolTipArray[i].get_value();
strcontextArray = strcontextValue.split('&');
rowID = parseInt(strcontextArray[1]);
tableView = grdPOHeader.get_masterTableView();
strSupplierCode = tableView.get_dataItems()[rowID]._dataItem["Supplier_Code"];
if (strcontextArray[0] != strSupplierCode) {
//need to update the tooltip
tooltipManager.beginUpdate();
toolTipArray[i].set_value(strSupplierCode + '&' + rowID);
tooltipManager.endUpdate();
}
}
break;
default:
var strPONumber = null;
for (i = 0; i < toolTipArray.length; i++) {
strcontextValue = toolTipArray[i].get_value();
strcontextArray = strcontextValue.split('&');
rowID = parseInt(strcontextArray[1]);
tableView = grdPOHeader.get_masterTableView();
var strPONumber = tableView.get_dataItems()[rowID]._dataItem["Purchase_Order_Number"];
if (strcontextArray[0] != strPONumber) {
//need to update the tooltip
tooltipManager.beginUpdate();
toolTipArray[i].set_value(strPONumber + '&' + rowID);
tooltipManager.endUpdate();
}
}
}
}
//PURPOSE: Returns an error if the web service call fails
//CREATED: By CH on February 17, 2009
function webServiceCallFailed(args) {
radalert("Web service call failed with the following exception.\n"
+ args.get_exceptionType()
+ ": "
+ args.get_message());
}
My grid displays purchase orders from my database. I am using client side data binding after the first load. The reason I am doing this is for performance purposes (the client side data binding is much faster than server side). So my aggregates count the number of purhcase orders in the grid and they sum the tonnage and quantity ordered. When my users change the filters and I bind client side I would like those numbers to change to reflect the new data. Somewhat like updating the number of rows returned (set_virtualItemCount).
Regards,
Cynthia
Here is the content of the page:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="cntPurchaseOrder" ContentPlaceHolderID="cphMainContent" runat="server">
<asp:ScriptManagerProxy ID="smpPurchaseOrder" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Prototype.js" />
<asp:ScriptReference Path="~/PurchaseOrders/Scripts/PurchaseOrder.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="~/PurchaseOrders/wsPurchaseOrder.asmx" />
</Services>
</asp:ScriptManagerProxy>
<telerik:RadFormDecorator ID="fdPurchaseOrder" runat="server" DecoratedControls="CheckBoxes, Buttons" />
<table style="border-collapse: collapse">
<tr>
<td><telerik:RadDatePicker ID="dpStartDate" runat="server" Culture="English (United States)"
Width="100px" ToolTip="Start Date">
<Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
</Calendar>
<DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker>
to
<telerik:RadDatePicker ID="dpEndDate" runat="server" Culture="English (United States)"
Width="100px" ToolTip="End Date">
<Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
</Calendar>
<DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker></td>
<td><asp:RadioButtonList ID="rbPSUserMonitored" runat="server" RepeatDirection="Horizontal"
ToolTip="Print Sites">
<asp:ListItem Value="false">All Print Sites</asp:ListItem>
<asp:ListItem Value="true" Selected="True">User Monitored Print Sites</asp:ListItem>
</asp:RadioButtonList></td>
<td style="border-style: solid none none solid; border-width: 1px"><asp:CheckBox ID="chkNew" runat="server" Text="New" /></td>
<td style="border-style: solid solid none none; border-width: 1px"><asp:CheckBox ID="chkSupplierAccepted" runat="server" Text="Supplier Accepted" /></td>
<td>
<button id="btnRefreshGrid" runat="server" style="width: 100px">
<img id="imgRefreshGrid" alt="Refresh Grid" src="../App_Images/RefreshGrid.png" style="border:none"/> Refresh Grid
</button>
</td>
</tr>
<tr>
<td><telerik:RadComboBox ID="cbSupplier" runat="server" Width="250px" EmptyMessage="Supplier Name - minimum 2 characters"
ToolTip="Supplier Name" OnClientItemsRequesting="comboOnClientItemsRequesting" OnClientTextChange="comboOnClientTextChange"
EnableLoadOnDemand="True" WebServiceSettings-Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
WebServiceSettings-Method="GetSupplierList">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox></td>
<td><telerik:RadComboBox ID="cbPONumber" runat="server"
Width="250px"
EmptyMessage="Customer Order No. - minimum 2 characters"
ToolTip="Customer Order No."
OnClientItemsRequesting="comboOnClientItemsRequesting"
OnClientTextChange="comboOnClientTextChange"
EnableLoadOnDemand="True"
WebServiceSettings-Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
WebServiceSettings-Method="GetPOList">
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox></td>
<td style="border-width: 1px; border-style: none none none solid"><asp:CheckBox ID="chkChanged" runat="server" Text="Changed" /></td>
<td style="border-style: none solid none none; border-width: 1px"><asp:CheckBox ID="chkChangePending" runat="server" Text="Change Pending" /></td>
<td>
<button id="btnResetFilters" runat="server" style="width: 100px">
<img id="imgResetFilters" alt="Reset Filters" src="../App_Images/ResetFilters.png" style="border:none"/> Reset Filters
</button>
</td>
</tr>
<tr>
<td>
<telerik:RadComboBox runat="server"
ID="cbCorporateMulti"
Width="250px"
DropDownWidth="600px"
OnClientItemsRequesting ="comboOnClientItemsRequesting"
OnClientItemsRequested="cbCorporateMulti_OnClientItemsRequested"
OnClientSelectedIndexChanged="cbCorporateMulti_OnClientSelectedIndexChanged"
OnClientTextChange="comboOnClientTextChange"
EnableLoadOnDemand="true"
EmptyMessage="Corporate Name - minimum 2 characters">
<HeaderTemplate>
<ul style="list-style:none">
<li>
<span style="width:200px; float:left">Corporate Name</span>
<span style="width:100px; float:left">Tonnage Ordered</span>
<span style="width:100px; float:left">Quantity Ordered</span>
<span style="width:100px; float:left">Total Print Sites</span>
</li>
</ul>
</HeaderTemplate>
<WebServiceSettings Method="GetCorporateData" Path="~/PurchaseOrders/wsPurchaseOrder.asmx" />
</telerik:RadComboBox>
</td>
<td>
<telerik:RadComboBox runat="server"
ID="cbPrintSiteMulti"
Width="250px"
DropDownWidth="600px"
OnClientItemsRequesting ="comboOnClientItemsRequesting"
OnClientItemsRequested="cbPrintSiteMulti_OnClientItemsRequested"
EnableLoadOnDemand="true"
EmptyMessage="Print Site Name - minimum 2 characters"
Enabled="false">
<HeaderTemplate>
<ul style="list-style:none">
<li>
<span style="width:200px; float:left">Print Site Name</span>
<span style="width:100px; float:left">Tonnage Ordered</span>
<span style="width:100px; float:left">Quantity Ordered</span>
<span style="width:100px; float:left">Total Orders</span>
</li>
</ul>
</HeaderTemplate>
<WebServiceSettings Method="GetPrintSiteData" Path="~/PurchaseOrders/wsPurchaseOrder.asmx" />
</telerik:RadComboBox></td>
<td style="border-style: none none solid solid; border-width: 1px"><asp:CheckBox ID="chkDeleted" runat="server" Text="Deleted" /></td>
<td style="border-style: none solid solid none; border-width: 1px"><div id="divSelectAll" runat="server">
<u>Select all</u></div></td>
<td>
<button id="btnQuickSearch" runat="server" style="width: 100px">
<img id="imgQuickSearch" alt="Quick Search Order" src="../App_Images/View.png" style="border:none"/> Quick Search
</button>
</td>
</tr>
</table>
<br />
<telerik:RadGrid ID="grdPOHeader" runat="server"
AllowSorting="True"
AllowPaging="True"
PageSize="13"
ShowFooter="true"
EnableViewState="False"
AutoGenerateColumns="False"
OnNeedDataSource="grdPOHeader_NeedDataSource"
EnableLinqExpressions="false">
<ClientSettings>
<ClientEvents OnCommand="grdPOHeader_OnCommand"
OnRowContextMenu="grdPOHeader_OnRowContextMenu"
OnRowMouseOver="grdPOHeader_OnRowMouseOver" />
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" ScrollHeight="420" />
</ClientSettings>
<HeaderContextMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView ClientDataKeyNames="Purchase_Order_Number, Supplier_Code">
<Columns>
<telerik:GridButtonColumn
ButtonType="LinkButton"
CommandName="ViewSupplier"
DataTextField="Supplier_Code"
HeaderText="Supplier"
UniqueName="ViewSupplier">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn
DataField="C_Name"
UniqueName="C_Name"
DataType="System.String"
DataFormatString="<nobr>{0}<nobr>"
HeaderText="Corporate" />
<telerik:GridBoundColumn
DataField="PS_Name"
UniqueName="PS_Name"
DataType="System.String"
DataFormatString="<nobr>{0}<nobr>"
HeaderText="<nobr>Print Site<nobr>" />
<telerik:GridBoundColumn
DataField="User_PO_Number"
UniqueName="User_PO_Number"
DataType="System.String"
Aggregate="Count"
FooterAggregateFormatString="<nobr>{0}<nobr>"
HeaderText="<nobr>Customer Order No.<nobr>" />
<telerik:GridBoundColumn
DataField="Order_Date"
UniqueName="Order_Date"
DataFormatString="<nobr>{0:MM/dd/yyyy}<nobr>"
DataType="System.DateTime"
HeaderText="<nobr>Order Date<nobr>" />
<telerik:GridBoundColumn
DataField="Status"
UniqueName="Status"
DataType="System.String"
DataFormatString="<nobr>{0}<nobr>"
HeaderText="Status" />
<telerik:GridBoundColumn
Aggregate="Sum"
DataField="Tonnage_Ordered"
UniqueName="Tonnage_Ordered"
DataType="System.Decimal"
DataFormatString="{0:N3}"
FooterAggregateFormatString="<nobr>{0}<nobr>"
HeaderText="Tonnage" />
<telerik:GridBoundColumn
DataField="Quantity_Ordered"
UniqueName="Quantity_Ordered"
DataType="System.Int32"
FooterAggregateFormatString="<nobr>{0}<nobr>"
Aggregate="Sum"
HeaderText="Quantity" />
<telerik:GridBoundColumn
DataField="Amendment_Number"
UniqueName="Amendment_Number"
DataType="System.Int32"
HeaderText="<nobr>Amend. No.<nobr>" />
<telerik:GridButtonColumn
ButtonType="LinkButton"
CommandName="ViewDetails"
DataTextField="Total_Details"
HeaderText="<nobr>Total Details<nobr>"
UniqueName="ViewDetails">
</telerik:GridButtonColumn>
<telerik:GridButtonColumn
HeaderText="History"
ButtonType="LinkButton"
CommandName="ViewHistory"
DataTextField="Purchase_Order_Number"
DataTextFormatString="View"
UniqueName="ViewHistory">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn
DataField="Purchase_Order_Number"
UniqueName="Purchase_Order_Number"
Visible="false"
DataType="System.Int32">
</telerik:GridBoundColumn>
</Columns>
<PagerStyle Mode="NextPrevAndNumeric" />
</MasterTableView>
<FilterMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid><!--Div for minimize zone for radWindowManager --><div id="divMinimizeZone">
</div>
<telerik:RadAjaxLoadingPanel ID="lpPOLoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadToolTipManager ID="ttmViewSupplier" runat="server"
ContentScrolling="Auto"
Width="300px"
Height="300px"
ShowEvent="OnClick"
ManualClose="true"
AutoTooltipify="false"
Position="BottomRight"
Style="font-size: 18px;
text-align: center;
font-family: Arial;" >
<WebServiceSettings Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
Method="GetSupplier"/>
</telerik:RadToolTipManager>
<telerik:RadToolTipManager ID="ttmViewDetails" runat="server"
ContentScrolling="Auto"
Width="600px"
Height="200px"
ShowEvent="OnClick"
ManualClose="true"
AutoTooltipify="false"
Position="BottomLeft"
Style="font-size: 18px;
text-align: center;
font-family: Arial;" >
<WebServiceSettings Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
Method="GetDetails"/>
</telerik:RadToolTipManager>
<telerik:RadToolTipManager ID="ttmViewHistory" runat="server"
ContentScrolling="Auto"
Width="600px"
Height="200px"
ShowEvent="OnClick"
ManualClose="true"
AutoTooltipify="false"
Position="BottomLeft"
Style="font-size: 18px;
text-align: center;
font-family: Arial;" >
<WebServiceSettings Path="~/PurchaseOrders/wsPurchaseOrder.asmx"
Method="GetHistory"/>
</telerik:RadToolTipManager>
<telerik:RadContextMenu ID="cmPOHeader" runat="server"
OnClientItemClicked="cmPOHeader_OnClientItemClicked" >
<Items>
<telerik:RadMenuItem Text="Accept" Value="Accept" ImageUrl="~/App_Images/Accept.png" />
<telerik:RadMenuItem Text="View Details" Value="View" ImageUrl="~/App_Images/View.png" />
</Items>
</telerik:RadContextMenu>
<telerik:RadWindowManager ID="wnmPOHeader" runat="server"
MinimizeZoneID="divMinimizeZone"
Animation="None"
KeepInScreenBounds="true"
Behaviors="Minimize,Resize,Pin,Move"
VisibleStatusbar="false">
</telerik:RadWindowManager>
<telerik:RadScriptBlock ID="sbPurchaseOrdersScript" runat="server">
<script type="text/javascript">
Sys.Application.add_load(page_load);
Sys.Application.add_unload(page_unload);
//page level variables for Server controls
var cbSupplierName = null;
var cbPONumber = null;
var dpStartDate = null;
var dpEndDate = null;
var chkNew = null;
var chkChanged = null;
var chkSupplierAccepted = null;
var chkChangePending = null;
var chkDeleted = null;
var divSelectAll = null;
var rbPSUserMonitored = null;
var grdPOHeader = null;
var cbCorporateMulti = null;
var cbPrintSiteMulti = null;
var lpPOLoadingPanel = null;
var ttmViewSupplier = null;
var ttmViewDetails = null;
var ttmViewHistory = null;
var cmPOHeader = null;
var wnmPOHeader = null;
var btnRefreshGrid = null;
var btnResetFilters = null;
var btnQuickSearch = null;
//PURPOSE: To load the page with appropriate size
//CREATED: By CH on February 5, 2009
function page_load(sender, e) {
//Initialize the extention of the javascript
initComboExtensions();
//Get the instance of all controls into objects
cbSupplierName = $find("<%= this.cbSupplier.ClientID %>");
cbPONumber = $find("<%= this.cbPONumber.ClientID %>");
dpStartDate = $find("<%= this.dpStartDate.ClientID %>");
dpEndDate = $find("<%= this.dpEndDate.ClientID %>");
chkNew = $get("<%= this.chkNew.ClientID %>");
chkChanged = $get("<%= this.chkChanged.ClientID %>");
chkSupplierAccepted = $get("<%= this.chkSupplierAccepted.ClientID %>");
chkChangePending = $get("<%= this.chkChangePending.ClientID %>");
chkDeleted = $get("<%= this.chkDeleted.ClientID %>");
divSelectAll = $get("<%= this.divSelectAll.ClientID %>");
rbPSUserMonitored = $get("<%= this.rbPSUserMonitored.ClientID %>");
cbCorporateMulti = $find("<%=this.cbCorporateMulti.ClientID%>");
cbPrintSiteMulti = $find("<%=this.cbPrintSiteMulti.ClientID%>");
grdPOHeader = $find("<%=this.grdPOHeader.ClientID%>");
lpPOLoadingPanel = $find("<%=this.lpPOLoadingPanel.ClientID%>");
ttmViewSupplier = $find("<%=this.ttmViewSupplier.ClientID%>");
ttmViewDetails = $find("<%=this.ttmViewDetails.ClientID%>");
ttmViewHistory = $find("<%=this.ttmViewHistory.ClientID%>");
cmPOHeader = $find("<%=this.cmPOHeader.ClientID%>");
wnmPOHeader = $find("<%=this.wnmPOHeader.ClientID%>");
btnRefreshGrid = $get("<%= this.btnRefreshGrid.ClientID %>");
btnResetFilters = $get("<%= this.btnResetFilters.ClientID %>");
btnQuickSearch = $get("<%= this.btnQuickSearch.ClientID %>");
cbCorporateMulti.onDataBound = cbCorporateMulti_onDataBound;
cbPrintSiteMulti.onDataBound = cbPrintSiteMulti_onDataBound;
//add a handler to call a function for each of the status checkboxes
$addHandler(chkNew, "click", status_onclick);
$addHandler(chkChanged, "click", status_onclick);
$addHandler(chkSupplierAccepted, "click", status_onclick);
$addHandler(chkChangePending, "click", status_onclick);
$addHandler(chkDeleted, "click", status_onclick);
$addHandler(divSelectAll, "click", status_onclick);
$addHandler(divSelectAll, "mouseover", divSelectAll_onmouseover);
$addHandler(divSelectAll, "mouseout", divSelectAll_onmouseout);
$addHandler(btnRefreshGrid, "click", btnRefreshGrid_onclick);
$addHandler(btnResetFilters, "click", btnResetFilters_onclick);
$addHandler(btnQuickSearch, "click", btnQuickSearch_onclick);
//load the grid using the filters on the screen
//bindGrid("Filter");
}
//PURPOSE: To unload the page
//CREATED: By CH on February 9, 2009
function page_unload(sender, e) {
//remove the handlers that were added on page load
$removeHandler(chkNew, "click", status_onclick);
$removeHandler(chkChanged, "click", status_onclick);
$removeHandler(chkSupplierAccepted, "click", status_onclick);
$removeHandler(chkChangePending, "click", status_onclick);
$removeHandler(chkDeleted, "click", status_onclick);
$removeHandler(divSelectAll, "click", status_onclick);
$removeHandler(divSelectAll, "mouseover", divSelectAll_onmouseover);
$removeHandler(divSelectAll, "mouseout", divSelectAll_onmouseout);
$removeHandler(btnRefreshGrid, "click", btnRefreshGrid_onclick);
$removeHandler(btnResetFilters, "click", btnResetFilters_onclick);
$removeHandler(btnQuickSearch, "click", btnQuickSearch_onclick);
//set the objects created on the page load to nothing
cbSupplierName = null;
cbPONumber = null;
dpStartDate = null;
dpEndDate = null;
chkNew = null;
chkChanged = null;
chkSupplierAccepted = null;
chkChangePending = null;
chkDeleted = null;
divSelectAll = null;
rbPSUserMonitored = null;
cbCorporateMulti = null;
cbPrintSiteMulti = null;
grdPOHeader = null;
lpPOLoadingPanel = null;
ttmViewSupplier = null;
ttmViewDetails = null;
ttmViewHistory = null;
cmPOHeader = null;
wnmPOHeader = null;
btnRefreshGrid = null;
btnResetFilters = null;
btnQuickSearch = null;
}
</script>
</telerik:RadScriptBlock>
</asp:Content>
Here is the CS code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Set the start date to the first day of the current month
dpStartDate.SelectedDate = DateTime.Parse(DateTime.Now.Month.ToString() + "/01/" + DateTime.Now.Year.ToString());
//Set the end date to the current date
dpEndDate.SelectedDate = DateTime.Now;
//Set the defaults for status
chkNew.Checked = true;
chkChanged.Checked = true;
chkSupplierAccepted.Checked = true;
}
}
//PURPOSE: Gets the initial data required
protected void grdPOHeader_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
//get the initial data when the page is loaded
wsPurchaseOrder db = new wsPurchaseOrder();
grdPOHeader.DataSource = db.GetData(); //db.GetData(0,radgrdCorporate.PageSize,"",GridSortOrder.None,"");
}
Here is the javascript for client side functionality:
//PURPOSE: To get data and bind it to the grid
//CREATED: By CH on February 16, 2009
function bindGrid(commandName) {
// Display the RadAjaxLoadingPanel
lpPOLoadingPanel.show(grdPOHeader.get_id());
var tableView = grdPOHeader.get_masterTableView();
// Get the number of rows we want to return
var pageSize = tableView.get_pageSize();
// If filtering or sorting data, go back to the first page of the RadGrid
var currentPageIndex = tableView.get_currentPageIndex();
if ((commandName == "Sort" || commandName == "Filter") && currentPageIndex > 0) {
tableView.set_currentPageIndex(0);
currentPageIndex = 0;
}
// Get the start index
var startIndex = currentPageIndex * pageSize;
// Get sort expressions
var sortExpressions = tableView.get_sortExpressions();
var sortField = "";
var sortOrder = Telerik.Web.UI.GridSortOrder.None;
if (sortExpressions.get_count() > 0) {
sortField = sortExpressions.getItem(0).get_fieldName();
sortOrder = sortExpressions.getItem(0).get_sortOrder();
}
//build context
var conFilters = new getContext();
// Load data from web service
Ediwise.EdiConnect.Web.PurchaseOrders.wsPurchaseOrder.GetData(startIndex, pageSize, sortField, sortOrder, conFilters, updateGrid, webServiceCallFailed);
//if ((commandName == "Filter") || (commandName == "Sort") || (commandName == "Page")) {
if (commandName == "Filter") {
// Load data from web service
Ediwise.EdiConnect.Web.PurchaseOrders.wsPurchaseOrder.GetCount(conFilters, updateGridItemCount, webServiceCallFailed);
}
}
//PURPOSE: To call the pop up from quick edit
//CREATED: By CH on March 4, 2009
function btnQuickSearch_onclick() {
// var comboQuickEditFieldName = cbQuickEditFieldName;
// var comboQuickEditFieldValue = cbQuickEditFieldValue;
//if there is no value entered in the combo, raise and error
if (cbPONumber.get_text() == cbPONumber._emptyMessage) {
// don't proceed any further if no items
if (cbPONumber.get_items().get_count() == 0)
radalert("You must enter an order number to use quick search!");
return false;
}
else if (cbPONumber.get_value() == "") {
//an invalid entry was entered
radalert("You must enter a valid order number to use quick search!");
return false;
}
//set the PO number
var intPONumber = cbPONumber.get_value();
//open a radWindow to perform the edit
launchDetailWindow(intPONumber);
//cancel server side event
return false;
}
//PURPOSE: Refresh the grid
//CREATED: By CH on February 12, 2009
function btnRefreshGrid_onclick() {
//call our custom function on the client to call the web service and
//populate the grid with the appropriate data.
bindGrid("Filter");
//cancel server side event
return false;
}
//PURPOSE: Reset the filters
//CREATED: By CH on February 12, 2009
function btnResetFilters_onclick() {
var combo = null;
//loop through all combo boxes and reset them
for (i = 0; i < Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++) {
combo = Telerik.Web.UI.RadComboBox.ComboBoxes[i];
combo.beginUpdate();
combo.clearItems();
combo.clearSelection();
combo._applyEmptyMessage();
combo.endUpdate();
}
//refresh the grid
ibRefreshGrid_onclick();
//cancel server side event
return false;
}
//PURPOSE: Writes the data to the multi column corporate combo
//CREATED: By CH on February 13, 2009
function cbCorporateMulti_OnClientItemsRequested(sender, eventArgs) {
if (cbCorporateMulti.onDataBound != null) {
var ulList = $(cbCorporateMulti.get_id() + "_DropDown").getElementsByClassName("rcbList")[0];
var liElements = ulList.childElements();
var items = sender.get_items();
var dataItem;
var dropDownLine;
//loop throught the data returned and bind it to the combo box
for (var index = 0; index < liElements.length; ++index) {
dataItem = items.getItem(index);
if (dataItem != null) {
dropDownLine = liElements[index];
cbCorporateMulti.onDataBound(dataItem, dropDownLine);
}
}
}
}
//PURPOSE: To manage the PS combo based on the coporate combo
//CREATED: By CH on February 19, 2009
function cbCorporateMulti_OnClientSelectedIndexChanged(sender, eventArgs) {
//If corporate is blank
if (cbCorporateMulti.get_text() == cbCorporateMulti._emptyMessage) {
cbPrintSiteMulti.beginUpdate();
cbPrintSiteMulti.clearItems();
cbPrintSiteMulti.clearSelection();
cbPrintSiteMulti._applyEmptyMessage();
cbPrintSiteMulti.endUpdate();
//Disable the print site combo
cbPrintSiteMulti.disable();
}
else {
//Enable the print site combo
//cbPrintSiteMulti.set_enabled(true);
cbPrintSiteMulti.enable();
//Clear any items that already exist
cbPrintSiteMulti.beginUpdate();
cbPrintSiteMulti.clearItems();
cbPrintSiteMulti.clearSelection();
cbPrintSiteMulti._applyEmptyMessage();
cbPrintSiteMulti.endUpdate();
//Show the print site combo
cbPrintSiteMulti.showDropDown();
}
}
//PURPOSE: Sets up the spans of the multi column combo
//CREATED: By CH on March 4, 2009
function cbCorporateMulti_onDataBound(pComboboxItem, pDropDownLine) {
var customAttributes = pComboboxItem.get_attributes();
pDropDownLine.update(
'<span style="width:40px; float:left"></span><span style="width:200px; float:left">' + pComboboxItem.get_text().truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Tonnage").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Quantity").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_PS").truncate(30, '[...]') + '</span>'
);
}
//PURPOSE: Writes the data to the multi column corporate combo
//CREATED: By CH on February 13, 2009
function cbPrintSiteMulti_OnClientItemsRequested(sender, eventArgs) {
if (cbPrintSiteMulti.onDataBound != null) {
var ulList = $(cbPrintSiteMulti.get_id() + "_DropDown").getElementsByClassName("rcbList")[0];
var liElements = ulList.childElements();
var items = sender.get_items();
var dataItem;
var dropDownLine;
for (var index = 0; index < liElements.length; ++index) {
dataItem = items.getItem(index);
if (dataItem != null) {
dropDownLine = liElements[index];
cbPrintSiteMulti.onDataBound(dataItem, dropDownLine);
}
}
}
}
//PURPOSE: Sets up the spans of the multi column combo
//CREATED: By CH on March 4, 2009
function cbPrintSiteMulti_onDataBound(pComboboxItem, pDropDownLine) {
var customAttributes = pComboboxItem.get_attributes();
pDropDownLine.update(
'<span style="width:40px; float:left"></span><span style="width:200px; float:left">' + pComboboxItem.get_text().truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Tonnage").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Quantity").truncate(30, '[...]') + '</span>'
+ '<span style="width:100px; float:left">' + customAttributes.getAttribute("Total_Orders").truncate(30, '[...]') + '</span>'
);
}
//PURPOSE: Handles the click of an item in the context menu
//CREATED: By CH on February 20, 2009
function cmPOHeader_OnClientItemClicked(sender, eventArgs) {
var itemValue = eventArgs.get_item().get_value();
switch (itemValue) {
case "Accept":
//raise a messag for now
radalert("User clicked to accept PO number: " + strPONumber + " from row number: " + intRowIndex + ".");
break;
case "View":
//open a radWindow to perform the edit
launchDetailWindow(strPONumber);
break;
}
}
//PURPOSE: To populate combo boxes
//CREATED: By CH on February 6, 2009
function comboOnClientItemsRequesting(sender, eventArgs) {
// If less than 2 characters then cancel call
if (sender.get_text().length < 2) {
eventArgs.set_cancel(true);
}
else {
//Define the context object
var context = eventArgs.get_context();
//Dates and status are always used
context["strStartDate"] = dpStartDate.get_textBox().value;
context["strEndDate"] = dpEndDate.get_textBox().value;
context["strNew"] = chkNew.checked.toString();
context["strChanged"] = chkChanged.checked.toString();
context["strSupplierAccepted"] = chkSupplierAccepted.checked.toString();
context["strChangePending"] = chkChangePending.checked.toString();
context["strDeleted"] = chkDeleted.checked.toString();
//Loop throught the items of the radio button list
for (intList = 0; intList < rbPSUserMonitored.getElementsByTagName("input").length; intList++) {
if (rbPSUserMonitored.getElementsByTagName("input")[intList].checked) {
//set the context
context["strPSUserMonitored"] = rbPSUserMonitored.getElementsByTagName("input")[intList].value;
break;
}
}
//Determine which combo box was called
switch (sender.get_id()) {
//The calling combo is cbSupplier
case cbSupplierName.get_id():
context["strSupplierName"] = eventArgs.get_text();
//populate context from other combo boxes
context["strCorporateName"] = cbCorporateMulti.get_value();
context["strPONumber"] = cbPONumber.get_value();
context["strPrintSiteName"] = cbPrintSiteMulti.get_value();
break;
//The calling combo is cbCorporate
case cbPONumber.get_id():
context["strPONumber"] = eventArgs.get_text();
//populate context from other combo boxes
context["strSupplierName"] = cbSupplierName.get_value();
context["strCorporateName"] = cbCorporateMulti.get_value();
context["strPrintSiteName"] = cbPrintSiteMulti.get_value();
break;
case cbCorporateMulti.get_id():
context["strCorporateName"] = eventArgs.get_text();
//populate context from other combo boxes
context["strSupplierName"] = cbSupplierName.get_value();
context["strPONumber"] = cbPONumber.get_value();
context["strPrintSiteName"] = cbPrintSiteMulti.get_value();
break;
case cbPrintSiteMulti.get_id():
context["strPrintSiteName"] = eventArgs.get_text();
//populate context from other combo boxes
context["strSupplierName"] = cbSupplierName.get_value();
context["strPONumber"] = cbPONumber.get_value();
context["strCorporateName"] = cbCorporateMulti.get_value();
break;
}
}
}
//PURPOSE: Clear the list of items since the text has changed
//CREATED: By CH on February 9, 2009
function comboOnClientTextChange(sender, eventArgs) {
if (sender.get_text() == sender._emptyMessage) {
// clear the current list of items as the text has been deleted
sender.beginUpdate();
sender.clearItems();
sender.clearSelection();
sender._applyEmptyMessage();
sender.endUpdate();
//if it was the corporate combo that was blanked out call the function
//to reset the print site
if (sender.get_id() == cbCorporateMulti.get_id()) {
cbCorporateMulti_OnClientSelectedIndexChanged(sender, eventArgs);
}
}
}
//PURPOSE: Changes the pointer to a hand on mouse over
//CREATED: By CH on February 10, 2009
function divSelectAll_onmouseover() {
document.body.style.cursor = 'pointer';
}
//PURPOSE: Chnages the pointer to an arrow on mouse out
//CREATED: By CH on February 10, 2009
function divSelectAll_onmouseout() {
document.body.style.cursor = 'default';
}
//PURPOSE: Gets the values from the filter controls
//CREATED: By CH on February 16, 2009
function getContext() {
this.strStartDate = dpStartDate.get_textBox().value;
this.strEndDate = dpEndDate.get_textBox().value;
this.strNew = chkNew.checked.toString();
this.strChanged = chkChanged.checked.toString();
this.strSupplierAccepted = chkSupplierAccepted.checked.toString();
this.strChangePending = chkChangePending.checked.toString();
this.strDeleted = chkDeleted.checked.toString();
this.strCorporateName = cbCorporateMulti.get_value();
this.strPrintSiteName = cbPrintSiteMulti.get_value();
this.strSupplierName = cbSupplierName.get_value();
this.strPONumber = cbPONumber.get_value();
//Loop throught the items of the radio button list
for (intList = 0; intList < rbPSUserMonitored.getElementsByTagName("input").length; intList++) {
if (rbPSUserMonitored.getElementsByTagName("input")[intList].checked) {
//set the context
this.strPSUserMonitored = rbPSUserMonitored.getElementsByTagName("input")[intList].value;
break;
}
}
}
//PURPOSE: To handle grid related commands
//CREATED: By CH on February 13, 2009
function grdPOHeader_OnCommand(sender, args) {
//set cancel to true we will handle the server call on the client side
//and call the web service method to populate the grid with the approprite data.
args.set_cancel(true);
//determine what command is calling the function
var commandName = args.get_commandName();
//determine the current table view
var tableView = grdPOHeader.get_masterTableView();
tableView.selectItem(tableView.get_dataItems()[intRowIndex].get_element(), true);
//determine what the user selected
switch (commandName) {
case "ViewSupplier":
// display history via tooltip manager
var viewSupplier = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[intRowIndex], "ViewSupplier");
showToolTip(ttmViewSupplier, viewSupplier, intRowIndex, commandName);
break;
case "ViewDetails":
//open a radWindow to perform the edit
launchDetailWindow(strPONumber);
break;
case "ViewHistory":
// display history via tooltip manager
var viewHistory = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[intRowIndex], "ViewHistory");
showToolTip(ttmViewHistory, viewHistory, intRowIndex, commandName);
break;
default:
//call our custom function on the client to call the web service and
//populate the grid with the appropriate data.
bindGrid(commandName);
}
}
//PURPOSE: Calls the context menu
//CREATED: By CH on February 13, 2009
function grdPOHeader_OnRowContextMenu(sender, eventArgs) {
var menu = cmPOHeader;
var evt = eventArgs.get_domEvent();
if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
return;
}
var tableView = sender.get_masterTableView();
//select the row that was clicked
tableView.selectItem(tableView.get_dataItems()[intRowIndex].get_element(), true);
strPONumber = eventArgs.getDataKeyValue("Purchase_Order_Number");
menu.show(evt);
evt.cancelBubble = true;
evt.returnValue = false;
if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
}
//PURPOSE: To keep track of the last row the mouse was over
//CREATED: By CH on February 13, 2009
function grdPOHeader_OnRowMouseOver(sender, eventArgs) {
strPONumber = eventArgs.getDataKeyValue("Purchase_Order_Number");
strSupplierCode = eventArgs.getDataKeyValue("Supplier_Code");
intRowIndex = eventArgs.get_itemIndexHierarchical();
}
//PURPOSE: Initializes the combo extentions
//CREATED: By CH on March 4, 2009
function initComboExtensions() {
//extend radCombobox class
Telerik.Web.UI.RadComboBox.prototype.onDataBound = null;
}
//PURPOSE: Launches the radwindow
//CREATED: By CH on February 23, 2009
function launchDetailWindow(strPONumber) {
var winManager = wnmPOHeader;
//switch (strMode) {
//case "View":
var oWndEdit = winManager.getWindowByName("ViewDetails");
if (oWndEdit == null) {
//open a radWindow to perform the view
oWndEdit = radopen("PurchaseOrderView.aspx?strPONumber=" + strPONumber, "ViewDetails");
oWndEdit.set_title("View Details");
oWndEdit.setSize(800, 425);
oWndEdit.center();
}
else {
//refresh the existing window with the current PO to be viewed
oWndEdit.get_contentFrame().contentWindow.updateWindow(strPONumber);
oWndEdit.restore();
}
//break;
//}
}
//PURPOSE: To show the tool tips
//CREATED: By CH on February 17, 2009
function showToolTip(tooltipManager, element, rowID, commandName) {
//If the user hovers the link before the page has loaded, there is no manager created
if (!tooltipManager) return;
//Find the tooltip for this element if it has been created
var tooltip = tooltipManager.getToolTipByElement(element);
//Create a tooltip if no tooltip exists for this element
if (!tooltip) {
switch (commandName) {
case "ViewSupplier":
// attach tooltip via tooltip manager
tooltipManager.beginUpdate();
tooltip = tooltipManager.createToolTip(element);
tooltipManager.set_targetControl(element);
tooltip.set_value(strSupplierCode + '&' + rowID);
tooltipManager.endUpdate();
break;
case "ViewDetails":
// attach tooltip via tooltip manager
tooltipManager.beginUpdate();
tooltip = tooltipManager.createToolTip(element);
tooltipManager.set_targetControl(element);
tooltip.set_value(strPONumber + '&' + rowID);
tooltipManager.endUpdate();
break;
case "ViewHistory":
// attach tooltip via tooltip manager
tooltipManager.beginUpdate();
tooltip = tooltipManager.createToolTip(element);
tooltipManager.set_targetControl(element);
tooltip.set_value(strPONumber + '&' + rowID);
tooltipManager.endUpdate();
break;
}
}
tooltip.show();
}
//PURPOSE: Manages the way the status area works
//CREATED: By CH on February 10, 2009
function status_onclick(sender, eventArgs) {
var blnAll = null;
//If the calling control is the select all div the bln is true, otherwise false
//When a checkbox is clicked the sender.target.id is defined, but when the div is called it is not defined
if ((sender.target.id == chkNew.id) || (sender.target.id == chkChanged.id) || (sender.target.id == chkSupplierAccepted.id) || (sender.target.id == chkChangePending.id) || (sender.target.id == chkDeleted.id)) blnAll = false;
else blnAll = true;
if ((blnAll == true) && (divSelectAll.innerHTML == '<U>Select all</U>')) {
chkNew.checked = true;
chkChanged.checked = true;
chkSupplierAccepted.checked = true;
chkChangePending.checked = true;
chkDeleted.checked = true;
divSelectAll.innerHTML = '<U>Deselect all</U>';
}
else if ((blnAll == true) && (divSelectAll.innerHTML == '<U>Deselect all</U>')) {
chkNew.checked = false;
chkChanged.checked = false;
chkSupplierAccepted.checked = false;
chkChangePending.checked = false;
chkDeleted.checked = false;
divSelectAll.innerHTML = '<U>Select all</U>';
}
else if (blnAll == false) {
if ((chkNew.checked == true) && (chkChanged.checked == true) && (chkSupplierAccepted.checked == true) && (chkChangePending.checked == true) && (chkDeleted.checked == true)) {
divSelectAll.innerHTML = '<U>Deselect all</U>';
}
else {
divSelectAll.innerHTML = '<U>Select all</U>';
}
}
return;
}
//PURPOSE: Binds the data to the grid
//CREATED: By CH on February 16, 2009
function updateGrid(data) {
var tableView = grdPOHeader.get_masterTableView();
tableView.set_dataSource(data);
tableView.dataBind();
// Hide the RadAjaxLoadingPanel
lpPOLoadingPanel.hide(grdPOHeader.get_id());
//update the text of all link button columns
updateLinkButtons(data);
//Update the Supplier tooltips in the grid
updateToolTips(ttmViewSupplier);
//Update the Address tooltips in the grid
updateToolTips(ttmViewDetails);
//Update the view history tooltips in the grid
updateToolTips(ttmViewHistory);
}
//PURPOSE: Updates the grid data count
//CREATED: By CH on February 17, 2009
function updateGridItemCount(itemCount) {
var tableView = grdPOHeader.get_masterTableView();
tableView.set_virtualItemCount(itemCount);
// function updateVirtualItemCount(result) {
// var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
// tableView.set_virtualItemCount(result);
// var pagerDiv = $get("pagerTemplate");
// if (pagerDiv) {
// pagerDiv.innerHTML = "";
// for (var i = 1, len = Math.ceil(result / tableView.get_pageSize()); i <= len; i++) {
// var link = document.createElement("a");
// link.href = "#";
// link.innerHTML = i;
// link.onclick = function(index) {
// var pageIndex = index;
// return function() { tableView.page(pageIndex); }
// } (i);
// pagerDiv.appendChild(link);
// pagerDiv.appendChild(document.createTextNode(" "));
// }
// }
// }
}
//PURPOSE: Update link buttons
//CREATED: By CH on February 19, 2009
function updateLinkButtons(data) {
//get the master table view
var tableView = grdPOHeader.get_masterTableView();
//declare the cell object
var cell = null;
//loop through each record in the grid
for (i = 0; i < data.length; i++) {
//update the view details cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "ViewSupplier")
//update the value
cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">" + data[i]["Supplier_Code"].toString() + "<");
//update the view details cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "ViewDetails")
//update the value
cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">" + data[i]["Total_Details"].toString() + "<");
//update the view history cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "ViewHistory")
//update the value
cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">View<");
//num.toFixed(2)
//update the view history cell
cell = tableView.getCellByColumnUniqueName(tableView.get_dataItems()[i], "Amendment_Number")
//update the value
//cell.innerHTML = cell.innerHTML.replace(">" + cell.innerText + "<", ">View<");
cell.innerHTML = cell.innerHTML.replace(cell.innerText, data[i]["Amendment_Number"].toFixed(0));
}
}
//PURPOSE: Updates the tool tip values when the grid is refreshed
//CREATED: By CH on February 19, 2009
function updateToolTips(tooltipManager) {
//If the user hovers the link before the page has loaded, there is no manager created
if (!tooltipManager) return;
var toolTipArray = tooltipManager.get_toolTips();
if (!toolTipArray) return;
var ttmID = tooltipManager.get_id();
var strcontextValue = null;
var strcontextArray = null;
var rowID = null;
var tableView = null;
switch (ttmID) {
case ttmViewSupplier.get_id():
var strSupplierCode = null;
for (i = 0; i < toolTipArray.length; i++) {
strcontextValue = toolTipArray[i].get_value();
strcontextArray = strcontextValue.split('&');
rowID = parseInt(strcontextArray[1]);
tableView = grdPOHeader.get_masterTableView();
strSupplierCode = tableView.get_dataItems()[rowID]._dataItem["Supplier_Code"];
if (strcontextArray[0] != strSupplierCode) {
//need to update the tooltip
tooltipManager.beginUpdate();
toolTipArray[i].set_value(strSupplierCode + '&' + rowID);
tooltipManager.endUpdate();
}
}
break;
default:
var strPONumber = null;
for (i = 0; i < toolTipArray.length; i++) {
strcontextValue = toolTipArray[i].get_value();
strcontextArray = strcontextValue.split('&');
rowID = parseInt(strcontextArray[1]);
tableView = grdPOHeader.get_masterTableView();
var strPONumber = tableView.get_dataItems()[rowID]._dataItem["Purchase_Order_Number"];
if (strcontextArray[0] != strPONumber) {
//need to update the tooltip
tooltipManager.beginUpdate();
toolTipArray[i].set_value(strPONumber + '&' + rowID);
tooltipManager.endUpdate();
}
}
}
}
//PURPOSE: Returns an error if the web service call fails
//CREATED: By CH on February 17, 2009
function webServiceCallFailed(args) {
radalert("Web service call failed with the following exception.\n"
+ args.get_exceptionType()
+ ": "
+ args.get_message());
}
0
Hello Cynthia,
The column aggregates feature is not supported with client-side binding. It works only with server-side binding.
If you need to have client-side aggregation, you should make the calculation by yourself. You can use the OnRowDataBound event in order to get the required value for each row and to perform the necessary calculation. Here is an online demo which illustrates sample approach:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandinput/defaultcs.aspx?product=grid
Best regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
The column aggregates feature is not supported with client-side binding. It works only with server-side binding.
If you need to have client-side aggregation, you should make the calculation by yourself. You can use the OnRowDataBound event in order to get the required value for each row and to perform the necessary calculation. Here is an online demo which illustrates sample approach:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandinput/defaultcs.aspx?product=grid
Best regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Cynthia
Top achievements
Rank 1
Rank 1
answered on 07 Apr 2009, 03:50 PM
You should consider the client side aggregates as a future enhancement. It would help tremendously.
Your sample unfortunately does not help me. Is there any way client side to access the footer columns when the data is bound client side? I can access the sum of the columns from the web service, but how can I update the value in the footer.
Regards,
Cynthia
Your sample unfortunately does not help me. Is there any way client side to access the footer columns when the data is bound client side? I can access the sum of the columns from the web service, but how can I update the value in the footer.
Regards,
Cynthia
0
Hello Cynthia,
I will forward your suggestion to our developers for further consideration.
To obtain reference to the grid footer item, you should use get_masterTableViewFooter() method. Here is a code snippet showing how to use this method to get the collection of the cells in the footer item:
After required calculations are made you can get the corresponding cell and apply the respective text in it.
Best regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
I will forward your suggestion to our developers for further consideration.
To obtain reference to the grid footer item, you should use get_masterTableViewFooter() method. Here is a code snippet showing how to use this method to get the collection of the cells in the footer item:
| $find("RadGrid1").get_masterTableViewFooter().get_element().cells |
After required calculations are made you can get the corresponding cell and apply the respective text in it.
Best regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Cynthia
Top achievements
Rank 1
Rank 1
answered on 22 Jun 2009, 05:05 PM
The $find("RadGrid1").get_masterTableViewFooter() object is NULL. This solution did not work for me.
Cynthia
Cynthia
0
Hello Cynthia,
Excuse me for the misunderstanding.
To achieve your goal you can use the following code:
or jQuery equivalent:
Regards, Georgi Krustev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Excuse me for the misunderstanding.
To achieve your goal you can use the following code:
| $find("RadGrid1").get_masterTableView().get_element().tFoot.rows[0]; |
| $telerik.$(".rgFooter"); |
Regards, Georgi Krustev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.