Hi,
I am trying create a RadGrid by using clientside databinding feature.
My requirement
1. To display first few columns with the data retreived from database using the GridBoundColumn
2. The last 2 column should have "Select" and "Delete" hyperlink. On clicking this hyperlink i need to call the javascript to do some action in the client side. Also the javascript should have a knowledge on which row i clicked.
The problem i am facing
1. I tried with the GridClientSelectColumn but the problem is, RadGrid display only checkbox eventhough i set the ButtonType="LinkButton". I don't know how to display the "Select" text. I was expecting it to show the "Select" text by default or atleast to display the text defined in the "Text" attribute.
2. GridClientDeleteColumn displays the "Delete" link but i am not able to bind the column value to the CommandArgument so that i can know which row is clicked.
3. Also in both the option when i databind the Grid in the client side, both the column doesn't display the text. It first apears and then disapears after the client databind.
4. So I tried with the GridTemplateColumn with the html control in the ItemTemplate but I am not able to bind the data using
<telerik:GridTemplateColumn>
<ItemTemplate>
<a href=javascript:rowSelected('<%# Eval("Text") %>') >Select</a>
</ItemTemplate>
</telerik:GridTemplateColumn>
binder, because the data is not displayed.
Could you please let me know some solution or show some pointer to some sample for the following,
1. I want to display a grid with client side databinding with last 2 columns "Select" and "Delete" link button and on clicking this link i should call the javascript with the row information passed to the method.
Thank you for your support.
Sundar
11 Answers, 1 is accepted
For your convenience I've prepared sample application. You can find it attached to this post.
Basically you need to listen for OnCommand client event and handle Select and Delete commands.
args.get_commandArgument() stores item index. Thus you can use it to access clicked data item.
I hope this is helpful.
Kind regards,
Nikolay
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Thanks for your response and the sample code Nikolay.
I couldn't run the sample application because i am getting an error in line <DataBinding Location="Default.aspx" ...>" and "GridFilterExpression". I guess i am using a older version of the Telerik control. I am currently using the Q2 version.
But I had a look into the code which you gave me. I this what i am actually trying to achieve.
i.e. To have a "Select" link button in one of the column and on clicking that i want to track which row is clicked using the OnCommand client side function.
I am using the client side "dataBind()" method of the "masterTableView" object to bind the RadGrid. What happens is when the page loads the "Select" column appeared and once the databinding happened it the "Select" column get data disappeared. This is an unexpected behaviour for the grid.
e.g.
HTML
----
<telerik:RadGrid ...>
...
<telerik:GridBoundColumn DataField="Text" HeaderText="Role Name" UniqueName="Text" >
</telerik:GridBoundColumn>
<telerik:GridButtonColumn ButtonType="LinkButton" Text="select" CommandName="Select">
</telerik:GridButtonColumn>
...
</telerik:RadGrid>
Javascript code
---------------
get_masterTableView().set_dataSource(object)
get_masterTableView().dataBind()
object is received throught AJAX webservices call from Javascript.
But when I tried to use the "telerik:GridTemplateColumn" column with HTML controls then after the databinding i was able to see the column data but i am not able to bind the value to the column
e.g.
<telerik:GridBoundColumn DataField="Text" HeaderText="Role Name" UniqueName="Text" >
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn>
<ItemTemplate>
<a href=javascript:rowSelected('<%# Eval("Text") %>') >Select</a>
<ItemTemplate>
</telerik:GridTemplateColumn>
I would apreciate if you could give me some suggestions on my solution. Hope I clearly explained my problem, if i am not clear please let me know so that i can give some more sample code.
Thanks and regards
Sundar
Have in mind that expression as such "<%#Eval("Text") %>" won't be evaluated if you are using client-side data-binding as on the example below.
| <telerik:GridTemplateColumn> |
| <ItemTemplate> |
| <a href=javascript:rowSelected('<%#Eval("Text") %>')>Select</a> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
However the code I send you for declarative data-binding is available with latest version of RadGrid. I suggest you to upgrade the version of RadControls for ASP.NET AJAX which you are using.
Regards,
Nikolay
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
I will try with the latest version and get back to you.
Thanks and regards
Sundar
Rank 1
As per your suggestion Q3 version solved my problem.
Thanks for your support.
Sundar
Rank 1
Rank 1
I am afraid that when using GridTemplateColumns and client-side data-binding you should manually create and populate the controls in GridTemplateColum cells. This could easily achieved by using RadGrid client-side API and handling OnRowDataBound client-side event. You can find more details regarding client-side data-binding on the following article:
http://www.telerik.com/help/aspnet-ajax/client-side-binding.html
Kind regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
I am using Radgrid client side binding feature , I have grid design as below :
<telerik:RadGrid ID="RadGridTask1" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="NextGen"
PageSize="5" GridLines="None" AutoGenerateColumns="False">
<MasterTableView>
<Columns>
<telerik:GridTemplateColumn HeaderText="Function">
<ItemTemplate>
<asp:LinkButton ID="lnkTaskId" runat="server" CausesValidation="false" Text="Unclaim" CommandName="Unclaim">
</asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnCommand="gridCommand" OnRowDataBound="gridRowBound" />
</ClientSettings>
</telerik:RadGrid>
function gridCommand(sender, args)
{
args.set_cancel(true);
alert(args.get_commandName());
if (args.get_commandName() == "Select")
{
alert("Select");
}
};
function gridRowBound(sender, args)
{
var linkDescription = args.get_item().findElement("lnkdescription");
if(null != linkDescription)
{
linkDescription.innerHTML = args.get_dataItem().description;
}
}
}
Now the scenerio is when I click on linkbutton in the grid it should call Oncommand event specified i.e gridCommand event. but the page is posted back and does not do any thing.
Can you give solution for this.
Thanks.
Rank 1
This problem is resolved for this I need to replaced Griditemtemplate with Gridbuttoncolumn on click of this Client side OnCommand executed properly.
Thanks
Please channel the communication on this subject in the other forum post you participated in to avoid duplicate posts.
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.