Run Javascript in ItemTemplate after Ajax/Refresh

7 posts, 1 answers
  1. Kristian
    Kristian avatar
    16 posts
    Member since:
    Jun 2010

    Posted 27 Apr 2011 Link to this post

    Ok so I have some javascript in my RadGrid ItemTemplate of a GridTemplateColumn that does some calculations which fires just fine on the intial page load. But after I hit refresh on the commandbar it disappears, the RadGrid is wrapped in an Ajax Panel. how would I be able to call the javascript again?

     

    <telerik:GridTemplateColumn DataField="TotalSize" DataType="System.String" HeaderText="Size" UniqueName="Size">
                     <ItemTemplate>
                          <script type="text/javascript">
                          ...
                          </script>
                    </ItemTemplate>
     </telerik:GridTemplateColumn>

     

     

     

     

  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 02 May 2011 Link to this post

    Hello Kristian,

    Could you please try wrapping the script into the RadScriptBlock, and let me know if the issue still exists:
    <telerik:GridTemplateColumn DataField="TotalSize" DataType="System.String" HeaderText="Size" UniqueName="Size">
         <ItemTemplate>
               <telerik:RadScriptBlock runat="server">
                       <script type="text/javascript">
                                ....
                       </script>
               </telerik:RadScriptBlock>
         </ItemTemplate>
    </telerik:GridTemplateColumn>

    Additionally please check out the following online documentation article:
    http://www.telerik.com/help/aspnet-ajax/ajax-radscriptblock-radcodeblock.html

    All the best,
    Radoslav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kristian
    Kristian avatar
    16 posts
    Member since:
    Jun 2010

    Posted 02 May 2011 Link to this post

    Ok I tried that, and wrapped my grid in an updatepanel as well but it still doesn't work. I have the page set to enable viewstate as well.

    <telerik:GridTemplateColumn DataField="TotalSize" DataType="System.String" HeaderText="Size" UniqueName="Size">
                            <ItemTemplate>
                                <telerik:RadScriptBlock runat="server">
                                    <script type="text/javascript">
                                        //<![CDATA[
                                                   
                                                var fileSize = <%# Convert.ToDouble(Eval("TotalSize")) %>;
                                                // Check if the file size is bigger than a byte
                                                if(fileSize > 1024)
                                                {
                                                    fileSize = fileSize * 0.0009765625;
     
                                                    // Check if the size is bigger than a kilobyte
                                                    if(fileSize > 1024)
                                                    {
                                                        fileSize = fileSize * 0.0009765625;
                                                        // Write the size as Megabytes
                                                        document.write("<div style='text-align: right;' class='thdownloadSize'>" +
                                                            fileSize.toFixed(2) +
                                                            " MB</div>");
                                                    }
                                                    else
                                                    {
                                                        // Write the size as Kilobytes
                                                        document.write("<div style='text-align: right;' class='thdownloadSize'>" +
                                                            fileSize.toFixed(2) +
                                                            " KB</div>");
                                                    }
                                                }
                                                else
                                                {
                                                    // Write the size as Bytes
                                                    document.write("<div style='text-align: right;' class='thdownloadSize'>" +
                                                        fileSize.toFixed(2) +
                                                        " B</div>");
                                                }
                                     
                                        //]]>
                                    </script>  
                                </telerik:RadScriptBlock>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 05 May 2011 Link to this post

    Hello Kristian,

    I tried to reproduce the described issue but to no avail. I am sending you a simple example. Please check it out and let me know what differs in your case.
    Looking forward for your reply.

    All the best,
    Radoslav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Kristian
    Kristian avatar
    16 posts
    Member since:
    Jun 2010

    Posted 05 May 2011 Link to this post

    Thank you Radoslav, the code does work.

    I think i found the problem I am having I am trying to write some text using the javascript to fill the template column. When using document.write the javascript fills the template columns on initial load appropriately, but afterwards it will just run once and put the text on the top of the page and the page is stuck forever loading. Same thing happens with your code if I change the script. Is there a way to get the javascript to write to the template?

    <script type="text/javascript">
                                         
                                                var fileSize = <%# Convert.ToInt32(Eval("ID")) %>;
                                                // Check if the file size is bigger than a byte
                                                if(fileSize > 4)
                                                {
                                                  // alert("ID is bigger than 4"); 
                                                   document.write("ID is bigger than 4");
                                                }
                                                else
                                                {
                                                   // alert("ID is smaller than 4");
                                                    document.write("ID is smaller than 4");
                                                }
          
                                    </script>

  7. Answer
    Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 11 May 2011 Link to this post

    Hello Kristian,

    To achieve the desired functionality and change the text into the grid column after ajax you could try using the following approach:

    Add asp:Label into the GridTemplateColumn.ItemTemplate:
    <telerik:GridTemplateColumn DataField="ID" HeaderText="Size" UniqueName="TemplateColumnUniqueName">
             <ItemTemplate>
                     <asp:Label runat="server" ID="Label1"></asp:Label>
              </ItemTemplate>
    </telerik:GridTemplateColumn>

    Into the ItemDataBound find the label control and change its text depending on value into the ID field:
    void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = e.Item as GridDataItem;
                int id = Convert.ToInt32((item.DataItem as DataRowView).Row["ID"]);
                if (id > 4)
                {
                    (item["TemplateColumnUniqueName"].FindControl("Label1") as Label).Text = "ID is bigger than 4";
                }
                else
                {
                    (item["TemplateColumnUniqueName"].FindControl("Label1") as Label).Text = "ID is smaller  than 4";
                }
            }
        }

    Additionally I am sending you the modified example. Please check it out and let me know if it helps you.

    Greetings,
    Radoslav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Pat Huesers
    Pat Huesers avatar
    17 posts
    Member since:
    Jan 2008

    Posted 01 Feb 2013 Link to this post

    Use RadAjaxManager1.ResponseScripts.Add()  to call a javascript function after ajax postback.

    Comment from http://www.telerik.com/community/forums/aspnet-ajax/ajax/javascript-doesn-t-work-after-postback-in-ajax.aspx

    "You need to run your jQuery script again after the AjaxCallback, in order to apply the settings for the new created HTML Dom elements in the page. After Ajax each element that is update, is actually replaced with fresh new element, and it does not have its events attached."

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017