Client side RadGrid - GridTemplateColumn

12 posts, 1 answers
  1. Sundar
    Sundar avatar
    23 posts
    Member since:
    Jun 2008

    Posted 05 Dec 2008 Link to this post

     

    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

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 08 Dec 2008 Link to this post

    Hello Sundar,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sundar
    Sundar avatar
    23 posts
    Member since:
    Jun 2008

    Posted 08 Dec 2008 Link to this post

    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

  5. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 11 Dec 2008 Link to this post

    Hello 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> 
        <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.
  6. Sundar
    Sundar avatar
    23 posts
    Member since:
    Jun 2008

    Posted 12 Dec 2008 Link to this post

    Thanks for your replys Nikolay.

    I will try with the latest version and get back to you.

    Thanks and regards
    Sundar
  7. Sundar
    Sundar avatar
    23 posts
    Member since:
    Jun 2008

    Posted 17 Dec 2008 Link to this post

    Hi Nikolay,

    As per your suggestion Q3 version solved my problem.

    Thanks for your support.
    Sundar
  8. Rodrigo olivares
    Rodrigo olivares avatar
    9 posts
    Member since:
    Sep 2009

    Posted 23 Sep 2009 Link to this post

    About this, with version "2008.3.1314.20" :

    Can I use the telerik:GridTemplateColumn for client-databind?.

    I have a radgrid with the code:

                        <telerik:GridTemplateColumn HeaderText="Color" >                    
                            <ItemTemplate>
                                 <telerik:RadColorPicker runat="server" ID="userColorPicker" Skin="Default2006" ShowIcon="true" Preset="standard" >
                                 </telerik:RadColorPicker>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>


    and doing client-side databind this column is not rendered. Is the correct implementation for autocreate the element in the clientside? or the color picker must be created in client-side and configure in that case.

    Must the element  that the service return, contain a special property for this purpose?.

    Thanks a lot.

  9. Rodrigo olivares
    Rodrigo olivares avatar
    9 posts
    Member since:
    Sep 2009

    Posted 23 Sep 2009 Link to this post

      
  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 24 Sep 2009 Link to this post

    Hello Rodrigo,

    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.
  11. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 26 Apr 2010 Link to this post

    Hi,

    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.


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

    Posted 28 Apr 2010 Link to this post

    Hi ,

    This problem is resolved for this I need to replaced Griditemtemplate with Gridbuttoncolumn on click of this Client side OnCommand executed properly.

    Thanks
  13. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 29 Apr 2010 Link to this post

    Hello,

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