I'm facing an issue with Kendo UI:
When trying to generate a list dynamically (I want it to be a listView), with the onShow method. It doesn't seems to attach any of KendoUI functionnalities nor styling. like if the kendo "Widget generator" has already done its job and don't touch the newly added content.
In my case:
Here is the HTML:
<div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
<div id="profileContent"></div>
She/He Might Like:
<div data-role="scrollview" data-page="0">
<div class="login-scrollV" id="page1" data-role="page">
</div><div class="login-scrollV" id="page2" data-role="page">
</div><div class="login-scrollV" id="page3" data-role="page">
</div>
</div>
</div>
and with Mustache JS, I generate this content dynamically and append it to #profileContent
<script id="profileTemplate" type="text/x-handlebars-template">
<ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
<li>Profile
<ul>
<li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
<li>Gender <span class="sales-up">{{genre}}</span></li>
<li>Notation <span class="sales-up">Not Yet Ready</span></li>
</ul>
</li>
<li>Center Of Interests
<ul>
<li>Rock</li>
<li>Opera</li>
<li>Exhibitions</li>
</ul>
</li>
</ul>
</script>
In the end, the content is generated the way I told Mustache to do it but Kendo doesn't applu any of its functioannlity to this listView nor any style.
I understand why (I assume the html should be there from the beginning), so my question is:
How Can I find a workaround to created a list View Dynamically with the onShow method with Mustache handlebars (ideally) that Kendo UI would recognize and then apply to it the list Views functionalities?
Many Thanks
You probably need to run kendo.bind or kendo.init on the profileContent div, after you populate it.
Related
I couldn't find anything on this. I have a simple website done in Jquery, CSS and HTML. I have a list of hundreds of products stored in a local folder. Once a product is clicked, the user should be able to see a picture of the specification on another page. The page/pages have the same HTML structure, just name and pictures are different. What is the best way to go about it? Do I create a new HTML for each product? Or should I use the same Html page to render different names and pictures? If so, how does this page determine what product was clicked? Right now I am using href to direct to different html pages, but I dont think this is the optimal way of doing it. If I use a single page to gernerate different content, how do I pass in whats being clicked?
<ul id="denison-single-pump-menu" class="container collapse">
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v10_v20_series.html">V10-V20 Serires</a></li>
<li class="col">V10</li>
<li class="col">V20</li>
</div>
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v_series.html">V Serires</a></li>
<li class="col">20V</li>
<li class="col">25V</li>
<li class="col">35V</li>
<li class="col">45V</li>
</div>
</ul>
hi i will try to solve your problem, you can make modal on the same html page. you can see here how to make modal https://www.w3schools.com/bootstrap/bootstrap_modal.asp. to differentiate you can replace the id of the modal and the data-target, by using looping or retrieving unique data from your data ex: id. hopefully this can solve your problem.
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I use KendoTabStrip and KendoGrid to create my page. There're several tabs in my TabStrip, each tab's content is a grid. I put each grids in a separate html file and use contentUrl to load them, like this
http://demos.telerik.com/kendo-ui/tabstrip/ajax
But it looks like if I bind angular controller in each files doesn't work. The code for tab content looks like this:
<div class="k-content" ng-controller="testCtrl">
<div class="data-grid" id="testGrid">
</div>
</div>
The controller seems doesn't been binded. Anyone can help?
Try this
<div ng-controller="MyCtrl">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">First tab</li>
<li>Second tab</li>
</ul>
<div style="padding: 1em">
This is the first tab
</div>
<div style="padding: 1em">
This is the second tab
</div>
</div>
</div>
I have a twitter bootstrap tabs component where i have five tabs.I want 3 of the tabs to be part of a form and the 4th, 5th not be.
So I thought, I'll just wrap the 3 tabs in a form.But it does not work. I have already checked How to wrap a selection of twitter bootstrap tabs as one form? this thread and from the first answer got two issues. Since in the 2nd answer issues are explained but i am expecting better solution using js and without modifying bootstrap core file.
I am using twitter bootstrap 3.3.2. How can I fix this?
Here is the sample code:
<div class="row">
<div class="col-lg-12 animated-panel zoomIn" style="animation-delay: 0.4s;">
<div class="hpanel">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">First</li>
<li class="">Second</li>
<li class="">Third</li>
<li class="">Fourth</li>
<li class="">Fifth</li>
</ul>
<div class="tab-content">
<form>
<div class="tab-pane active" id="tab-1">
<div class="panel-body">First tab fields
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">Second tab fiels
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">Third tab fields
</div>
</div>
</form>
<div class="tab-pane" id="tab-4">
<div class="panel-body">Fourth tab content
</div>
</div>
<div class="tab-pane" id="tab-5">
<div class="panel-body">Fifth tab content
</div>
</div>
</div>
</div>
</div>
</div>
I guess since bootstraps javascript conflicts with this kind of form placing you need to build an (dirty) workaround if you really want to use bootstraps tabs with this kind of form-placing.
You could place inside each of the first three tabs an single form and copy (only for submitting) the content of the other forms into the form submitted.
#lonesomeday mentions a way to intercept submitting forms
So you could do something like
$(document).on('submit', '.tab-pane:lt(3) form', function(e){
e.preventDefault();
$('.tab-pane:lt(3) form').not($(this)).children().clone().addClass('toRemove').hide().appendTo($(this));
this.submit();
$('.toRemove').remove();
});
Note: I did not test the code above
If your submit-button/trigger is outside of the tab-structure you could just copy the contents of the three tabs into an hidden form anywhere on the page and submit this one.
Another way would be to invoke jQuery's ajax without using forms.
I'm having trouble and I am not sure on how to tackle this problem.
I have a Spry Tabbed Panels Widget with content. I know that the 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly, but I would like to add one more level (the container class below the main div), like this:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="content">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
As far as I understand, in order to get this to work properly, I would have to modify the widget core. Can anyone point me in the right direction or help me modify the widget core?
Many thanks in advance!!
<div id="TabbedPanels1" class="TabbedPanels">
would work as
<div id="TabbedPanels1" class="TabbedPanels content">
so there is no need for another div layer...