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

[santhosh]

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

 

[Tsvetoslav]

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.

[santhosh]

Hi,

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

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

Regards,

Santhosh

[Tsvetoslav]

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.

[santhosh]

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

[Tsvetoslav]

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.

[santhosh]

Hi,

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

Regards,

Santhosh

[Tsvetoslav]

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.

[santhosh]

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

 

[Tsvetoslav]

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.

[santhosh]

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

[MarkSci]

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.

[MarkSci]

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

[subramanian]

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

[Shinu]

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

[subramanian]

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 

[Danail Vasilev]

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

[subramanian]

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

 

[Slav]

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

[Arunava]

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.