RadGrid Client-Side Binding with GridTemplateColumn and Labels

[Brian Mains]

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.

[Nikolay Rusev]

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.

[NetDeveloper1107]

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.

[Nikolay Rusev]

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.

[NetDeveloper1107]

Thanks for the reply.I will try the same example

[NetDeveloper1107]

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.

[NetDeveloper1107]

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.

[NetDeveloper1107]

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);
    }
    
}; 

[Nikolay Rusev]

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.

[Arputharaj]

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.

[NetDeveloper1107]

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);
    }
    
}; 

[Arputharaj]

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...

[Arputharaj]

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...

[NetDeveloper1107]

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,

 

[Arputharaj]

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.

[srinivasan pn]

Hi Admin,

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.

[NetDeveloper1107]

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,

[Neo]

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

[Alexander]

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?

[Nikolay Rusev]

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

[Gerrit]

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

[Sebastian]

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

[Doug]

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>

[Pavlina]

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

[Doug]

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

[Pavlina]

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