Targeting Two Different Templates?

[Jeffrey Edgett]

How do I target two different templates on a page?

In the following code, you will see I have one datasource that has the main data set.   I then filter that data differently, to display some parts in the site's header menu and other parts in the footer menu.

However, the content for the footer menu is being loaded into both templates?


<ul id="navigation_menu" class="navigation_menu"></ul>

<ul id="footer_menu" class="footer_menu"></ul>

 

<!-- TEMPLATES -->

    <script id="navigation_menu_template" type="text/x-kendo-template">

        <li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li>

    </script>

 

    <script id="footer_menu_template" type="text/x-kendo-template">

        <li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li>

    </script>

     

    <!-- INITIALIZE -->

    <script type="text/javascript">

        var navigation_menu = $("#navigation_menu").kendoMenu();

        var footer_menu = $("#footer_menu").kendoMenu();

 

        $(document).ready(function () {

            function menu_initialize() {

                $("#navigation_menu").html(kendo.render(navigation_menu_template, this.view()));

                $("#footer_menu").html(kendo.render(footer_menu_template, this.view()));

            }

            var navigation_menu_template = kendo.template($("#navigation_menu_template").html());

            var footer_menu_template = kendo.template($("#footer_menu_template").html());

            var menu_datasource = new kendo.data.DataSource(

            {

                transport:

                {

                    read: "xml/navigation.xml"

                },

                schema:

                {

                    type: "xml",

                    data: "/navigation/menu/item",

                    model:

                    {

                        fields:

                        {

                            item_id: "item_id/text()",

                            parent_id: "parent_id/text()",

                            text: "text/text()",

                            url: "url/text()",

                            target: "target/text()",

                            title: "title/text()",

                            google_sitemap_priority: "google_sitemap_priority/text()",

                            google_sitemap_frequency: "google_sitemap_frequency/text()",

                            main_inclusion: "main_inclusion/text()",

                            footer_inclusion: "footer_inclusion/text()"

                        }

                    }

                },

                change: menu_initialize

            });

 

            var navigation_menu_datasource = menu_datasource;

            var footer_menu_datasource = menu_datasource;

 

            navigation_menu_datasource.filter({ field: "main_inclusion", operator: "eq", value: "true" });

            footer_menu_datasource.filter({ field: "footer_inclusion", operator: "eq", value: "true" });

 

            navigation_menu_datasource.read();

            footer_menu_datasource.read();

        });           

    </script>

[Petyo]

Hello Jeffrey Edgett,

 

var navigation_menu_datasource = menu_datasource;
var footer_menu_datasource = menu_datasource;

does not clone the datasource - it just creates two references to the same object - hence the problem you are experiencing. The subsequent filtering is applied to the same object (menu_datasource).

Kind regards,
Petyo
the Telerik team