Develop Reference

Bootstrap popover displays title but not content on dynamic control

I have an ASP.NET project using .NET 4.5 and VisualBasic with Bootstrap 3.7. On a particular page a dynamic html table is created in the MainContent container of the page based on a selection the user makes. The data for that table is drawn from a SQL Server database. In selected cells of the table an image is added (dynamically at the same time the table is created) with a javascript function call to create and open a bootstrap popover. The javascript function is located inside the MainContent container of the page. 3 parameters are sent to the function - the id of the image, the title, and content applicable to this image. All 3 values are sent as string values.
The popover works exactly as I expect it to except it does not populate the content. As I click from 1 popover image to another the appropriate title for each different popover is displayed and the popover is located in the correct location. I know the data is sent and received by the javascript function. If in the JavaScript function I change document.getElementById(ctrlTransfer) to 'image' the popover displays both the correct title and content. (It is not positioned by the particular popover image that was clicked but instead, by the 1st non-dynamic image on the page. Also, clicking on other popover images does not change the title or content when 'image' has been substituted.)
Here is the JavaScript function
<script type="text/javascript">
function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
if (TransferTitle != 'undefined') {
var ctrlTransfer = 'MainContent_' + TransferControl;
$document.getElementById(ctrlTransfer)).popover({
trigger: 'hover',
html: true,
title: TransferTitle,
content: TransferValue,
}).popover("show");
}
}
</script>
The html table is created by a call to an ASP.NET sub (in an independent code module in the project) that selectively places a popover image in certain cells in the table.
The code for creating the images for the popover follows:
Dim ibnTrnsfr As ImageButton = New ImageButton
ibnTrnsfr.ID = "ibnTrnsfr" & strCntrlCounter
ibnTrnsfr.Height = 12
ibnTrnsfr.Width = 12
If Not arrScheming(intRow, intCol, 25).Equals(DBNull.Value) Then
ibnTrnsfr.ImageUrl = "/Images/TransferOutBlue4.png"
strTransfrOut = "Transfer Out of " & strCntrlCounter
ibnTrnsfr.OnClientClick = "DisplayTransferValues('" & ibnTrnsfr.ID & "', '" & strTrnsfrOut & "', '" & arrScheming(intRow, intCol, 25) & "'); return false;"
ElseIf Not arrScheming(intRow, intCol, 26).Equals(DBNull.Value) Then
ibnTrnsfr.ImageUrl = "/Images/TransferOutBlue4.png"
strTransfrIn = "Transfer into " & strCntrlCounter
ibnTrnsfr.OnClientClick = "DisplayTransferValues('" & ibnTrnsfr.ID & "', '" & strTrnsfrIn & "', '" & arrScheming(intRow, intCol, 26) & "'); return false;"
End If
Additional code in the page code behind actually adds this image to the table cell.
Steps I have already taken:
Added a function within the DisplayTransferValues function to receive data for content and populate.
Added a delay to DisplayTransferValues for loading time.
Switched the order of "TransferTitle" and "TransferValue" in the parameters sent to the function. It successfully loads the correct data from TransferValue into the title area of the popover.
I am looking to have both the title and content populated in the popover.
Thanks for the help.

I did some additional research and found at getbootstrap.com sometimes styles for a parent element can interfere with html inside the popover. Simply adding container: 'body', fixed the issue:
<script type="text/javascript">
function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
if (TransferTitle != 'undefined') {
var ctrlTransfer = 'MainContent_' + TransferControl;
$document.getElementById(ctrlTransfer)).popover({
container: ' body',
trigger: 'hover',
html: true,
title: TransferTitle,
content: TransferValue,
}).popover("show");
}
}
</script>
Now both the Title and the Content are populated correctly in the Bootstrap Popover.

Selecting multiple items from dropdown to populate on page

I am displaying data from an array in different panels and the user has the option to remove panels from the view and the removed panels are populated in a dropdown menu. The user will have the flexibility to select multiple panel titles to repopulate the page with the selected panels.
Currently i am able to remove panels - push them to a new array and populate the dropdown with removed panel titles from the array.
I am using bootstrap and angular - At this moment i am having trouble displaying the dropdown menu properly as it should and not sure what is wrong.... Here is my html for dropdown:
<select multiple>
<option *ngFor="let item of dropdownlist">{{item.title}}</option>
</select>
This is just showing as an empty rectangle and when i remove a panel the title shows up in the dropdown but it seems like it is missing styling
This is how i would like it to look:
Also this is how i am removing and adding panel to an array:
<a title="Remove Panel" (click)="removePanel(i);">
<i class="glyphicon glyphicon-remove"></i>
</a>
removePanel(index: number): void {
this.dropdownlist.push(new Object(this.items.splice(index, 1)[0]));
}
dropdownlist: Array<any> = [];
items: Array<Panel> = [
new Panel(1, 'panel 1', 'show text', 'test data in modal'),
new Panel(2, 'panel 2','show image', 'more test data'),
new Panel(3, 'panel 3', 'show graph', 'more and more data')
];
I am also not sure how my add function will look from dropdown to items and will be the opposite of my removePanel function?

