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

RadGrid's Global item template - Client-side binding issue

12 Answers 416 Views
Grid
This is a migrated thread and some comments may be shown as answers.
HarryM
Top achievements
Rank 1
HarryM asked on 21 Mar 2011, 04:48 AM
I'm following this demo to use "global item template feature" of RadGrid but using Client-side binding. Somehow I'm not able to access the label element within the ItemTemplate in RadGrid1_RowDataBound event. I can this event called up but the label comes up NULL. Can someone please advice how I can achieve this? Thanks.
<telerik:RadGrid ID="RadGrid1" PageSize="10" AutoGenerateColumns="false" runat="server">
    <MasterTableView TableLayout="Fixed" DataKeyNames="itemid" ClientDataKeyNames="itemid">
            <ItemTemplate>
                    <asp:Label ID="lblDetail" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </MasterTableView>
        <GroupingSettings CaseSensitive="false" />
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <ClientSettings>
            <ClientEvents OnRowCreated="OnRowCreated"  OnRowDblClick="OnRowDblClick" OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
        </ClientSettings>
    </telerik:RadGrid>

function RadGrid1_RowDataBound(sender, args)
{
   var lbl = args.get_element().findElement("lblDetail");
   lbl.innerHTML = "This is test";
}

12 Answers, 1 is accepted

Sort by
0
HarryM
Top achievements
Rank 1
answered on 22 Mar 2011, 12:05 AM
Anyone please. Thank you.
0
HarryM
Top achievements
Rank 1
answered on 28 Mar 2011, 08:30 PM
Anyone?
0
Mira
Telerik team
answered on 31 Mar 2011, 12:42 PM
Hello Harry,

Please set the AutoGenerateColumns property of the master table view to true and let me know whether it makes any difference.

I hope this helps.

Kind regards,
Mira
the Telerik team
0
HarryM
Top achievements
Rank 1
answered on 31 Mar 2011, 01:58 PM
Hi Mira

That doesn't work. I get this error: "Client-side data-binding with auto-generated columns is not supported! Please declare at least one column for the grid."

Harry
0
Mira
Telerik team
answered on 04 Apr 2011, 01:43 PM
Hello Harry,

You need to define at least one declarative column in your grid to avoid the exception you received.
I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this post.

I hope it helps.

Kind regards,
Mira
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
HarryM
Top achievements
Rank 1
answered on 05 Apr 2011, 03:08 AM
Thank you Mira for the code sample but the solution doesn't solve my problem. I'm trying to achieve a ListView/DataList/Gallery like data presentation with client-side binding as shown in the demo here, not the usual column based view. Let me know if this is achievable.
Thanks.

Harry
0
Mira
Telerik team
answered on 07 Apr 2011, 04:42 PM
Hello Harry,

I have modified the project from my previous post to implement the ListView look. You can find the updated version attached to this message.

I hope it helps.

Greetings,
Mira
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
James
Top achievements
Rank 1
answered on 09 May 2011, 10:41 AM
I have implemented this solution however when I try to rebind the grid with:

$find('<%=RadGrid1.ClientID %>').get_masterTableView().rebind();


The grid repeats the first couple of items and then the remaining items are displayed with the correct style but only in one vertical column instead of extending horizontally.

Anyone else have this problem or have suggestions?
0
Mira
Telerik team
answered on 12 May 2011, 11:05 AM
Hello James,

I suggest that you rebind the grid server-side. In this way the page postbacks and the grid structure is recreated.

I hope this helps.

Best wishes,
Mira
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
James
Top achievements
Rank 1
answered on 12 May 2011, 11:16 AM
Thanks Mira for the response.

Is there any other solution to do this client-side? I originally had my grid do everything server-side however I am now in the process of moving my grid functionality to client-side methods in hopes to create a more responsive feeling page.
0
Mira
Telerik team
answered on 16 May 2011, 03:52 PM
Hello James,

Rebinding the grid only client-side is not enough for it to be properly recreated in your custom scenario.
The responsive feeling of the page will not be affected very much by the server-side rebind because the methods the grid is bound to are on the server as well.

