Run Javascript in ItemTemplate after Ajax/Refresh

[Kristian]

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>

 

 

 

 

[Radoslav]

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

[Kristian]

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>

[Radoslav]

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

[Kristian]

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>

[Radoslav]

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

[Pat Huesers]

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."