Kendo - Display dropdown over-top parent div - html

I'm using the Kendo Ext library (https://github.com/jsExtensions/kendoui-extended-api) to render a Treeview inside of a Dropdown List. The problem I'm having is that the control get's hidden underneath the parent div. However when compared to the normal Kendo Dropdown List, that control does not suffer the same problem.
This is the example I have so far:
https://jsfiddle.net/6xxau9d4/1/
HTML
<div class="elm1">
<div id="dropDownTreeView"></div>
<input id="sample1" value="1" style="width: 150;" />
<input id="sample2" value="1" style="width: 150x;" />
</div>
JS
var dropDownTreeView = $("#dropDownTreeView").kendoExtDropDownTreeView({
treeview: {
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
}
}).data("kendoExtDropDownTreeView");
dropDownTreeView.dropDownList().text("Dropdown Treeview")
$(document).ready(function() {
$("#sample1").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample1",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
$("#sample2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample2",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
});
CSS
.elm1 {
width: 400px;
height: 100px;
background-color: grey;
position: relative;
overflow: scroll;
}
#customers-list .k-item {
line-height: 1em;
min-width: 300px;
background-color: white;
display: inline-block;
Where Sample1 and Sample2 perform how I would like, but Dropdown Treeview does not. I've been pouring over the source trying to understand what makes Sample1 and Sample2 work, but I have yet to come to a realization. Any help in the right direction is much appreciated.


By default, the Kendo UI DropDownLists, ComboBoxes, DatePickers and similar widgets, use a detached popup, which is a child of the <body> element. This ensures that these popups (or dropdowns, if you prefer) will be able to stay on top of the other page content and not be restricted by fixed-height or scrollable containers.
On the other hand, the ExtDropDownTreeView widget renders its dropdown in the same place, where the original widget element is placed. Since the widget element is located inside a fixed height scrollable container in your case, this causes the observed problem.

Related

Is it possible to add a onClick event to the nodeMenuButton?

I am trying to open the 'Details' when I click at the nodeMenuButton, as I'm opening another page when I click at the node. Is it possible to do it with something like a onclick event inside the "NodeMenu"?
I tried this onclick but it didn't work out..

I am sorry, I may have said something different then what I want. What I am trying to do is: when I click at the "3 dots", the details page opens, or the 'editUI', as you call.
Like this:
nodeMenu: {
onClick: callHandler
},
Or to put a onclick event when I am creating the nodeMenuButton:
OrgChart.templates.joao.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,93,15)" onclick="callHandler();">(...)</g>';
And the callHandler be a function that opens the editForm.

