dynamically generated anchor need to have onclick event

2 posts, 0 answers
  1. Subramony Ramasubramanian
    Subramony Ramasubramanian avatar
    5 posts
    Member since:
    Apr 2010

    Posted 17 Oct 2013 Link to this post

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        

        <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.mobile.min.js"></script>

        <script>
            var app = new kendo.mobile.Application($(document.body));    </script>
    </head>
    <body id="body">
        <div data-role="layout" data-id="search-layout">
        </div>
        <div id="searchView" data-role="view" data-layout="search-layout">
            <ul data-template="ul-template" data-bind="source: serviceTypeView">
            </ul>
            <script id="ul-template" type="text/x-kendo-template">
                 <li>
                        Name: <span data-bind="text:ProductName"></span><br/>
                        ID: <span data-bind="text: ProductID"></span><br/>                    
                        Click here : <a id="button1" data-click="GetDistinct">#=ProductName#</a><br/><hr/><br/>
                </li>
            </script>
        </div>
         <div data-role="layout" data-id="result-layout">
        </div>
        <div id="resultView" data-role="view" data-layout="result-layout">
            <ul data-template="ul-template" data-bind="source: resultTypeView">
            </ul>
            <script id="res-template" type="text/x-kendo-template">
                 <li>
                        Name: <span data-bind="text:ProductName"></span>
                        ID: <span data-bind="text: ProductID"></span>                    
                        <a id="button1" data-click="GetDetail">#=ProductName#</a>
                </li>
            </script>
        </div>
        <script>
            var serviceTypeDataSource;
            var viewModelService;
            $(window).load(function () {
                serviceTypeDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "http://demos.kendoui.com/service/Products"
                        }
                    },
                    change: function () {
                        viewModelService = kendo.observable({
                            serviceTypeView: [],
                            serviceTypeValue: {},
                            serviceTypeDisplayValue: function () {
                                return kendo.stringify(this.get("serviceTypeValue"));
                            }
                        }); //end of viewModel

                        viewModelService.serviceTypeView = serviceTypeDataSource.view();

                        kendo.bind("#searchView", viewModelService);
                    }
                }); //end of DataSource

                serviceTypeDataSource.read();
            });

            var resultTypeDataSource;
            var viewModelResult;

            function GetDistinct(e) {
                resultTypeDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "http://demos.kendoui.com/service/Products"
                        }
                    },
                    change: function () {
                        viewModelResult = kendo.observable({
                            resultTypeView: [],
                            resultTypeValue: {},
                            resultTypeDisplayValue: function () {
                                return kendo.stringify(this.get("resultTypeValue"));
                            }
                        }); //end of viewModel

                        viewModelResult.serviceTypeView = resultTypeDataSource.view();

                        kendo.bind("#resultView", viewModelResult);
                    }
                }); //end of DataSource

                resultTypeDataSource.read();

            }

            function GetDetail(e) {
                alert("detail");
            }
        </script>
    </body>
    </html>





    In my above example I am trying to achieve the following.
    1) I am first rendering the list of products inside a template which is under "search-layout". During this time I am generating anchor tags.
    2) On clicking these anchor tag I want to generate another list using the function "GetDistinct()" and show them inside another layout "result-layout".

    I have 2 problems.
    1) Dynamically generated anchor tags does not emit click event and call GetDistinct function
    2)How do I show the result of GetDistinct function inside "result-layout"
    I have my code in http://jsbin.com/ebuhOLU/1/edit
    Please help
    jsbin.com/ebuhOLU/1
    Thanks
    Subbu
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 21 Oct 2013 Link to this post

    Hi Subramony,

    The click event is not fired, because you are using kendo.bind() which is not supported in Kendo UI Mobile. You will need to use the data-model attribute configuration to point the view to the viewModel that you want to use please check this example:

    http://jsbin.com/iHuQuyE/2/edit
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top