Hi,
I'm learning how to update a shopping cart by clicking a button on RadGrid control.
I have a RadMenu on a Master page. One of the menu items contain the cart which I simplify to a single RadButton.
I also have RadAjaxMenager on the Master Page.
RadGrid with the button to update the cart is built dynamically on "Inventory" page linked to my Master page.
For experimenting purposes I would like to increase the number on the button placed in the cart. When I click the button on grid the button on grid should be updated but is not.
Whole concept is taken from your example:
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx
The only difference is that I'm building my grid dynamically and I think this is the cause of the problem. I have tried to implement the example using markup and it was fine...
Here is my code for the master Page
Code of the "Inventory" page linked to a master
I also attach a screen of the sample app
jacob
I'm learning how to update a shopping cart by clicking a button on RadGrid control.
I have a RadMenu on a Master page. One of the menu items contain the cart which I simplify to a single RadButton.
I also have RadAjaxMenager on the Master Page.
RadGrid with the button to update the cart is built dynamically on "Inventory" page linked to my Master page.
For experimenting purposes I would like to increase the number on the button placed in the cart. When I click the button on grid the button on grid should be updated but is not.
Whole concept is taken from your example:
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx
The only difference is that I'm building my grid dynamically and I think this is the cause of the problem. I have tried to implement the example using markup and it was fine...
Here is my code for the master Page
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
type
=
"text/css"
href
=
"siteStyle.css"
rel
=
"stylesheet"
/>
<
asp:ContentPlaceHolder
ID
=
"head"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
script
type
=
"text/javascript"
>
//Put your JavaScript code here.
</
script
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
></
telerik:AjaxUpdatedControl
>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
>
</
telerik:RadAjaxLoadingPanel
>
<
div
id
=
"wraper"
>
<
div
id
=
"header"
>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
ShowChooser
=
"True"
></
telerik:RadSkinManager
>
</
div
>
<
telerik:RadMenu
ID
=
"menu"
runat
=
"server"
Width
=
"100%"
ClientIDMode
=
"Static"
>
<
Items
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Home"
NavigateUrl
=
"~/Home.aspx"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Inventory"
NavigateUrl
=
"~/Inventory.aspx"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"My Account"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Support"
NavigateUrl
=
"~/Support.aspx"
>
<
Items
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"FAQ"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Shipping"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Payments"
>
</
telerik:RadMenuItem
>
</
Items
>
<
GroupSettings
Flow
=
"Horizontal"
/>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Cart"
>
<
Items
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"SubCart"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"RadButton1"
runat
=
"server"
Text
=
"1"
></
telerik:RadButton
>
<
telerik:RadGrid
ID
=
"grdCartItems"
runat
=
"server"
></
telerik:RadGrid
>
</
ItemTemplate
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenu
>
<
div
style
=
"clear: both"
></
div
>
<
div
id
=
"masterContainer"
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
div
>
<
div
id
=
"footer"
></
div
>
</
div
>
</
form
>
</
body
>
</
html
>
Code of the "Inventory" page linked to a master
Imports
Telerik.Web.UI
Imports
System.Data
Partial
Class
Inventory
Inherits
System.Web.UI.Page
Dim
grid
As
New
RadGrid
Protected
Sub
Page_Init(sender
As
Object
, e
As
EventArgs)
Handles
Me
.Init
CreateGrid()
End
Sub
Protected
Sub
Page_Load(sender
As
Object
, e
As
EventArgs)
Handles
Me
.Load
If
IsPostBack
Then
Exit
Sub
Dim
grid1
As
RadGrid =
CType
(PlaceHolder1.FindControl(
"RadGrid1"
), RadGrid)
Dim
ajaxMenager
As
RadAjaxManager = Master.FindControl(
"RadAjaxManager1"
)
ajaxMenager.AjaxSettings.AddAjaxSetting(grid1, grid1)
End
Sub
Public
Sub
CreateGrid()
grid =
New
RadGrid
grid.ID =
"RadGrid1"
grid.Width = Unit.Percentage(100)
grid.PageSize = 15
grid.AllowPaging =
True
grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric
grid.AutoGenerateColumns =
False
grid.ClientIDMode = UI.ClientIDMode.
Static
grid.MasterTableView.Width = Unit.Percentage(100)
grid.MasterTableView.DataKeyNames =
New
String
() {
"ID"
}
Dim
boundColumn
As
New
GridBoundColumn()
boundColumn =
New
GridBoundColumn()
boundColumn.DataField =
"Code"
boundColumn.HeaderText =
"Code"
grid.MasterTableView.Columns.Add(boundColumn)
Dim
tableViewOrders
As
GridTableView
tableViewOrders =
New
GridTableView(grid)
tableViewOrders.Width = Unit.Percentage(100)
boundColumn =
New
GridBoundColumn()
boundColumn.DataField =
"Code"
boundColumn.HeaderText =
"Code"
tableViewOrders.Columns.Add(boundColumn)
Dim
toCartCollumn
As
New
GridTemplateColumn
toCartCollumn =
New
GridTemplateColumn
toCartCollumn.ItemTemplate =
New
MyTemplate()
toCartCollumn.UniqueName =
"TemplateColumn1"
toCartCollumn.DataField =
"Code11"
tableViewOrders.Columns.Add(toCartCollumn)
grid.MasterTableView.DetailTables.Add(tableViewOrders)
AddHandler
grid.NeedDataSource,
AddressOf
RadGrid1_NeedDataSource
AddHandler
grid.DetailTableDataBind,
AddressOf
RadGrid1_DetailTableDataBind
AddHandler
grid.ItemCommand,
AddressOf
RadGrid1_ItemCommand
AddHandler
grid.ItemCreated,
AddressOf
RadGrid1_ItemCreated
PlaceHolder1.Controls.Add(grid)
End
Sub
Private
Sub
RadGrid1_DetailTableDataBind(
ByVal
source
As
Object
,
ByVal
e
As
GridDetailTableDataBindEventArgs)
Dim
list
As
List(Of Listing) = grid.DataSource
Dim
dataItem
As
GridDataItem =
CType
(e.DetailTableView.ParentItem, GridDataItem)
Dim
id
As
Integer
= dataItem.GetDataKeyValue(
"ID"
)
Dim
detailList = (From l
In
list Where l.ID = id
Select
l.Items).First.ToList
e.DetailTableView.DataSource = detailList
End
Sub
Public
Function
CreateListings(itemsCount
As
Integer
)
As
List(Of Listing)
Dim
list
As
New
List(Of Listing)
For
i = 0
To
itemsCount
list.Add(
New
Listing(i))
Next
Return
list
End
Function
Protected
Sub
RadGrid1_ItemCommand(sender
As
Object
, e
As
GridCommandEventArgs)
If
e.CommandName =
"AddToCart"
Then
Dim
menu
As
RadMenu = Master.FindControl(
"menu"
)
Dim
buttonToUpdate
As
RadButton = menu.FindItemByText(
"SubCart"
).FindControl(
"RadButton1"
)
buttonToUpdate.Text =
CInt
(buttonToUpdate.Text) + 1
End
If
End
Sub
Protected
Sub
RadGrid1_ItemCreated(sender
As
Object
, e
As
GridItemEventArgs)
If
TypeOf
e.Item
Is
GridDataItem
Then
If
e.Item.DataItem
Is
Nothing
Then
Exit
Sub
If
e.Item.DataItem.
GetType
.Name =
"ListingItem"
Then
Dim
dataItem
As
GridDataItem = TryCast(e.Item, GridDataItem)
Dim
tc
As
TableCell = dataItem(
"TemplateColumn1"
)
Dim
button
As
Button = tc.FindControl(
"ibtnAddToCart"
)
Dim
ajaxMenager
As
RadAjaxManager = Master.FindControl(
"RadAjaxManager1"
)
Dim
menu
As
RadMenu = Master.FindControl(
"menu"
)
Dim
buttonToUpdate = menu.FindItemByText(
"SubCart"
).FindControl(
"RadButton1"
)
ajaxMenager.AjaxSettings.AddAjaxSetting(button, buttonToUpdate)
End
If
End
If
End
Sub
Protected
Sub
RadGrid1_NeedDataSource(sender
As
Object
, e
As
GridNeedDataSourceEventArgs)
grid.DataSource = CreateListings(15)
End
Sub
Private
Class
MyTemplate
Implements
ITemplate
Protected
ibtnAddToCart
As
Button
Public
Sub
InstantiateIn(
ByVal
container
As
System.Web.UI.Control)
Implements
ITemplate.InstantiateIn
ibtnAddToCart =
New
Button()
ibtnAddToCart.ID =
"ibtnAddToCart"
AddHandler
ibtnAddToCart.DataBinding,
AddressOf
boolValue_DataBinding
ibtnAddToCart.CommandName =
"AddToCart"
container.Controls.Add(ibtnAddToCart)
End
Sub
Sub
boolValue_DataBinding(
ByVal
sender
As
Object
,
ByVal
e
As
EventArgs)
Dim
cBox
As
Button =
DirectCast
(sender, Button)
Dim
container
As
GridDataItem =
DirectCast
(cBox.NamingContainer, GridDataItem)
Dim
listingitem =
DirectCast
(container.DataItem, ListingItem)
cBox.Text = listingitem.Code
End
Sub
End
Class
End
Class
I also attach a screen of the sample app
jacob