We Keep Coding

How to bind angular controller to the tab content in kendo tabstrip

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>

Responsive Menu in Angular Bootstrap

I am trying to create following UI in bootstrap with responsive menu, can anyone provide me guide line how I can achieve this. Both top and side menu should be responsive.
Following is URL what I am trying to create.

In assuming that you know the basics of web design, I will give you the short explanation how the Bootstrap works.
Bootstrap is HTML, CSS and JS framework that handles the responsiveness AUTOMATICALLY. You must only include the libraries correctly and know which Bootstrap css-classes have you too include into your HTML tags.
For example, if you want to achieve the design part for search as in your drawing, you must do something like here in Bootstrap documentation
or for navbar.
I will give you quick hint for components structure of your problem (of course, there is a lot work in css :) ):
<!--The header-->
<div class="col-lg-12">
<div class="col-lg-12">
<div class="col-lg-3"> <!--Logo or whatever in top left side-->
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../Content/img/chrome_logo.jpeg" />
</a>
</div>
</div>
<div class="6"></div>
<div class="col-lg-3" style="float:right"> <!--Search input-->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12" style="margin-left:40%" ><!-- Menu-->
<ul class="nav nav-pills">
<li role="presentation" class="active">Menu1</li>
<li role="presentation">Menu2</li>
<li role="presentation">Menu3</li>
<li role="presentation">Menu4</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2">
//HTML PART FOR SIDEBAR
</div>
<div class="col-lg-10">
//HTML PART FOR MAIN CONTENT
</div>
</div>
You must wisely include exact col-lg, col-md, col-sm and col-xs classes to reach the responsiveness for each browser sizes.
One of the most important things also is to learn Boostrap grid system. This is unavoidable
for components organization.
Just practice as in documentation, learn the Bootstrap css-classes and organisations carefully and after are while, you will be able to design complexer stuffs.
I hope I theoretically covered everything what you need to design with Boostrap framework.

flexslider2 & bootstrap grid compabaility

I have a simple bootstrap grid defined: jsFiddle
The problem is in bootstrap, we define grid like
<div class="row">
<div class="col-md-4">
...
But in flexslider2 we need to wrap into li, e.g.
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
But I want to retain to the use of bootstrap grid as it is responsive and position more easy to control. So, it is possible to remain my grid but to apply flexslide onto it?
I.e. in the flddle, I want 4 & 5 to be hidden at the beginning.

I don't know if this is what you are after, but actually FlexSlider has a "selector" option that allows you to wrap your slides into any element you want:
jsFiddle
$('.flexslider').flexslider({
selector: ".slides > div.col-md-4"
});
Anyway, maybe Bootstrap styles will interfere with Flexslider (because Flexslider sets the width of the slides when it loads), so not sure if this is a good idea. Probably it's easier to define specific styles for the slides.

I don't see the problem you are encountering, but i have updated your jsfiddle.
You should place the whole flexslider into the column:
<div class="row">
<div class="col-md-4">
<div class="flexslider">
<ul class="slides">
<li>
<img ... />
</li>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
</ul>
</div>
</div>
</div>

How to dynamically generate a basic kendoUI widget?

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.

Spry Tabbed Panel display

I have made a Spry 4-tabbed panel from Dreamweaver and customised it to use as a portfolio site.
I want to run 'Flickrshow' as the 3rd tabbed panel content. (Flickrshow is a javascript slideshow that links to a Flickr photo sharing account).
My problem is that the Flickrshow slideshow doesn't display in the 3rd tabbed panel content.
However it does display in the 1st tabbed panel content and it also does display correctly when the code is run independently. I also have another Javascript 'simplegallery' running in the 2nd panel content, which works fine. Is this causing a conflict?
Any suggestions why this won't display?
Thanks!
<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script>
<script> var cesc = new flickrshow('cesc', {
autoplay:true,
interval:4200,
hide_buttons: false,
license:null,
tags:'website',
user:'52147781#N05'});</script>
<div id="nav1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About</li>
<li class="TabbedPanelsTab" tabindex="0">Graphics</li>
<li class="TabbedPanelsTab" tabindex="0">Photos</li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"></div>
<div class="TabbedPanelsContent"><div id="simplegallery1"></div></div>
<div class="TabbedPanelsContent"><div id="cesc"><p>Please enable Javascript to view this slideshow</p></div></div>
<div class="TabbedPanelsContent"><div id="contact"></div>
</div>
</div>