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

[Solved] Grid with button updating cart

2 Answers 161 Views

Grid

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

Jakub asked on 02 Aug 2013, 08:12 AM

cartSample.jpg

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

<%@ 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 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

I also attach a screen of the sample app
jacob

2 Answers, 1 is accepted

answered on 06 Aug 2013, 05:05 PM

Hi Jakub,

Can you try moving the code with which you find the RadButton1 and add it as an updated control from RadGrid ItemCreated event to Page_Load? Note that it is recommended to add AJAX settings dynamically in a Page event handler, which is executed each time during the page lifecycle (Page_Load, Page_PreRender) so that the control could be ajaxified when the page is initially loaded.

Give this suggestion a try and see if it helps.

Regards,
Pavlina
Telerik

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