Questions on UI for ASP.NET AJAX Forum

9 answers

259 views

How to make column click sort and resize?

Hi All,
When I create a Grid, I want the columns are available to sort data by clicking header, and resizable. But I don't know where to set the property.

Thanks~!

Grid

answered on 02 Nov 2012

8 answers

186 views

Problem editing RadGrid

I'm working off of the following example to implement editing of a cell in my grid when the cell is clicked:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultcs.aspx

I'd like it to work just like in the example, but based on a single-click. I can't get it to work as I keep getting the following error buried away in Telerik.Web.UI.WebResource:

0x800a139e - Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: The string was not recognized as a valid format.

If anyone can lend any assistance, I will you owe you my first-born, as I am pulling my hair out trying to get this to work.

Thank you

My markup is below:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var hasChanges, inputs, dropdowns, editedRow;

function RowClick(sender, eventArgs) {

if (editedRow && hasChanges) {

hasChanges = false;

if (confirm("Update changes?")) {

$find("<%= detailsGrid.ClientID %>").get_masterTableView().updateItem(editedRow);

}

function RowDblClick(sender, eventArgs) {

editedRow = eventArgs.get_itemIndexHierarchical();

$find("<%= detailsGrid.ClientID %>").get_masterTableView().editItem(editedRow);

}

function GridCommand(sender, args) {

if (args.get_commandName() != "Edit") {

editedRow = null;

}

function GridCreated(sender, eventArgs) {

var gridElement = sender.get_element();

var elementsToUse = [];

inputs = gridElement.getElementsByTagName("input");

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

var lowerType = inputs[i].type.toLowerCase();

if (lowerType == "hidden" || lowerType == "button" || lowerType == "checkbox") {

continue;

}

if (inputs[i].id.indexOf("PageSizeComboBox") == -1) {

Array.add(elementsToUse, inputs[i]);

}

inputs[i].onchange = TrackChanges;

}

setTimeout(function () { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);

}

function TrackChanges(e) {

hasChanges = true;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Office2010Blue" MultiPageID="radPageViews" SelectedIndex="0" Align="Justify" Width="220px"

ReorderTabsOnSelect="true">

<Tabs>

<telerik:RadTab Text="Details" />

<telerik:RadTab Text="Summary" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="radPageViews" SelectedIndex="0" CssClass="multiPage">

<telerik:RadPageView ID="RadPageView1" runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="detailsGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="detailsGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="detailsGrid" runat="server" CellSpacing="0" Skin="Office2007" GridLines="Vertical" AllowSorting="true" AllowPaging="true"

PageSize="10" AllowMultiRowSelection="true" OnNeedDataSource="detailsGrid_NeedDataSource" OnItemDataBound="detailsGrid_ItemDataBound"

OnItemCreated="detailsGrid_ItemCreated" OnItemUpdated="detailsGrid_ItemUpdated" AllowAutomaticUpdates="true">

<ClientSettings ReorderColumnsOnClient="true" Selecting-CellSelectionMode="SingleCell">

<Resizing AllowColumnResize="true" EnableRealTimeResize="true" ShowRowIndicatorColumn="true" AllowResizeToFit="true" />

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" DataKeyNames="actualid" ShowFooter="true" EditMode="InPlace">

<HeaderStyle HorizontalAlign="Center" Width="135px" Font-Bold="true" />

<Columns>

<telerik:GridTemplateColumn HeaderText="Exclude" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="80px">

<ItemTemplate>

<asp:CheckBox runat="server" ID="ExcludeCheckBox" AutoPostBack="true" Checked='<%# bool.Parse(Eval("Exclude").ToString()) %>'

OnCheckedChanged="ExcludeCheckBox_CheckedChanged" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridCheckBoxColumn UniqueName="detailsGridDeltaOppCol" HeaderText="Delta Opp" DataField="DeltaOpp" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="false" HeaderStyle-Width="80px" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridOppManagerCol" HeaderText="Opp Manager" DataField="FullName" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridVerticalTeamCol" HeaderText="Vertical Team" DataField="VerticalTeam" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridIndustryCol" HeaderText="Industry" DataField="Industry" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridAccountCol" HeaderText="Account" DataField="Account" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridOpportunityCol" HeaderText="Opportunity" DataField="OpportunityName" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridSKUCol" HeaderText="SKU" DataField="ActualID" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridDateTimeColumn UniqueName="detailsGridFirstShipDateCol" HeaderText="First Ship Date" DataField="FirstShipDate" DataFormatString="{0:MM/dd/yyyy}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridQuantityCol" HeaderText="Quantity" DataField="Quantity" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridUnitPriceCol" HeaderText="Unit Price" DataField="UnitPrice" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridTotalCol" HeaderText="Total" DataField="Total" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridProbabilityCol" HeaderText="Probability" DataField="Probability" ItemStyle-HorizontalAlign="Right" DataFormatString="{0}%" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridDealerCol" HeaderText="Dealer" DataField="Dealer" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridScreenTypeCol" HeaderText="Screen Type" DataField="ScreenType" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridCompanyCol" HeaderText="Company" DataField="Company" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridFactoryCol" HeaderText="Factory" DataField="Factory" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridProductDescCol" HeaderText="Prod. Description" DataField="ProductDescription" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridProductFamilyCol" HeaderText="Product Family" DataField="ProductFamily" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthOneCol" DataField="MonthOne" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthOneCostCol" DataField="MonthOneCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthTwoCol" DataField="MonthTwo" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthTwoCostCol" DataField="MonthTwoCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthThreeCol" DataField="MonthThree" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthThreeCostCol" DataField="MonthThreeCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFourCol" DataField="MonthFour" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFourCostCol" DataField="MonthFourCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFiveCol" DataField="MonthFive" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFiveCostCol" DataField="MonthFiveCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthSixCol" DataField="MonthSix" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthSixCostCol" DataField="MonthSixCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridTotalQtyCol" HeaderText="Total Qty." DataField="TotalQuantity" ItemStyle-HorizontalAlign="Right" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridTotalRevCol" HeaderText="Total Rev." DataField="TotalRevenue" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridNextUserCol" HeaderText="Next User" DataField="NextUser" ReadOnly="true" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:GridNumericColumnEditor ID="numericColumnEditor" runat="server" NumericTextBox-Width="20px" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

</telerik:RadPageView>

</telerik:RadMultiPage>

General Discussions

answered on 02 Nov 2012

4 answers

791 views

RadioButton toggle programatically client-side

Hi,

I want to toggle a RadioButton client-side. If I use .set_checked(true), the previously checked RadioButton (same group) is still checked. If I use .click(), nothing happens (it returns false). How can I toggle a RadioButton programatically client-side so that the previously toggled buttons gets unchecked?

Thanks!

Button

answered on 02 Nov 2012

1 answer

56 views

TreeView Load on Demand issue

Edit/UPdate:

I originally thought the issue was due to the treeview being in a sliding control, but I have determined that actually it is because I have the control on a master page.

I created a simple page exactly like the master page (minus the content place holder stuff) and it works perfectly. When the tree is placed into a master page however it does not fire events to load nodes of the tree. Something about it being in a master page?

Any advice?

TreeView

answered on 02 Nov 2012

0 answers

72 views

Binding the RadGrid dynamically with RadEditor in javascript

Hello,

I have a RadGrid with 4 template columns.
1. ASP:TextBox
2. RadEditor
3. ASP:LinkButton (ADD)
4. ASP:LinkButton. (DELETE)

When we click on "ADD" button we are adding a new row next to the selected row. Same way we are deleting the selected row on click of "DELETE" button. This we are doing in postback by rebinding the RadGrid. We need to avoid the postback and Add/Delete rows dynamically in javascript. Please provide the solution. Please find herewith the sample code that we are doing in code behind.

FYI: we are using net framework 4.0 and the Telerik.Web.UI.dll version is v. 2011.2.915.40

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadGridTesting.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerikControls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="../../TelerikCSS_ETO/Grid.ETOGrid.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="scrpt1" runat="server"></asp:ScriptManager>

<div>

<telerikControls:RadGrid ID="gvTest" runat="server" GridLines="None"

onitemcommand="gvTest_ItemCommand"

onneeddatasource="gvTest_NeedDataSource">

<MasterTableView AutoGenerateColumns="false" ShowFooter="true" Width="100%" TableLayout="Auto"

HeaderStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Font-Bold="true"

ViewStateMode="Enabled" ItemStyle-VerticalAlign="Middle" ExpandCollapseColumn-Display="false"

ExpandCollapseColumn-Visible="false">

<Columns>

<telerikControls:GridTemplateColumn>

<ItemTemplate>

<asp:TextBox ID="txtsno" MaxLength="3" runat="server" Width="25px" Text='<%# Eval("sno") %>'></asp:TextBox>

</ItemTemplate>

</telerikControls:GridTemplateColumn>

<telerikControls:GridTemplateColumn HeaderStyle-HorizontalAlign="Left">

<ItemTemplate>

<telerikControls:RadEditor ID="txt1" runat="server" Height="25px" ToolsWidth="130px"

Content='<%# DataBinder.Eval(Container.DataItem, "text") %>'

ToolbarMode="ShowOnFocus" EditModes="Design" ContentFilters="DefaultFilters" />

</ItemTemplate>

</telerikControls:GridTemplateColumn>

<telerikControls:GridTemplateColumn ItemStyle-VerticalAlign="Top">

<ItemTemplate>

<asp:LinkButton ID="lbtn1" CausesValidation="false" CommandName="DELETE" Text="Delete"

runat="server"></asp:LinkButton>

</ItemTemplate>

</telerikControls:GridTemplateColumn>

<telerikControls:GridTemplateColumn ItemStyle-VerticalAlign="Top">

<ItemTemplate>

<asp:LinkButton ID="lbtn2" CausesValidation="false" CommandName="ADD" Text="Add"

runat="server"></asp:LinkButton>

</ItemTemplate>

</telerikControls:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerikControls:RadGrid>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace RadGridTesting

{

public partial class WebForm1 : System.Web.UI.Page

{

List<DataText> lstList = new List<DataText>();

protected void Page_Load(object sender, EventArgs e)

{

}

/// <summary>

/// Add and remove row

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void gvTest_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

{

if (e.CommandName == "ADD")

{

GridDataItem item = (GridDataItem)((LinkButton)e.CommandSource).NamingContainer;

lstList = BindGrid(item.ItemIndex, "Add");

this.gvTest.Rebind();

}

else if (e.CommandName == "DELETE")

{

GridDataItem item = (GridDataItem)((LinkButton)e.CommandSource).NamingContainer;

lstList = BindGrid(item.ItemIndex, "Delete");

this.gvTest.Rebind();

}

protected void gvTest_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

if (!IsPostBack)

{

lstList = new List<DataText> {

new DataText{ sno = 1 , text = "A"},

new DataText{ sno = 2 , text = "B"},

new DataText{ sno = 3 , text = "C"},

new DataText{ sno = 4 , text = "D"},

new DataText{ sno = 5 , text = "E"}

};

}

this.gvTest.DataSource = lstList;

}

private List<DataText> BindGrid(int _RowID, string opAddDelete)

{

lstList = new List<DataText>();

int sno = 1;

foreach (GridDataItem item in this.gvTest.Items)

{

RadEditor txt1 = (RadEditor)item.FindControl("txt1");

DataText dt = new DataText();

if (opAddDelete == "Delete" && item.ItemIndex == _RowID)

{

}

else

{

dt.sno = sno;

dt.text = txt1.Text;

lstList.Add(dt);

sno++;

}

if (opAddDelete == "Add" && item.ItemIndex == _RowID)

{

dt = new DataText();

dt.sno = sno;

lstList.Add(dt);

sno++;

}

return lstList;

}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace RadGridTesting

{

public class DataText

{

public int sno { get; set; }

public string text { get; set; }

}

Grid

asked on 02 Nov 2012

1 answer

69 views

How do you format the chart

Was an issue on my side....

Chart (HTML5)

answered on 02 Nov 2012

5 answers

271 views

Client Side Rad Grid Binding- How to pass extra arguments to web service method (GetData or GetDataAndCount) other than 4 default arguments and bind grid on a button click with an asynchronous call to

Client Side Rad Grid Binding- How to pass extra arguments to web service method (GetData or GetDataAndCount) other than 4 default arguments and bind grid on a button click with an asynchronous call to web service.

I am trying to use client side binding of Rad Grid as demonstrated on the following link http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx. My scenario is a bit different from this one. I want to pass in some 4-5 extra arguments to my web service method from the top level filter controls (not column level filter) on top of the page and then I want to rebind my grid by making an asynchronous call to my web service on a button click without a postback.

Grid

answered on 02 Nov 2012

4 answers

258 views

Drag and drop works only once

Hello,

I am using the RadAsyncUpload control to upload filesd to our website. Everything works fine except the drag and drop upload. I can manually add as many files as I want by clicking on the button, but I can only add one file trough drag and drop either trough the control itself or the drop zone. Any subsequent attempts to add a file by dropping it results in a "Uncaught TypeError: Cannot read property 'input' of undefined" in chrome or a "TypeError: p is undefined" in firebug. I tried playing with the AutoAddFileInputs parameter without success.

right now the tag looks like this :

<telerik:RadAsyncUpload runat="server" ID="rfUpload" Width="225px"



DropZones

="#DropZone" MultipleFileSelection="Automatic" AutoAddFileInputs="true"



OnClientAdded

="fiad" OnClientFileUploadRemoved="fiad" OnClientFileUploaded="fiup"
UploadedFilesRendering="BelowFileInput" />

and I can drag and drop several files at once but not one after the other.

I use Visual Studio 2012, RadControls Q3 2012, Windows 8 and .net framework 4.0 and we mainly use VB ( a C# solution would be fine since I'm fluent in both)

AsyncUpload

answered on 02 Nov 2012

3 answers

127 views

Controls not rendering behind F5 and SSL

My environment, (client -> HTTPS -> F5 -> HTTP -> web server)

I have a RadTabStrip and a RadGrid on a page, the initial page load seems to render the controls fine, but when I do a page refresh the rendering on the controls gets all skewed.

And ideas?

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">

<ClientEvents OnRequestStart="onRequestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grdItemComp">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdItemComp" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdItemComp" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" UpdatePanelRenderMode="Inline" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="cbVendorsMain">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdItemComp" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="lblVendorItemsOnFile" />

<telerik:AjaxUpdatedControl ControlID="cbVendors" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div class="wrapper">

<div class="IC_Header_Right">

<p>Last Vendor Data Upload:

<asp:Label runat="server" ID="lblLasVendorUpload" Text="" Font-Underline="true" /></p>

<b><asp:Label runat="server" ID="lblVendorItemsOnFile" Text="" /></b>

</div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue">

</telerik:RadAjaxLoadingPanel>

<div class="IC_TabStrip">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" ontabclick="RadTabStrip1_TabClick" EnableAjaxSkinRendering="true">

<Tabs>

<telerik:RadTab runat="server" Text="Matching" />

<telerik:RadTab runat="server" Text="Discrepancies" Selected="True" />

<telerik:RadTab runat="server" Text="Not in Our Item File" />

<telerik:RadTab runat="server" Text="Not in Their File" />

</Tabs>

</telerik:RadTabStrip>

<div id="divgrid" class="IC_Grid">

<telerik:RadGrid ID="grdItemComp" runat="server" Skin="Windows7" EnableAjaxSkinRendering="true"

CellSpacing="0" GridLines="None" AutoGenerateColumns="False" AllowPaging="True"

PageSize="17" onpageindexchanged="grdItemComp_PageIndexChanged"

onneeddatasource="grdItemComp_NeedDataSource"

onitemcommand="grdItemComp_ItemCommand" >

<ClientSettings>

<Selecting CellSelectionMode="None"></Selecting>

</ClientSettings>

<ExportSettings HideStructureColumns="true" />

<MasterTableView CommandItemDisplay="Bottom" UseAllDataFields="true">

<CommandItemSettings ShowRefreshButton="false" ShowAddNewRecordButton="false" ShowExportToExcelButton="true"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="UPC" HeaderText="UPC" UniqueName="UPC">

<HeaderStyle Width="50px" />

<ItemStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SB_ITEM_NO" HeaderText="Our Item No" UniqueName="SB_ITEM_NO">

<HeaderStyle Width="50px" />

<ItemStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VENDOR_ITEM_DESC" HeaderText="Their Item Description" UniqueName="VENDOR_ITEM_DESC" DataFormatString="<nobr>{0}</nobr>">

<HeaderStyle Width="250px" />

<ItemStyle Width="250px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VENDOR_ITEM_SIZE" HeaderText="Their Item Size" UniqueName="VENDOR_ITEM_SIZE" DataFormatString="<nobr>{0}</nobr>">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SB_ITEM_DESC" HeaderText="Our Item Description" UniqueName="SB_ITEM_DESC" DataFormatString="<nobr>{0}</nobr>">

<HeaderStyle Width="250px" />

<ItemStyle Width="250px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SB_ITEM_SIZE" HeaderText="S.B. Item Size" UniqueName="SB_ITEM_SIZE" DataFormatString="<nobr>{0}</nobr>">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="VENDOR_BASE_COST" HeaderText="Vendor Base Cost" UniqueName="Vendor_BASE_COST" DataFormatString="{0:###,##0.00###}" >