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

RadGrid Client-Side Binding with GridTemplateColumn and Labels

25 Answers 1532 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian Mains
Top achievements
Rank 1
Brian Mains asked on 19 Mar 2009, 01:52 AM
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.

25 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 20 Mar 2009, 01:07 PM
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.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 22 Apr 2010, 06:40 AM
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.




0
Nikolay Rusev
Telerik team
answered on 22 Apr 2010, 01:23 PM
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.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 22 Apr 2010, 01:36 PM
Thanks for the reply.I will try the same example
0
NetDeveloper1107
Top achievements
Rank 1
answered on 23 Apr 2010, 05:51 AM
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.





0
NetDeveloper1107
Top achievements
Rank 1
answered on 23 Apr 2010, 10:12 AM
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.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 27 Apr 2010, 05:32 AM
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);
    }
    
}; 
0
Nikolay Rusev
Telerik team
answered on 28 Apr 2010, 09:37 AM
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.
0
Arputharaj
Top achievements
Rank 1
answered on 30 Oct 2010, 03:47 PM
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.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 01 Nov 2010, 05:38 AM
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);
    }
    
}; 
0
Arputharaj
Top achievements
Rank 1
answered on 01 Nov 2010, 08:33 AM
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...

0
Arputharaj
Top achievements
Rank 1
answered on 01 Nov 2010, 11:29 AM
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...

0
NetDeveloper1107
Top achievements
Rank 1
answered on 01 Nov 2010, 12:18 PM
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,

 

0
Arputharaj
Top achievements
Rank 1
answered on 01 Nov 2010, 02:14 PM
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.

0
srinivasan pn
Top achievements
Rank 1
answered on 01 Nov 2010, 03:15 PM
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.

0
NetDeveloper1107
Top achievements
Rank 1
answered on 02 Nov 2010, 06:48 AM
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,
0
Neo
Top achievements
Rank 1
answered on 10 Nov 2010, 08:09 PM
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
0
Alexander
Top achievements
Rank 1
answered on 19 Nov 2010, 05:51 PM
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?
0
Nikolay Rusev
Telerik team
answered on 25 Nov 2010, 09:27 AM
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.
0
Gerrit
Top achievements
Rank 2
answered on 18 Apr 2011, 10:09 AM
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
0
Sebastian
Telerik team
answered on 18 Apr 2011, 11:16 AM
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.

0
Doug
Top achievements
Rank 1
answered on 04 May 2013, 09:37 PM
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>
0
Pavlina
Telerik team
answered on 08 May 2013, 02:16 PM
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.
0
Doug
Top achievements
Rank 1
answered on 01 Jun 2013, 03:54 PM
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

0
Pavlina
Telerik team
answered on 06 Jun 2013, 09:23 AM
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.
Tags
Grid
Asked by
Brian Mains
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
NetDeveloper1107
Top achievements
Rank 1
Arputharaj
Top achievements
Rank 1
srinivasan pn
Top achievements
Rank 1
Neo
Top achievements
Rank 1
Alexander
Top achievements
Rank 1
Gerrit
Top achievements
Rank 2
Sebastian
Telerik team
Doug
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or