This not your question's answer but I recommend you using select2

Another option would be to use the Bootstrap multiple select plugin, here is a link to the demo:
http://davidstutz.github.io/bootstrap-multiselect/
And here is the github repo:
https://github.com/davidstutz/bootstrap-multiselect
It's pretty good and I recommend it, it also gives you more options if you decide to configure it again later, and because you'll have already included it in the project you can use this anywhere you need it.
I don't think you'll be able to achieve this naturally and without using a plugin.

How to get access to the view? | Ext.js 6

Currently I am learning ext.js 6 and I have a quastion to ask.
I want to build a tree-like menu and from examples I know how to build all kinds of trees. But how can I change a view when user clicks on different leefs in a tree? I know I need controller(viewcontroller) and handlers to work with events (onClick and such) but how to render views from there?
Thank you.

You need to use add() function for that:
add( component ) : Ext.Component[]/Ext.Component
Adds Component(s) to its parent.
You need to pass the view to be rendered as parameter
Eg. Adding a formpanel & button directly to the view port:
Ext.Viewport.add([
{
xtype:'formpanel'
},
{
xtype:'button'
}
]);

Im my application (its use ExtJS 4 actually, but I guess idea is the same) I do something like this:
var viewport = Ext.create('Ext.container.Viewport', {
alias: 'widget.viewport',
layout: 'border',
items: [
// Its my main menu, displayed on all pages
portalToolbar,
{
xtype: 'panel',
itemId: 'mainPanel',
layout: 'fit',
region: 'center'
}
]
});
And on menu item click I remove any content from main panel and add new one, like this:
// remove previous page from main panel,
// think about `abort()`ing all ajax requests, clear intervals and so on along with this
mainPanel.removeAll();
// `currentInterface` is any component that is one of the pages of my application
mainPanel.add([currentInterface]);
Also you can take a look at Ext.util.History and on menu click add new token to history and on history change event open application page like described above.

Kendo toolbar append is not working

I am trying to append my Kendo Grid toolbar after some functions using following::
1) I am getting the toolbar as::
var toolbar = $("#Grid").find(".k-grid-toolbar").html();
2) then after some changes to Grid using grid.setOptions(JSON.parse(options)) which causes disappear of Toolbar i am again appending toolbar to grid as::
$("#Grid").find(".k-grid-toolbar").html(toolbar);
Here toolbar is appended properly but I am not able to use those functions(i.e. Dropdown inside of toolbar).
How can i get my toolbar Dropdown working?
Thanks in advance

Getting the html() method provides ONLY the HTML code, and not the JavaScript attached to the elements from this HTML. So when you inject your HTML code in the toolbar, you need to call again the JavaScript attached to the elements. If you want to get a kendo widget configuration, for example a dropdownList, you need to call options and dataSource from your widget.
E.g:
var $toolbar = $("#Grid").find(".k-grid-toolbar"),
toolbar = $toolbar.html(),
// Dropdown list Element
$ele = $("input[name=myInput]", $toolbar.get(0)),
// Dropdown list Widget object
ddl = $ele.data("kendoDropDownList"),
cfg = ddl.options;
// toJSON returns objects without the observer properties
cfg.dataSource = ddl.dataSource.data().toJSON();
// HERE YOU REBUILD YOUR TABLE
$toolbar.html(toolbar);
$("input[name=myInput]", $toolbar.get(0)).kendoDropDownList(cfg);
If the elements you add to the toolbar are always the same, I would suggest you create instead a function with the grid as argument (and the data, if the data changes):
function setToolbarContent(grid){
var $toolbar = grid.find(".k-grid-toolbar");
$toolbar.html('My HTML String');
$toolbar.find("input[name=myInput]").kendoDropDownList({my: 'cfg'});
}
And by the way, if you were adding the toolbar config and template to grid.setOptions(), maybe it wouldn't disappear in the first place :)

with out reloading the total content when I click on the menu

I am using asp.net MVC with razor.
In my application,I have a main menu in the layout page.
In each Page,i have given this layout page to display menu in each page like,
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
With this,When I select an item in the menu the total page is reloading,
what i want is when I select item in the menu,the content will only change with out disturbing the menu.can u tell me how to do this?
I have defined menu like
<div id="menu" style="width:80%;"></div>
<script type='text/javascript'>
$("#menu").kendoMenu({
dataSource: [
{
text: Home,
encoded: false,
url:'#Url.Action("Index","Home")'
},
{
text: "<a href='#Url.Action("About","Home")'>About</a>",
encoded: false,
}]
</script>

You have to create an Ajax UI to accomplish this. The menu you're showing is rendering anchor tags which will indeed cause full page loads.
One other option is to come up with a scheme to maintain the state of the menu across page loads (i.e. make the nav points be controlled by rendered pages)