JavaScript IIFE inside template

2 posts, 0 answers
  1. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 24 Apr 2015 Link to this post

    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.

  2. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 27 Apr 2015 Link to this post

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

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

  3. Kendo UI is VS 2017 Ready
Back to Top