RadGrid Client-Side Binding with GridTemplateColumn and Labels

26 posts, 1 answers
  1. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 18 Mar 2009 Link to this post

    Hey,

    Here is what I got:

    <asp:RadGrid id="r1" runat="server"..>
      <MasterTableView ..>
        <Columns>
          <tel:GridTemplateColumn ..>
             <asp:Label id="l1" runat="server" Text='<%# Eval("Name") %>' />
           </tel:GridTemplateColumn>
          <tel:GridTemplateColumn ..>
             <asp:Label id="l2" runat="server" Text='<%# Eval("Address") %>' />
           </tel:GridTemplateColumn>
        </Columns>
      </MasterTableView>
    </asp:RadGrid>

    JS Scripts for binding.

    //Loading script - this works in that it binds the objects

    var

     

    radGrid = $find("<%= rg.ClientID %>");

     

     

    var view = radGrid.get_masterTableView();

     

    view.set_dataSource(results);

    view.dataBind();

    I tapped into RowDataBound client event so that I may be able to bind it, but I don't know how I can bind to the label in the template.  The issue is, on the server side, I bind an empty array on load server side, so that the mastertableview gets created:

    rg.DataSource = new object[] { };
    rg.DataBind();

    BUt, the no records template appears, and not my template, so I don't know how to bind to the labels....

    Any advice would help.

    Thanks.

  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 20 Mar 2009 Link to this post

    Hello Brian Mains,

    If you attach handler to client side OnCommand RadGrid will automatically bind to fake data source on server in order to create it's structure on client. Thus you don't need to bind it to empty array.

    Regarding binding controls in ItemTemplate you should set ID of the control as the DataField.
    For example in your case instead having:
    <tel:GridTemplateColumn ..> 
             <asp:Label id="l1" runat="server" Text='<%# Eval("Name") %>' /> 
           </tel:GridTemplateColumn> 
     

    you should have

    <tel:GridTemplateColumn ..> 
             <asp:Label id="Name" runat="server" /> 
    </tel:GridTemplateColumn> 
     

    this way RadGrid will manage to populate your control in ItemTemplate. Have in mind that there is no way evaluate expression as <%# Eval("Name") %> on client-side.

    I hope this helps.

    Greetings,
    Nikolay
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Apr 2010 Link to this post

    Hi,

    I need to have Linkbutton in templatecolumn ,which will binded with client side binding feature of radgrid.

                                    <telerik:GridTemplateColumn UniqueName="TaskName" HeaderText="Link Button Task Name"
                                        SortExpression="TaskName">
                                        <ItemTemplate>
                                        <asp:LinkButton runat="server" id="taskName"></asp:LinkButton>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

    But this does not bind the values to linkbutton.
    Can you provide the solution on this.

    Thanks.




  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 22 Apr 2010 Link to this post

    Hello,

    The code bellow demonstrates how to bind LinkButton in ItemTemplate on client:
    01.<script type="text/javascript">
    02.       function pageLoad()
    03.       {
    04.           var data = [{Text: "Click Me"}];
    05.           var mtv = $find('<%=RadGrid2.ClientID %>').get_masterTableView();
    06.           mtv.set_dataSource(data);
    07.           mtv.dataBind();
    08.       }
    09.       function gridCommand(sender, args)
    10.       {
    11.           //
    12.       }
    13.       function gridRowBound(sender, args)
    14.       {            
    15.           var link = args.get_item().findElement("taskName");
    16.           link.innerHTML = args.get_dataItem().Text;            
    17.       }
    18.   </script>
    19.     
    20.   <telerik:RadGrid runat="server" ID="RadGrid2" AutoGenerateColumns="false">
    21.       <MasterTableView>
    22.           <Columns>
    23.               <telerik:GridTemplateColumn DataField="Text">
    24.                   <ItemTemplate>
    25.                       <asp:LinkButton runat="server" id="taskName"></asp:LinkButton>
    26.                   </ItemTemplate>
    27.               </telerik:GridTemplateColumn>
    28.           </Columns>
    29.       </MasterTableView>
    30.       <ClientSettings>
    31.           <ClientEvents OnCommand="gridCommand" OnRowDataBound="gridRowBound"/>
    32.       </ClientSettings>
    33.   </telerik:RadGrid>


    Regards,
    Nikolay
    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.
  6. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Apr 2010 Link to this post

    Thanks for the reply.I will try the same example
  7. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 23 Apr 2010 Link to this post

    Hi,

    Thanks for the reply
    I have made the necessary changes to show Linkbutton inside Itemtemplate.

    but now the problem is first time when page loads from server side I m binding the grid with blank row.and on click of search button I m binding the records from client side so in this case only first record its binding the value in the grid. the link button column its getting null after 1st records when I debug the code on rowdatabound.

                              <telerik:RadGrid ID="RadGridTask" runat="server" GridLines="None" AutoGenerateColumns="False">
                        <MasterTableView>
                            <Columns>
                                <telerik:GridTemplateColumn DataField="taskName">
                                    <ItemTemplate>
                                        <asp:LinkButton runat="server" ID="taskName"></asp:LinkButton>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="taskId" UniqueName="taskId" HeaderText="Task ID"
                                    EmptyDataText="&amp;nbsp;" SortExpression="taskId">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="workFlowTaskId" UniqueName="workFlowTaskId" HeaderText="Workflow Task ID"
                                    EmptyDataText="&amp;nbsp;" SortExpression="workFlowTaskId">
                                </telerik:GridBoundColumn>
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <ClientEvents OnCommand="gridCommand" OnRowDataBound="gridRowBound" />
                        </ClientSettings>
                    </telerik:RadGrid>


    function gridRowBound(sender, args)
    {
          debugger;
        var link = args.get_item().findElement("taskName");
        link.innerHTML = args.get_dataItem().taskName;

    }

    You can see the result in attach image file.
    Thanks.





  8. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 23 Apr 2010 Link to this post

    Hi,

    The problem which I posted earlier is now resolved. Now I am able to bind the grid with template columns from client side. Is it possible to take the values of  this template columns from ItemCommand event from server side.

    On client side I am binding values at OnRowDataBound
    function gridRowBound(sender, args)
    {
        var linkTaskName = args.get_item().findElement("lnkTaskName");
        if(null != linkTaskName)
        {
            linkTaskName.innerHTML = args.get_dataItem().description;
        }

        var linkTaskId = args.get_item().findElement("lbSelect");
        if(null != linkTaskId)
        {
            linkTaskId.innerHTML = args.get_dataItem().taskId;   
        }
        
        var lblCustomerName = args.get_item().findElement("lblCustomerName");
        if(null != lblCustomerName)
        {
            lblCustomerName.innerText = args.get_dataItem().customerName;   
        }
        
        var lblTaskName = args.get_item().findElement("lblTaskName");
        if(null != lblTaskName)
        {
        debugger;
            lblTaskName.innerText = args.get_dataItem().taskName;
        }
    }
    On server Side at ItemCommand event
    protected void RadGridTask_ItemCommand(object sender, GridCommandEventArgs e)
        {
            Label lblCustomerName = e.Item.FindControl("lblCustomerName") as Label;
            Label lblTaskStatus = e.Item.FindControl("lblworkFlowTaskStatus") as Label;
            Label lblOrgnization = e.Item.FindControl("lblorganization") as Label;
            LinkButton lnkTaskId = e.Item.FindControl("lnkTaskId") as LinkButton;
            Label lblTaskName = e.Item.FindControl("lblTaskName") as Label;
            if (e.CommandName == "Unclaim")
            {
                Response.Redirect("Unclaim.aspx");
            }
            if (e.CommandName == "Select")
            {
    lblTaskName.Text - I am getting text value as blank always.In fact all the template columns text's are blank though its showing on page.
                if (lblTaskName.Text  == TASK_NAME_SAFE_TEST_SIGNING)
                {
                    Response.Redirect("CertificateInstructions.aspx");
                }
            }
        }

    we bind the grid from Client side and fetch the values from server side event is it possible.?
    Can you confirm the same


    Thanks.
  9. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 27 Apr 2010 Link to this post

    Hi,

    As I was not  able to take the values at server side as the Grid I have binded at client side. So there was no option for me to move my ItemCommand (Server side) code to OnCommand(Client side) code. For this I need to put GridButtonColumn instead of GridItemTemplate. For those columns for which I  need to have buttons(link buttons) I have replaced them with GridbuttonColumn and binded data on OnDataBound event.

    Grid Design of two Button columns.Rest all the other columns in grid are GridTemplateColumn or GridBoundColumn.
    <telerik:GridButtonColumn HeaderText ="Unclaim" DataTextField="taskId"
                                UniqueName="taskId" ButtonType="LinkButton"  
                                CommandName="Unclaim">
                                </telerik:GridButtonColumn>                      
                                
                                <telerik:GridButtonColumn HeaderText="Task Description" DataTextField="description"
                                UniqueName="description" ButtonType="LinkButton"  
                                CommandName="Select">
                                </telerik:GridButtonColumn>

    See the below Code to take the values of other columns in the radgrid.Can Telerik confirm Is this the correct implementation.

    function gridCommand(sender, args)
    {
     args.set_cancel(true);

    var grid = $find("<%= RadGridTask.ClientID%>");  
    var MasterTable = grid.get_masterTableView();  
    var row = MasterTable.get_dataItems()[args.get_commandArgument()];  
    var taskId = row._dataItem.taskId;  
    var description = row._dataItem.description;
    var taskName = row._dataItem.taskName;

        if (args.get_commandName() == "Select")
        {
        
            if(taskName == '<%= TASK_NAME_SAFE_TEST_SIGNING %>')
            {
               RedirectPage();
            }
        }
        
        if (args.get_commandName() == "Unclaim")
        {
            CallServiceToUnclaim(0,0);
        }
        
    }; 
  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 28 Apr 2010 Link to this post

    Hello,

    When you are binding RadGrid on client-side the data that is used for populating it will not be persisted on server. Thus you can only access it on client side as in your code and any action should take place on client side.

    I hope this helps.

    Regards,
    Nikolay
    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.
  11. Arputharaj
    Arputharaj avatar
    11 posts
    Member since:
    Mar 2009

    Posted 30 Oct 2010 Link to this post

    Hi,
        Am still having the problem what you had. in Onrowdatabound event, the linkbutton is coming as null.
        Could you provide me ur advice.
        Please am running out of time.
        I am having the same scenario of what you have.
  12. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 01 Nov 2010 Link to this post

    Hi,
    When you bind Radgrid at Client side you will not receive the values of grid columns at Server side events for this u need to take the values by using client side code only.

    As I was not  able to take the values at server side as the Grid I have binded at client side. So there was no option for me to move my ItemCommand (Server side) code to OnCommand(Client side) code. For this I need to put GridButtonColumn instead of GridItemTemplate. For those columns for which I  need to have buttons(link buttons) I have replaced them with GridbuttonColumn and binded data on OnDataBound event.

    there is ItemCommand (Server side) code for this there is  OnCommand(Client side) code and if we want to call function from oncommand event see the e.g given below

    function gridCommand(sender, args)
    {
     args.set_cancel(true);

    var grid = $find("<%= RadGridID.ClientID%>");  
    var MasterTable = grid.get_masterTableView();  
    var row = MasterTable.get_dataItems()[args.get_commandArgument()];  
    var testId = row._dataItem.testId;  
    var description = row._dataItem.description;
    var testName = row._dataItem.testName;

           
        if (args.get_commandName() == "Unclaim")
        {
            CallServiceToUnclaim(0,0);
        }
        
    }; 
  13. Arputharaj
    Arputharaj avatar
    11 posts
    Member since:
    Mar 2009

    Posted 01 Nov 2010 Link to this post

    hi NetDeveloper1107,
        Thanks for your reply. But my problem is not taking the values at server side.
        My problem is when i bound the grid with data at client side, the template column controls are not created by default.

    Like i have tempalte column with linkbutton and another column with check box.

    when am binding the data on the client side

    13.       function gridRowBound(sender, args)
    14.       {            
    15.           var link = args.get_item().findElement("taskName");
    16.           link.innerHTML = args.get_dataItem().Text;            
    17.       }

    link is always return null.
    How did you handle this?

    Please help me asap.
    Today there is a build i have to fix this.
    Thanks in advance...

  14. Arputharaj
    Arputharaj avatar
    11 posts
    Member since:
    Mar 2009

    Posted 01 Nov 2010 Link to this post

    hi Admin,
        Thanks for your reply. But my problem is not taking the values at server side.
        My problem is when i bound the grid with data at client side, the template column controls are not created by default.

    Like i have tempalte column with linkbutton and another column with check box.

    when am binding the data on the client side

    13.       function gridRowBound(sender, args)
    14.       {            
    15.           var link = args.get_item().findElement("taskName");
    16.           link.innerHTML = args.get_dataItem().Text;            
    17.       }

    link is always return null.
    How did you handle this?

    Please help me asap.
    Today there is a build i have to fix this.
    Thanks in advance...

  15. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 01 Nov 2010 Link to this post

    Hi,

    For Link Button pls see the below code

    declaration of Linkbutton in Radgrid Design is

     

    <telerik:GridButtonColumn HeaderText="Task Description" DataTextField="description"

     

     

    UniqueName="description" ButtonType="LinkButton"

     

     

    CommandName="Select">

     

     

    </telerik:GridButtonColumn>

     


    and To bind the InnerText value at rowdatabound see the below Code.

     

    var lnkTaskId = args.get_item().get_cell("taskId").getElementsByTagName('a')[0];

     

    lnkTaskId.innerText = args.get_dataItem()[

    'taskId'];

     

     

    var lnkDescription = args.get_item().get_cell("description").getElementsByTagName('a')[0];

     

    lnkDescription.innerText = args.get_dataItem()[

    'description'];

    Hope this will resolve your issue.

    Regards,

     

  16. Arputharaj
    Arputharaj avatar
    11 posts
    Member since:
    Mar 2009

    Posted 01 Nov 2010 Link to this post

    Hi,
    I used the GridButtonColumn with Link button type. But still the

    var lnkDescription = args.get_item().get_cell("description").getElementsByTagName('a')[0];

    lnkDescription  returns null.

    is there anyother thing i need to lookout?

    Am using
    GridClientSelectColumn also, this also returns null.

    Please help me to out from this.

  17. srinivasan pn
    srinivasan pn avatar
    3 posts
    Member since:
    Dec 2008

    Posted 01 Nov 2010 Link to this post

    Hi Admin,

    I am using the below code to bind data at client side as you suggessted.
    01.<script type="text/javascript">
    02.       function pageLoad()
    03.       {
    04.           var data = [{Text: "Click Me"}];
    05.           var mtv = $find('<%=RadGrid2.ClientID %>').get_masterTableView();
    06.           mtv.set_dataSource(data);
    07.           mtv.dataBind();
    08.       }
    09.       function gridCommand(sender, args)
    10.       {
    11.           //
    12.       }
    13.       function gridRowBound(sender, args)
    14.       {            
    15.           var link = args.get_item().findElement("taskName");
    16.           link.innerHTML = args.get_dataItem().Text;            
    17.       }
    18.   </script>
    19.     
    20.   <telerik:RadGrid runat="server" ID="RadGrid2" AutoGenerateColumns="false">
    21.       <MasterTableView>
    22.           <Columns>
    23.               <telerik:GridTemplateColumn DataField="Text">
    24.                   <ItemTemplate>
    25.                       <asp:LinkButton runat="server" id="taskName"></asp:LinkButton>
    26.                   </ItemTemplate>
    27.               </telerik:GridTemplateColumn>
    28.           </Columns>
    29.       </MasterTableView>
    30.       <ClientSettings>
    31.           <ClientEvents OnCommand="gridCommand" OnRowDataBound="gridRowBound"/>
    32.       </ClientSettings>
    33.   </telerik:RadGrid>

    but in gridRowBound event,
    the link coming as null always. Not able to find the link button. its returning null.
    Am also using GridClientSelectColumn in the same grid. In this column also the check box control not getting created by default when bind the data at client side.
    Please help me to get out from this.
    Thanks,
    Srini.

  18. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 02 Nov 2010 Link to this post

    Hi,

    I have used in this way only and I m getting Linkbutton and not getting as null

    var lnkTaskId = args.get_item().get_cell("taskId").getElementsByTagName('a')[0];

     

    lnkTaskId.innerText = args.get_dataItem()[

     

    'taskId'];



    Check ur code once again and also check the design of radgrid column as posted earlier.

    Regards,
  19. Neo
    Neo avatar
    22 posts
    Member since:
    May 2005

    Posted 10 Nov 2010 Link to this post

    I m trying the same thing and i can see the value appearing in Link button

    but when i click on it i cant find text of button on server side in grid Item command event.

    is there any way i can send text back to server when i load it on client side on item command click event.

    Sincerely,
    Hardik Joshi
  20. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 19 Nov 2010 Link to this post

    Greetings!

    args.get_item().findElement("taskName")

    does not work if the element is inside custom column. I have
    DSGridTemplateColumn
    inherited from
    GridTemplateColumn
    and findElement returns null.
    
    How to handle this?
  21. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 25 Nov 2010 Link to this post

    Hello Alexander,

    I guess you are looking for $telerik.findElement. You can find more details on the article bellow:
    http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html

    Best wishes,
    Nikolay
    the Telerik team
    Browse the vast support resources we have to jumpstart 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.
  22. Gerrit
    Gerrit avatar
    33 posts
    Member since:
    Jul 2010

    Posted 18 Apr 2011 Link to this post

    Hi,

    Im having also some problems in this area...
    Im binding client side data to my grid, I'm using a webservice to bind it.

    The GridDataBound columns displays perfectly, but the template columns does not want to display.
    As from the posts in here it seems like I cant use "<%# Eval("Name") %>"
    What is the alternative?

    I did try to use the OnItemDatabound, but once in there all my values are empty strings. ( weird, seems like the data is not available server side, and only client side )

    I wanted to go in the ItemDataBound and put asp:labels in my template column, find them and set the values in there but that does not work, since my values are all empty.

    Any help will be appreciated!

    Thanks,
    Gerrit
  23. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 18 Apr 2011 Link to this post

    Hello Gerrit,

    Please review the following topis from the RadGrid online documentation which explain the specifics you need to take into considerations when using client-side binding:

    http://www.telerik.com/help/aspnet-ajax/grid-client-side-binding.html (see the "Note" section)
    http://www.telerik.com/help/aspnet-ajax/grid-client-side-binding-specifics.html

    Kind regards,
    Sebastian
    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.

  24. Doug
    Doug avatar
    6 posts
    Member since:
    Aug 2010

    Posted 04 May 2013 Link to this post

    I'm having an issue trying to fill data on a control in a GridTemplateColumn.  Only the first row in the grid is getting populated when RadGrid_RowDataBound is executed.  It fills for every record but it only finds "hlFullName" in the first row.  The grid doesn't have a default sort order either.  Any ideas?

    <script type="text/javascript" language="javascript">       
        function RadGrid_RowDataBound(sender, args) {
                  var hlName = args.get_item().findElement("hlFullName");
                  hlName.innerHTML = args.get_dataItem().FullName;
          }
    </script>

    <telerik:GridTemplateColumn AutoPostBackOnFilter="true" HeaderText="Name" UniqueName="FullNameCol">
       <ItemTemplate>
         <a id="hlFullName"><a>
      </ItemTemplate>
    </telerik:GridTemplateColumn>
  25. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 08 May 2013 Link to this post

    Hello Doug,

    From Q2 2012 GridTemplateColumn exposes a ClientItemTemplate that allows the rendering of pure HTML into the column cell and the evaluation of Kendo-like expressions. The template is used with client-side binding and has a binding context which has the properties of the data item object, as well as some additional properties listed in the below article:
    http://www.telerik.com/help/aspnet-ajax/grid-column-types.html (GridTemplateColumn section)

    A live example which demonstrates how you can use the binding context of the template to populate and customize the content of the column is available here:
    http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientitemtemplate/defaultcs.aspx

    Greetings,
    Pavlina
    the Telerik team
    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 their blog feed now.
  26. Doug
    Doug avatar
    6 posts
    Member since:
    Aug 2010

    Posted 01 Jun 2013 Link to this post

    Sorry for the delayed response. Unfortunately, I'm using version 2012.1.411.35 so ClientItemTemplate is not an option.  Would you have any more suggestions?

    Thanks,
    Doug

  27. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 06 Jun 2013 Link to this post

    Hello Doug,

    I recommend that you upgrade to the latest version of Telerik RadControls. Thus you will be able to take advantage not only from ClientItemTemplate, but from all new features, improvements, as well as bug fixes made after Q1 2012  for the controls. You can refer to the link below to see all new things:
    http://www.telerik.com/products/aspnet-ajax/whats-new.aspx#ReleaseHistory

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017