I hope this helps.

Best wishes,
Mira
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
HarryM
Top achievements
Rank 1
answered on 16 May 2011, 04:37 PM
Telerik's responses did not help me much. This is how I've achieved it. See the code, it's pretty straightforward. Magic is in the page method web service, CSS and simple client-side binding of RadGrid.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad(sender, eventArgs)
        {
            LoadGridData(1,0);
        }
             
        function LoadGridData(pageNum, pricemin)
        {
           var tableView = $find("<%= RadGridProducts.ClientID %>").get_masterTableView();
             var pageSize = tableView.get_pageSize();
           tableView.set_pageSize(pageSize);
           PageMethods.GetDataMarkUp(pageNum,pageSize,updateGrid);
           PageMethods.GetDataCount(pageNum,pageSize,updateVirtualItemCount);
          }
 
                                                     
        function updateGrid(result)
        {
           var tableView = $find("<%= RadGridProducts.ClientID %>").get_masterTableView();
           tableView.set_dataSource(result);
           tableView.dataBind();
        
          
        function updateVirtualItemCount(result)
        {
         
           var tableView = $find("<%= RadGridProducts.ClientID %>").get_masterTableView();
           tableView.set_virtualItemCount(result);
        }
                             
        function RadGrid1_RowDataBound(sender, args)
        {
            var lbl = args.get_item().findElement("lblMarkUp");
            if(lbl){lbl.innerHTML = args.get_dataItem()["success"];}
        }
         
        function RadGrid1_Command(sender, args)
        {
            args.set_cancel(true);
 
            var newPageSize = sender.get_masterTableView().get_pageSize();
            sender.get_masterTableView().set_pageSize(newPageSize);
            var pageSize = newPageSize;
 
            var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
                       
            LoadGridData(currentPageIndex+1,0);
        }   
    </script>
</telerik:RadCodeBlock>

<div id="divContent" style="display:none; margin-bottom:100px;">
<telerik:RadGrid ID="RadGridProducts" PageSize="8" EnableViewState="false" runat="server" CssClass="radZLowest" ShowStatusBar="true" Width="99.7%" Skin="Windows7" AllowPaging="false" AllowSorting="True" GridLines="None" AllowMultiRowSelection="false">
    <ItemStyle Wrap="false" />
    <MasterTableView PagerStyle-Position="TopAndBottom" PagerStyle-Mode="NextPrevAndNumeric" ShowHeader="false" AutoGenerateColumns="False" DataKeyNames="success" ClientDataKeyNames="success" AlternatingItemStyle-BackColor="#FFFFFF" ItemStyle-BackColor="#FFFFFF">
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:Label ID="lblMarkUp" runat="server" Text=""></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            </Columns>
        <norecordstemplate>
      
        </norecordstemplate>              
        </MasterTableView>
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <ClientSettings>
            <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>       
</div>

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;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Configuration;
 
namespace xyzzz
{
    public partial class shopsbest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
 
            }
        }
 
        public class ServiceResponse
        {
            public string success { get; set; }
            public string error { get; set; }
        }
 
        [WebMethod]
        public static List<ServiceResponse> GetDataMarkUp(int pageNum, int pageSize)
        {
            JavaScriptSerializer oSerializer = new JavaScriptSerializer();
            ServiceResponse response = null;
            List<ServiceResponse> oList = null;
 
            string errorResponse = string.Empty;
            string successResponse = string.Empty;
 
            List<sp_GetRandomTopShopsResult> list = null;
            string markup = string.Empty;
 
            try
            {
                using (CBClassDataContext db = new CBClassDataContext())
                {
                    var s = db.sp_GetRandomTopShops(pageNum, pageSize);
 
                    list = s.ToList();
 
                     
                    foreach (sp_GetRandomTopShopsResult p in list)
                    {
                        string logourl = p.logo != null ? string.Format("http://www.xyzzz.com/Media/Shop/{0}/Logo/" + p.logo.Replace("_icon", "_resized"), p.storeid.ToString()) : "#";
                        string storeURL = "supplier.aspx?id=" + p.storeid.ToString();
 
                        string item1pic = string.Empty; string item2pic = string.Empty; string item3pic = string.Empty; string item4pic = string.Empty;
                        if (!string.IsNullOrEmpty(p.items))
                        {
                            if (!string.IsNullOrEmpty(p.items))
                            {
                                string[] itemids = p.items.Split(',');
                                if (itemids.Length >= 2) { item1pic = !string.IsNullOrEmpty(itemids[1]) ? string.Format("http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg", itemids[1]) : string.Empty; }
                                if (itemids.Length >= 3) { item2pic = !string.IsNullOrEmpty(itemids[2]) ? string.Format("http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg", itemids[2]) : string.Empty; }
                                if (itemids.Length >= 4) { item3pic = !string.IsNullOrEmpty(itemids[3]) ? string.Format("http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg", itemids[3]) : string.Empty; }
                                if (itemids.Length >= 5) { item4pic = !string.IsNullOrEmpty(itemids[4]) ? string.Format("http://www.xyzzz.com/Media/Product/{0}/Photo/itemphoto_{0}__0_list.jpg", itemids[4]) : string.Empty; }
                            }
                        }
 
                        markup += "<ul>";
                        markup += "<li>";
                        markup += p.name != null ? "<p><a href='" + storeURL + "'>" + p.name + "</a></p>" : string.Empty;
                        string slogan = !string.IsNullOrEmpty(p.slogan) ? p.slogan : p.name;
                        markup += "<p style='font-size:11px; font-style:italic;'><a class='captionGray' href='" + storeURL + "'>" + slogan + "</a></p>";
                        markup += "<p class='picture'><a href='" + storeURL + "'><img border='0px' alt='' src='" + logourl + "'></a></p>";
                        markup += "<div id='storeBlocks_main_bottom'>";
 
                        markup += !string.IsNullOrEmpty(item1pic) ? "<a href='" + storeURL + "'><img border='0px' class='img' alt='' src='" + item1pic + "'></a>" : string.Empty;
                        markup += !string.IsNullOrEmpty(item2pic) ? "<a href='" + storeURL + "'><img border='0px' class='img' alt='' src='" + item2pic + "'></a>" : string.Empty;
                        markup += !string.IsNullOrEmpty(item3pic) ? "<a href='" + storeURL + "'><img border='0px' class='img' alt='' src='" + item3pic + "'></a>" : string.Empty;
                        markup += !string.IsNullOrEmpty(item4pic) ? "<a href='" + storeURL + "'><img border='0px' class='img' alt='' src='" + item4pic + "'></a>" : string.Empty;
 
                        markup += "</div>";
                        markup += "</li>";
                        markup += "</ul>";
 
                    }
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
 
            if (!string.IsNullOrEmpty(markup))
            {
                successResponse = "<div id='storeBlocks_main'>" + markup + "</div>";
                response = new ServiceResponse { success = successResponse, error = errorResponse };
                oList = new List<ServiceResponse>() { response };
            }
            else
            {
                oList = new List<ServiceResponse>(); //no result
            }
 
            return oList;
        }
 
        [WebMethod]
        public static string GetDataCount(int pageNum, int pageSize)
        {
            string rowCount = "0";
 
            try
            {
                using (CBClassDataContext db = new CBClassDataContext())
                {
                    var s = db.sp_GetRandomTopShopsCount(pageNum, pageSize);
 
                    foreach (sp_GetRandomTopShopsCountResult sc in s)
                    {
                        rowCount = sc.rowscount.ToString();
                    }
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
 
            return rowCount;
        }
 
    }
}

Result would something like attached image.

Hope this would help a bit.



Tags
Grid
Asked by
HarryM
Top achievements
Rank 1
Answers by
HarryM
Top achievements
Rank 1
Mira
Telerik team
James
Top achievements
Rank 1
Share this question
or