BALKABGraph developer evangelist here
Here is an example how you can use onClick node menu item event
var webcallMeIcon = '<svg width="24" height="24" viewBox="0 0 300 400"><g transform="matrix(1,0,0,1,40,40)"><path fill="#5DB1FF" d="M260.423,0H77.431c-5.522,0-10,4.477-10,10v317.854c0,5.522,4.478,10,10,10h182.992c5.522,0,10-4.478,10-10V10 C270.423,4.477,265.945,0,260.423,0z M178.927,302.594c0,5.522-4.478,10-10,10c-5.523,0-10-4.478-10-10v-3.364h20V302.594z M250.423,279.229H87.431V58.624h162.992V279.229z" /><path fill="#5DB1FF" d="M118.5,229.156c4.042,4.044,9.415,6.271,15.132,6.271c5.715,0,11.089-2.227,15.133-6.269l29.664-29.662 c4.09-4.093,6.162-9.442,6.24-14.816c5.601-0.078,10.857-2.283,14.829-6.253l29.66-29.662c4.042-4.043,6.269-9.417,6.269-15.133 c0-5.716-2.227-11.09-6.269-15.13l-9.806-9.806c-4.041-4.043-9.415-6.27-15.132-6.27c-5.716,0-11.09,2.227-15.132,6.269 l-29.663,29.662c-4.092,4.092-6.164,9.443-6.242,14.817c-5.601,0.078-10.857,2.283-14.828,6.252l-29.661,29.662 c-4.042,4.043-6.269,9.418-6.268,15.136c0,5.716,2.227,11.089,6.269,15.129L118.5,229.156z M168.618,147.548l29.662-29.661 c1.587-1.587,3.696-2.461,5.94-2.461c2.243,0,4.353,0.874,5.938,2.461l9.808,9.808c1.586,1.586,2.46,3.694,2.46,5.937 c0,2.244-0.874,4.354-2.462,5.941l-29.658,29.661c-1.588,1.587-3.697,2.46-5.941,2.46c-2.243,0-4.353-0.874-5.938-2.46 l-0.309-0.309l19.598-19.598c2.539-2.539,2.539-6.654,0-9.192c-2.537-2.538-6.654-2.538-9.191,0l-19.599,19.598l-0.308-0.308 C165.344,156.152,165.345,150.823,168.618,147.548z M117.888,198.28l29.66-29.661c1.587-1.586,3.695-2.46,5.939-2.46 c2.242,0,4.349,0.872,5.934,2.455c0.002,0.001,0.004,0.003,0.005,0.005l0.309,0.309l-19.598,19.598 c-2.539,2.538-2.539,6.653,0,9.191c1.269,1.27,2.933,1.904,4.596,1.904s3.327-0.635,4.596-1.904l19.599-19.598l0.309,0.309 c3.273,3.273,3.273,8.603,0,11.877l-29.662,29.66c-1.588,1.588-3.698,2.462-5.941,2.462c-2.243,0-4.352-0.874-5.938-2.462 l-9.807-9.806c-1.586-1.586-2.46-3.694-2.46-5.938C115.426,201.978,116.3,199.868,117.888,198.28z" /></g></svg>';
function callHandler(nodeId) {
var nodeData = chart.get(nodeId);
var employeeName = nodeData["name"];
window.location = 'https://webcall.me/' + employeeName;
}
var chart = new OrgChart(document.getElementById("tree"), {
template: "olivia",
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img"
},
nodeMenu: {
call: {
text: "Call now",
icon: webcallMeIcon,
onClick: callHandler
}
},
nodes: [
{ id: 1, name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: 3, pid: 1, tags: ["HRs"], name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
{ id: 4, pid: 1, tags: ["HRs", "Node with unique template"], name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
]
});
html, body{
width: 100%;
height: 100%;
padding: 0;
margin:0;
overflow: hidden;
font-family: Helvetica;
}
#tree{
width:100%;
height:100%;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>
EDIT
You can create your own node menu
The code snippets below demonstrates how to open the edit view on nodeMenuButton click
myNodeMenu = function () {
};
myNodeMenu.prototype.init = function (obj) {
this.obj = obj;
};
myNodeMenu.prototype.show = function (x, y, id) {
this.obj.editUI.show(id);
}
myNodeMenu.prototype.hide = function () {
}
var chart = new OrgChart(document.getElementById("tree"), {
template: "derek",
enableDragDrop: true,
nodeMenuUI: new myNodeMenu(),
menu: {
pdf: { text: "Export PDF" },
png: { text: "Export PNG" },
svg: { text: "Export SVG" },
csv: { text: "Export CSV" }
},
nodeMenu: {
details: { text: "Details" },
add: { text: "Add New" },
edit: { text: "Edit" },
remove: { text: "Remove" },
},
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img",
field_number_children: "field_number_children"
},
nodes: [
{ id: 1, name: "Denny Curtis", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://balkangraph.com/js/img/3.jpg" },
{ id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://balkangraph.com/js/img/4.jpg" },
{ id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://balkangraph.com/js/img/6.jpg" },
{ id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://balkangraph.com/js/img/7.jpg" },
{ id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://balkangraph.com/js/img/8.jpg" }
]
});
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#tree {
width: 100%;
height: 100%;
}
/*partial*/
#tree {
font-family: 'Gochi Hand', cursive;
}
<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"></div>
Let me know if this is what you want

Can ui-grid have multiple fields in a single column?

I have a column with text fields in my ui grid. I need the last two cells of the column to contain a dropbox. I am not sure how to do this the best way. I am using bootstrap and angularjs for the grid and data within the grid.
Here is where I declare the grid within the html file:
<div class="modal-body">
<div id="gridTest" ui-grid="gridOptions" class="grid"></div>
</div>
Here is where I setup the data for the columns and the textfields for the column I am talking about:
$scope.gridOptions = {
showGridFooter: true,
enableHorizontalScrollbar: 0,
showColumnFooter: false,
enableFiltering: false,
enableColumnMenus: false,
enableGridMenu: false,
columnDefs: [
{ field: 'empty', width: '34%', displayName: ''},
{ field: 'modified', width: '34%', displayName: 'Modified', cellTemplate: '<input class="text-test" type="text">'},
{ field: 'original', width: '34%', displayName: 'Originals', cellTemplate: '<div style="text-align:center">{{COL_FIELD CUSTOM_FILTERS}}</div>'},
],
data: [
{
"empty":"Number of Employees(Daily)",
"modified": "",
"original":"20",
},
{
"empty":"Customer Restroom Visits(Daily)",
"modified":"",
"original":"5",
},
{
"empty":"Days Open per Week",
"modified":"",
"original":"5",
},
{
"empty":"Number of Restrooms",
"modified":"",
"original":"2",
},
{
"empty":"Number of Stalls",
"modified":"",
"original":"2",
},
{
"empty":"Number of Urinals",
"modified":"",
"original":"2",
},
{
"empty":"Delivery Frequency",
"modified":"",
"original":"Weekly Deliveries",
},
{
"empty":"Billing Frequency",
"modified":"",
"original":"Monthly",
}
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
Is there a way I can set each cell in the columns as its own field? and how would I add in a dropdown menu for the 2 cells within the column?
I am new to this so any additional information please let me know, thanks!

Bootstrap datetimepicker glyphicon calendar doesn't open

I am trying to use Bootstrap 3 datetimepicker. But the glyphicon calendar doesn't open. See this fiddle:
http://jsfiddle.net/vqsss5fx/
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },
{ rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
];
var obj = {
title: "ParamQuery Grid with JSON Data",
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false,
render : function(){
var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';
return date;
}
},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
];
$('body').on('mouseover','.input-group',function() {
$("#datetimepicker123").datetimepicker();
});
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
<div id="grid_json" style="margin:100px;"></div>

I see three problems:
You have multiple HTML elements with the same ID (#datetimepicker123): please avoid it!
Instead of $("#datetimepicker123").datetimepicker(); you should use $(".input-group.date").datetimepicker(); to add a timepicker to every date input.
The timepicker appears, but it's truncated by the HTML Cell (you can see the arrow under the input field). Some CSS customization might be required:
.pq-grid-cell{
overflow:visible;
}
Result: http://jsfiddle.net/vqsss5fx/3/

Kendo UI grid edit mode columns styles

I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});

You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}

Sencha Touch Horizontally Center Search Field in Navigation Bar

This question is pretty downright dumb and I might have stumbled upon a bug but I need to center my searchfield in my navigation bar in Sencha Touch and I just can't make it work. This is my code:
Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',
xtype: 'mynav',
requires: [
'Ext.field.Search', 'Ext.Button'
],
config: {
fullscreen: true,
navigationBar: {
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
align: 'right'
}
]
},
items: [
{
title: 'MyNav',
xtype: 'list',
fullscreen: true,
grouped: true,
store: {
fields: ['name', 'html'],
sorters: 'name',
data: [
{name: 'Alfa', html: '<p>alfa</p>'},
{name: 'Beta', html: '<p>beta</p>'},
{name: 'Gamma', html: '<p>gamma</p>'},
{name: 'Mupp', html: '<p>mupp</p>'},
{name: 'Tupp', html: '<p>tupp</p>'}
],
grouper: {
groupFn: function(record) {
return record.get('name')[0];
},
indexBar: true
},
},
listeners: {
select: function(view, record) {
var test = Ext.create('Ext.Panel', { fullscreen: true,
title: record.get('name'),
layout: {
type:'vbox'
},
items: [
{
xtype: 'panel',
html: record.get('html')
}
]
});
var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
mainnav.setActiveItem(test);
}
},
itemTpl: '{name}'
}
]
}
});
Focus on the actual navigation bar thing, the other stuff is just code pasted (and I modified it somewhat), I'm pretty sure this is a bug though.
Thanks in advance!

you can try using a toolbar docked in the bottom of the page with the search field centered, I don't know why but the navigation bar ignores the centered property.
Something like this:
config: {
fullscreen: true,
navigationBar: {
},
items: [
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
centered: true
}
],
},
{
title: 'MyNav',
xtype: 'list',
If you need the search field on the top of the screen you could try hiding the navigation bar with hidden: true and changing the docked property in the toolbar.
Hope it helps!

A better answer (for me) that just centres whatever you have added to the navigation bar, is:
this.getNavigationBar().leftBox.setCentered(true);
You will probably want to manage the centred-ness of the navigation bar for each page, though.

I used
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
This would be just under the docked: 'bottom', line is the example above.
Regards
Jacko

Whenever I find it difficult to center a desired field, I just add a spacer before and after, combined with a flex for the item I want to center, it never fails. In this case:
items: [
{
xtype: 'spacer',
},
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
flex: 0.7
},
{
xtype: 'spacer',
},