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

Grid with button updating cart

2 Answers 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jakub
Top achievements
Rank 1
Jakub asked on 02 Aug 2013, 08:12 AM
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>
 
<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

2 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
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.
0
Jakub
Top achievements
Rank 1
answered on 24 Aug 2013, 03:17 PM
Thank you  for response.

Ajaxifying the button on page load event solved the problem.
Tags
Grid
Asked by
Jakub
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Jakub
Top achievements
Rank 1
Share this question
or