Problem in Passing Databinder value from grid template column to javascript function

20 posts, 1 answers
  1. santhosh
    santhosh avatar
    35 posts
    Member since:
    Oct 2008

    Posted 17 Mar 2009 Link to this post

    Hi,

    I am using the radgrid with the template column, where in i am placing the image button in the template column which inturn calling the javascript funtion on clientclick, i want to pass a databinder value to the javascript function, this the code which i am using.

     

    <telerik:GridBoundColumn HeaderText="Date" HeaderButtonType="TextButton" DataField="Date">

     

     

    <ItemStyle Width="67px" />

     

     

    </telerik:GridBoundColumn>

     

     

    <telerik:GridTemplateColumn HeaderText="" UniqueName="View">

     

     

    <ItemTemplate>

     

     

    <asp:ImageButton id="imgbtnView" imageurl="~/Images/btn_View.gif" runat="server" visible= <%# DataBinder.Eval(Container.DataItem, "Status")%> onclientclick="showCaseHistory(<%# Eval(\'Type\')%>);" >

     

     

    </asp:ImageButton>

     

     

    </ItemTemplate>

     

     

    </telerik:GridTemplateColumn>

     

     

    <telerik:GridBoundColumn HeaderText="Description" HeaderButtonType="TextButton"

     

     

    DataField="Description">

     

     

    </telerik:GridBoundColumn>

    onclientclick="showCaseHistory(<%# Eval(\'Type\')%>);"

    this is what the statement i am using, but i am getting the error saying that Error: illegal XML character

    kindly advise.

    Regards,

    Santhosh

     

  2.
  3. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 19 Mar 2009 Link to this post

    Hello santhosh,

    Try the following binding expression:

    OnClientClick='<%#Eval("Type", "return showCaseHistory(\"{0}\")")%>' 

    Hope this helps.

    Best Regards,
    Tsvetoslav
    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.
  5. santhosh
    santhosh avatar
    35 posts
    Member since:
    Oct 2008

    Posted 20 Mar 2009 Link to this post

    Hi,

    I tried the same but its giving compile time error saying that

    Error 174 Comma, ')', or a valid expression continuation expected. 

    Regards,

    Santhosh
  7. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 24 Mar 2009 Link to this post

    Hello santhosh,

    Could you post your aspx.

    Thank you.

    Sincerely yours,
    Tsvetoslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  9. santhosh
    santhosh avatar
    35 posts
    Member since:
    Oct 2008

    Posted 24 Mar 2009 Link to this post

    Hi,
    Here is the code.

     

     

    <Columns>

     

     

     

     

    <telerik:GridBoundColumn HeaderText="dt1Id" HeaderButtonType="TextButton"

     

     

     

     

    DataField="dt1Id" Display="false">

     

     

     

     

    </telerik:GridBoundColumn>

     

     

     

     

    <telerik:GridBoundColumn HeaderText="dt2Id" HeaderButtonType="TextButton"

     

     

     

     

    DataField="dt2Id" Display="false">

     

     

     

     

    </telerik:GridBoundColumn>

     

     

     

     

    <telerik:GridBoundColumn HeaderText="Type" HeaderButtonType="TextButton"

     

     

     

     

    DataField="Type">

     

     

     

     

    <ItemStyle Width="105px" />

     

     

     

     

    </telerik:GridBoundColumn>

     

     

     

     

    <telerik:GridBoundColumn HeaderText="Date" HeaderButtonType="TextButton"

     

     

     

     

    DataField="Date" DataFormatString="{0:MM/dd/yyyy}">

     

     

     

     

    <ItemStyle Width="67px" />

     

     

     

     

    </telerik:GridBoundColumn>

     

     

     

     

    <telerik:GridTemplateColumn HeaderText="" UniqueName="View">

     

     

     

     

    <ItemTemplate>

     

     

    <asp:ImageButton id="imgbtnView" imageurl="~/Images/btn_View.gif" runat="server" visible= <%# DataBinder.Eval(Container.DataItem, "Status")%> tooltip=<%# DataBinder.Eval(Container.DataItem, "Type")%> onclientclick="<%#Eval("Type", "return showCaseHistory(\"{0}\")")%>" >

     

     

     

     

    </asp:ImageButton>

     

     

     

    <%

    --<img title="View CaseHistory/Report" alt="View" id="imgbtnView" onclick="showCaseHistory('<%# Eval("Type")%>','<%# Eval("Date")%>')" src="../Images/btn_View.gif" style='cursor:pointer;display:<%# IIF(DataBinder.Eval(Container.DataItem,("Status")) = TRUE, "block", "none") %>' />--%>

     

     

    </ItemTemplate>

     

     

     

     

    <ItemStyle Width="70px" />

     

     

     

     

    </telerik:GridTemplateColumn>

     

     

    <telerik:GridBoundColumn HeaderText="Description" HeaderButtonType="TextButton"

     

     

     

     

    DataField="Description">

     

     

     

     

    </telerik:GridBoundColumn>

     

     

     

     

    </Columns>

     

     

    REgards,

    Santhosh

  11. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 24 Mar 2009 Link to this post

    Hello santhosh,

    Could you enclose your binding expression with single quotes - note that outermost single quotes in the following:

    OnClientClick='<%#Eval("Type", "return showCaseHistory(\"{0}\")")%>'    
     

    and let us know if the problem persists.

    Best regards,
    Tsvetoslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  13. santhosh
    santhosh avatar
    35 posts
    Member since:
    Oct 2008

    Posted 24 Mar 2009 Link to this post

    Hi,

    even though i use single quotes i am getting the same error.

    Regards,

    Santhosh
  15. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 25 Mar 2009 Link to this post

    Hi santhosh,

    The databinding expression I sent you should work OK if you are using C#. Otherwise, if your code is in VB.NET, the expression should always explicitly be made to evaluate to string:

    OnClientClick='<%# String.Format( "showCaseHistory(""{0}"");" , Eval("Discontinued") )%>' 

    You can use a similar approach in C# also, just keep in mind that you have to escape the double quotes with a slash:

    OnClientClick='<%# String.Format( "showCaseHistory(\"{0}\");" , Eval("Discontinued") )%>' 

    Please, let us know if this helps.

    Best Regards,
    Tsvetoslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  17. santhosh
    santhosh avatar
    35 posts
    Member since:
    Oct 2008

    Posted 26 Mar 2009 Link to this post

    Hi Tsvetoslav,

    Thanks for your kind answers, actually I am using vb.net the below statement solves the problme of compile time error

    onclientclick

    ='<%# String.Format("showCaseHistory(\"{0}\");"%>);'

    but when i click on the image i get the javascript error saying

    Error: illegal XML character
    Source File: http://localhost/Kam.Web/Pages/PatientView.aspx?param=K7095
    Line: 1, Column: 1
    Source Code:
    <%# String.Format("showCaseHistory(\"{0}\");"%>);

    Regards,

    Santhosh

     

  19. Answer
    Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 26 Mar 2009 Link to this post

    Hi santhosh,

    From the error message you have posted, I gather that you have probably not set the databinding expression as shown in my previous post. It should be:

    OnClientClick='<%# String.Format( "showCaseHistory(""{0}"");" , Eval("Type") )%>'  

    For your convenience, I am sending you a small sample, just click the image next to the radio button in the last column of the grid to call the javascript function.


    Best Regards,
    Tsvetoslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  21. santhosh
    santhosh avatar
    35 posts
    Member since:
    Oct 2008

    Posted 30 Mar 2009 Link to this post

    Hi Tsvetoslav ,

    Ya you are right, i was missing the binding expression. Its working fine now, thank you very much for the help.

    Regards,

    Santhosh
  23. MarkSci
    MarkSci avatar
    16 posts
    Member since:
    Dec 2011

    Posted 10 Jan 2012 Link to this post

    Hello,

    I have a similar problem except that I am creating the onClientClick() event server side. I am trying to pass the value of an adjacent cell into my openRadWindow function, however when inspecting the javascript in debug mode the whole "<%# Eval("Activity_Client") %>" string is displayed in the variable rather than the value I need. Here is the code.

    public void InstantiateIn(System.Web.UI.Control container)
    {
        // Add a label containing the Code
        lookupLabel = new Label();
        lookupLabel.DataBinding += new EventHandler(lookupLabel_DataBinding);
        container.Controls.Add(lookupLabel);
        // Add an image to facilitate a popup window
        lookupButton = new ImageButton();
        lookupButton.ImageUrl = "Images/magnifying_glass.png";
        lookupButton.CssClass = "LookupButton";
        if (colname == "Activity_Client")
        {              
            lookupButton.OnClientClick = "openRadWindow('Client',this,''); return false;";
        }
        else
        {
            lookupButton.OnClientClick = "openRadWindow('Matter',this,'<%# Eval(\"Activity_Client\") %>'); return false;";
        }
        container.Controls.Add(lookupButton);
    }


    Thanks in advance for any assistance.
  25. MarkSci
    MarkSci avatar
    16 posts
    Member since:
    Dec 2011

    Posted 10 Jan 2012 Link to this post

    If anybody is interested I was able to solve this (or work around it!) by adding a custom attribute to the label control which stores the Activity_Client value which could then be accessed from the html by using javascript. The code is as follows:

    public void InstantiateIn(System.Web.UI.Control container)
    {
        // Add a label containing the Code
        lookupLabel = new Label();
        lookupLabel.DataBinding += new EventHandler(lookupLabel_DataBinding);
        container.Controls.Add(lookupLabel);
        // Add an image to facilitate a popup window
        lookupButton = new ImageButton();
        lookupButton.ImageUrl = "Images/magnifying_glass.png";
        lookupButton.CssClass = "LookupButton";
        if (colname == "Activity_Client")
        {                           
            lookupButton.OnClientClick = "openRadWindow('Client',this); return false;";
        }
        else
        {
            lookupButton.OnClientClick = "openRadWindow('Matter',this); return false;";
        }
        container.Controls.Add(lookupButton);
    }
    void lookupLabel_DataBinding(object sender, EventArgs e)
    {
        Label cLabel = (Label)sender;
        GridDataItem container = (GridDataItem)cLabel.NamingContainer;
        if (colname == "Activity_Client")
        {
            cLabel.Text = (string)((DataRowView)container.DataItem)["Activity_Client"].ToString();
            cLabel.Attributes.Add("clientcode", cLabel.Text);
        }
        else
        {
            cLabel.Text = (string)((DataRowView)container.DataItem)["Activity_Matter"].ToString();
            cLabel.Attributes.Add("clientcode", (string)((DataRowView)container.DataItem)["Activity_Client"].ToString());
        }
    }

    And then the javascript within the aspx...

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
      
                var objLookupCellLabel;
      
                function openRadWindow(LookupType, objElem)
                {
                    var oWnd;
                    var strCurrentCode;
      
                    // Set the global Cell Object
                    objLookupCellLabel = objElem.parentElement;
      
                    if (objElem != null)
                    {
                        // Get the value of the current cells label
                        strCurrentCode = objLookupCellLabel.childNodes[0].innerText;
      
                        // Check the current cell label's attribute for the Client Code
                        strClientID = objLookupCellLabel.childNodes[0].attributes["clientcode"].value;
                    }
      
                    if (LookupType == "Client")
                    {
                        oWnd = radopen("Lookup.aspx?Type=Client&ClientID=" + strCurrentCode + "", "RadWindow1");
                    }
                    else // Matter
                    {
                        oWnd = radopen("Lookup.aspx?Type=Matter&ClientID=" + strClientID + "", "RadWindow1");
                    }
                    oWnd.center();
                }
            </script>
    </telerik:RadCodeBlock>


    Thanks


  26.
  27. subramanian
    subramanian avatar
    3 posts
    Member since:
    May 2012

    Posted 18 Jan 2013 Link to this post

    Hi Tsvetoslav ,

    The below code is working fine for ImageButton when we try to call a Javascript function 

    <

     

     

    telerik:GridTemplateColumn UniqueName="EditCommandColumn" AllowFiltering="false">

     

     

     

    <ItemTemplate>

     

     

     

    <asp:ImageButton ID="imgEdit" runat="server" ImageUrl="../App_Themes/Default/Grid/Edit.gif"

     

     

     

    OnClientClick='<%#Eval("countryId","javascript:EditCountry({0});")%>' />

     

     

     

    </ItemTemplate>

     

     

     

    </telerik:GridTemplateColumn>

    But when we use a RadButton we use the OnClientClicked event, We have used the below format. Its not working.

    <telerik:GridTemplateColumn UniqueName="EditCommandColumn" AllowFiltering="false">

     

     

     

    <ItemTemplate>

     

     

     

     

     

     

     

    <telerik:RadButton ToolTip="Edit Country" ID="imgEdit" runat="server" ForeColor="White" AutoPostBack="false"

     

     

     

    OnClientClicked="function(sender,e){EditCountry('<%#Eval("countryId")%>');}" CssClass="imgEdit">

     

     

     

    <Image EnableImageButton="true" IsBackgroundImage="true"></Image>

     

     

     

    </telerik:RadButton>

     

    </ItemTemplate>

     

     

     

    </telerik:GridTemplateColumn>

    correct me if i am wrong.

    Regards,
    Subbu
  29. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jan 2013 Link to this post

    Hi,

    I suppose you want to access the value in OnClientClick event of RadButton. Here is the sample code.
    JS:
    function OnClientClicked(sender, args) {
     var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
           var row = masterTable.get_dataItems();
           for (var i = 0; i < masterTable.get_dataItems().length; i++) {
               var cell = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[i], "CountryID");
               alert(cell.innerHTML);
           }
       }

    Thanks,
    Shinu
  31. subramanian
    subramanian avatar
    3 posts
    Member since:
    May 2012

    Posted 24 Jan 2013 Link to this post

    Hi Shinu

    Here i want to get the specific country id from the grid, for E.G :) when the user clicks the edit button for the particular row.

    previously we have used <Image Button> with EVAL Function we have achived the functionality.

    now we have changed to <RadButton>, As RadButton does not have the event onclientclick, it has only onclientclicked/clicking event. How to use the EVAL function within the RAD Button using onclientclicked event.

    Regards,
    Subbu 
  32.
  33. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 28 Jan 2013 Link to this post

    Hello,

    You can use anonymous function in the OnClientClicked/OnClientClicking event of the RadButton to pass the evaluated argument. For example:

    <telerik:RadButton runat="server" Text="Click" OnClientClicked='<%# String.Format( "function(sender, args){{showCaseHistory(""{0}"");}}" , Eval("Discontinued") )%>'></telerik:RadButton>

    which is basically the same as OnClientClick function of the ImageButton:

    <asp:ImageButton ID="clientButton" runat="server" ImageUrl="../Pics/error.gif" OnClientClick='<%# String.Format( "showCaseHistory(""{0}"");" , Eval("Discontinued") )%>'  />


    Regards,
    Danail Vasilev
    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.
  35. subramanian
    subramanian avatar
    3 posts
    Member since:
    May 2012

    Posted 04 Feb 2013 Link to this post

    Hi Danail,

    We tried to place the below code, The Onclient clicked event is been modified as suggested by you, its not working please help me out.

    <

     

     

    telerik:RadButton ToolTip="Edit Country" ID="imgEdit" runat="server" ForeColor="White" AutoPostBack="false"

     

     

     

    OnClientClicked = '<%#String.Format("function(sender, args){{EditCountry(""{0}"");}}",Eval("countryId"))%>' CssClass="imgEdit">

     

     

     

    <Image EnableImageButton="true" IsBackgroundImage="true"></Image>

     

     

     

    </telerik:RadButton>

    Attached the screenshot error.

    Thanks,
    Subbu

     

  37. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 07 Feb 2013 Link to this post

    Hello Subramanian,

    Please try specifying the format string as a second parameter of the Eval method as shown below:
    <telerik:RadGrid runat="server" ID="RadGrid1">
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn UniqueName="EditCommandColumn" AllowFiltering="false">
                    <ItemTemplate>
                        <telerik:RadButton ToolTip="Edit Country" ID="imgEdit" runat="server" ForeColor="White" AutoPostBack="false"
                            OnClientClicked='<%#Eval("countryId", "function(sender, args){{EditCountry(\"{0}\");}}")%>' CssClass="imgEdit">
                            <Image EnableImageButton="true" IsBackgroundImage="true"></Image>
                        </telerik:RadButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    Feel free to contact us again if you encounter more difficulties.

    All the best,
    Slav
    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.
  39. Arunava
    Arunava avatar
    1 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2016 in reply to Tsvetoslav Link to this post

    Im trying to pass a parameter which contains URL to a javascript function from Kendo Contenttemplate anchor onclick method. IT has been observed that the URL value gets trimmed in javascript function, it actually removes the "/" from the URL. When I am passing any other parameter it goes to the function correctly. Is this a limitation of kendo contenttemplate call to pass parameter containing "/" character? Kindly advise.
Back to Top