JavaScript IIFE inside template

[Luis]

Hello

I have a kendo grid bound to the following kendo template code in MVC.

<script type="text/kendo-tmpl" id="AgencyItemTemplate">
   @Html.Action("MyTemplate", "MyController", new {area = "MyArea"})

</script>

 This actions renders another kendo grid with the following code:

  @(Html.Kendo().Grid<SomeModel>()
        .Name("MyGrid_#=idFromTemplateCaller#")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Refresh", "MyController", new { area = "MyArea", idFromTemplateCaller= "#=idFromTemplateCaller#" }))
            .Sort(sort => sort.Add(c => c.CreatedDateTime).Descending())
        )

        .Columns(cols =>

        {
            cols.Bound(a => a.FirstProperty)
                .Width(80)
                .Format("{0:c}");
            cols.Bound(a => a.SecondProperty)
                .Width(80)
        })
        .ToClientTemplate()
    )

This works fine, the way it works is the following. There is a "master grid" which offers the user to see details of each of the records. These details are shown in the grid inside the template, passing the "idFromTemplateCaller" to retrieve the appropiate details for each record. What I want to do is the following: when there are no details, remove the grid and show the following custom element

 <div id="noDetailsFound" style="display: none;">

No details found
</div>

This I would normally achieve by binding a custom event  to the Databound of the grid by adding the following line of code

.Events(e => e.DataBound("myPageNS,myJSEvent"))

 And the event would be defined in the same details grid file as follows:

 <script type="text/javascript">

(function(){

     this.myPageNS = this.myPageNS || {};

    myPageNS.myJSEvent = function(){

        alert("fire databound event");

    }

}());

</script>

 

However, I am unable to write javascript code inside the template file. I guess this is because templates are in fact javascript code, so I cannot call the <script> tag. Can you please help? I need this code to be in the same file as the grid, I now that putting it outside the kendo template might work but I do not want to do it because it wouldnt follow my architecture principles.

 I investigated and saw that I am able to write JS code inside the hash symbol #. However, this doesn't work properly in the IIFE. It fails systematically

Greetings,

Luis.

[Luis]

turns out that I was not correctly scaping the '#' inside my jQuery selectors.

I was writing $('#someId') instead of $('\#someId')