Listview Template - is there (possibly) a way of including JPlayer in a template?

2 posts, 0 answers
  1. Ian
    Ian avatar
    1 posts
    Member since:
    Jan 2012

    Posted 06 Apr 2012 Link to this post

    Working on a basic application that recieves some records from a database which contain audio files. We've had the ability to display the records in a list view and we were able to include a Jplayer at the bottom (as a footer) playing a local music file. Is there a possibility of including the JPlayer inside of a template like so...

    <script type="text/x-kendo-template" id="template">
    <strong>${data.StartTime}</strong>
    <strong>"Hello World"</strong>
    <!-- JPlayer here -->
    </script>

    The JPlayer is simply a div tag with a function that is called upon document being ready...

    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-audio-container">
    <div class="jp-audio">
    <div class="jp-type-single">
    <div id="jp_interface_1" class="jp-interface">
    <ul class="jp-controls">
    <li><a href="#" class="jp-play" tabindex="1">play</a></li>
    <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
    <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
    <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
    </ul>
    <div class="jp-progress-container">
    <div class="jp-progress">
    <div class="jp-seek-bar">
    <div class="jp-play-bar"></div>
    </div>
    </div>
    <div class="jp-volume-bar-container">
    <div class="jp-volume-bar">
    <div class="jp-volume-bar-value"></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    I know this is alot of code...just fairly lost on the subject of templates and how they work.

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 10 Apr 2012 Link to this post

    Hello Ian,

    Generally speaking this could be done, but it is important to call the jPlayer initialization function after the template has been rendered. I tested a very basic scenario and got it working on my side - you can check my sample here.

    I hope this information helps.

    Regards,
    Alexander Valchev
    the Telerik team
    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