How to execute javascript in DataItemTemplateContent on gridview paging

Question

I have a DevExpress GridView that contains a column with a custom DataItemTemplate

column.SetDataItemTemplateContent( c => { ViewContext.Writer.Write( Html.Partial( "PartialView" ) ); } ); 

with a partial PartialView similar to:

 <p>text</p> <script> console.log("hello from PartialView"); </script> 

So, after reloading the page, I get console.log output x times, where x is the number of rows displayed in my GridView. But if I go to the next page in the GridView, js will no longer execute, and I no longer get console.log outputs. A partial view is displayed correctly, as the "text" for each line is still displayed.

Any ideas on how to get the result again when using meshing?

(By the way, my goal is to display the chemical structure through javascript. The example is simplified to show a common problem.)

Answer 1

Try adding a script tag starting with "dxss_", for example:

 <script id="dxss_myscript" type="text/javascript"> alert('hello from PartialView'); </script> 

Answer 2

I'm not quite sure what you are trying to do, but instead of embedding javascript in return, there are client-side scripts that you can connect to. I would give your DOM elements a unique class and then set ClientSideEvents.EndCallBack.

 settings.ClientSideEvents.EndCallback = "function (s,e) { if (e.command != 'FUNCTION') { YourCustomMethod(s, e) }; }"; 

some simple jquery or direct javascript will allow you to get a list of DOM objects matching your class name as a selector, and you can include any additional data needed for processing in the data properties.

In your example, a partial view looks something like this:

 <p class="actonme" data-msg="hello from PartialView">text</p> 

and your method will look something like this:

 function YourCustomMethod(s, e) { var objs = document.getElementsByClassName('actonme'); var count = objs.length; for (var iIndex = 0; iIndex < count; iIndex++) { console.log(objs[iIndex].getAttribute("data-msg")); } }