Kendo treeview with columns in nodes - templates

I'd like to create a treeview with columns as part of the node template. Essentially, I have supplemental data that I want displayed along with the treeview so that the data lines up in columns after the initial node text.
I'm using the Kendo treeview because I need to be able to reorder the items easily using the drag and drop the treeview provides. I've tried using CSS positioning in a Kendo treeview template, but regardless of what I try, the columns to the right of the node are always displayed relative to the node itself.
Any ideas how I can create a treeview that has columnar data as part of the node template that aligns correctly? Using tables messes with the treeview and absolute positioning doesn't seem to work, either. I've tried doing this using table layouts in css:
css ---
.layout-container {
display: table;
}
.layout-row {
display: table-row;
}
.layout-cell {
display: table-cell;
padding-left: 10px;
}
html ----
<div id="treeview" class="layout-container"></div>
<script id="treeview-template" type="text/kendo-ui-template">
<div class="layout-row">
<div class="layout-cell">#: item.text #</div>
<div class="layout-cell">#: item.dept #</div>
<div class="layout-cell">#: item.owner #</div>
</div>
</script>
Here's a jsFiddle of what I have so far: http://jsfiddle.net/trentballew/oc9qsnyc/.

With the help of the Telerik folks, I found the answer by using a conditional template like this to fix the indenting of the second column in the node:
Template:
<div class="item-styling item-text">#: item.text #</div>
# if (item.rowLevel === 2) { #
<div class="item-styling move"> #: item.dept #</div>
# } else { #
<div class="item-styling"> #: item.dept #</div>
# } #
CSS
.item-styling{
display: inline-block;
text-align: left;
width: 150px;
}
.move{
margin-left: 17px;
}
The updated fiddle with the solution is here: http://jsfiddle.net/trentballew/oc9qsnyc/6/.

Related

Centering text inside a div column

I am using the Zurb Foundation framework and am trying to center text.
If I just use the .text-center class:
<h1 class="text-center">My Heading</h1> The text is center.
However, when I place it inside a column, the text is moved slightly to the right:
<div class="row">
<div class="small-2 small-centered columns text-center">
<h1>My Heading</h1>
</div>
</div>
I want to ask what is the correct way of centering the text inside columns?
its should work fine with your code , but if you can provide screenshot to see what do u mean by its move to the right will be nice.
anyway check this solution may work , and the issue could be from additional custom css added if u have one .
CSS :
.row h1 { margin: 0 auto; padding : 0px }
Try this Fiddle
The problem was that the word inside the heading is too long for my mobile device so I added the style property:
word-wrap: break-word;
Not sure if this is the correct way to handle such cases but it is a possible solution.

Angular2 unit testing - why nativeElement has empty CSSStyleDeclaration

I'm trying to test a simple header component that has a button and when being focused - opens a dropdown using just css visibility property.
This is the html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
This is the scss style:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
And this is the test:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
When I run the test I can see that console.log(dropdownElement) exists and that console.log(button.nativeElement) returns the CSSStyleDeclaration object - but ALL the properties have an empty string as a value:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
So basically what I need is to trigger the focus event on the button and then see if the value of the dropdown's css/style property "visibility" is "visible".
I can't figure what's wrong, cause i can see that everything is rendering fine in Karma-Debug but all the style properties are empty... any idea what's the problem?
I've had similar problem in runtime (not tests).
Style property is static and based on initial style attribute on html element so this is not updated dynamically.
Solution is to use Window.getComputedStyle(). This function calculates (current!) styles from stylesheets.

angular material design animation from list to card

If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ

ember bind-attr class is not being set by controller

I'm creating a master-detail table.
Before an item has been chosen, the details should not be visible, only becoming visible on clicking of an item.
The reason I'm using a class is because the table is normally 100% width, and it changes size when the detail pops up. This is not implemented yet. Right now, I just want the 'with-details' class to be inserted into the div when I click in the < li >
Here is a rough twiddle:
https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4
In my template, the < li > has an action:
<li {{action 'showDetails'}}>
which fires the showDetails action in my controller (I know it's firing because of the :) in console):
withDetails: false,
actions: {
showDetails: function() {
console.log(":)");
this.set('withDetails', true);
}
}
which should add the with-detail class to my details div:
<div {{bind-attr class=":game-details withDetails"}} >
which should match my CSS:
.game-details {
display: none;
border: 1px solid red;
}
.game-details.with-details {
display: block;
border: 1px solid green;
}
It should be that easy. What am I missing?
[ EDIT ] I just learned this trick:
Wrong:
<div class="game-details" {{bind-attr class="withDetails"}}>
Right:
<div {{bind-attr class=":game-details withDetails"}}>
which shows the div, but does not attach a with-details class I can target.
bind-attr is deprecated since 1.13 and disabled since 2.0. Instead, you should use embedded {{if}} in your class attribute, like so:
<div class="game-details {{if withDetails "with-details"}}">
{{outlet}}
</div>

starting slideshow from the specified image index

i'm using Galleria slideshow on my web page. I want to start a slideshow from the specified index. In code I pass a parameter to a JavaScript function and in this functions I wrote a line Galleria.configure('show', index); So my function is
function imgIndex(i) {
index = i;
$( "#dialog" ).dialog( "open" );
Galleria.configure('show', index);
}
Also Galleria is in a popup jquery-dialog in the page. The HTML is
<div id="dialog" title="Galleria dialog">
<div id="galleria" style="float: left; width: 100%; background-color: #000000;">
<script src="famous/list_images.php"></script>
<script>
Galleria.run('#galleria', {
dataSource: data,
transition: 'slide',
transitionSpeed: 800,
responsive:true,
thumbnails: false,
clicknext: true,
autoplay: true,
height: 0.5625
});
</script>
</div>
</div>
The problem is when I first time click on image slideshow starts in a popup dialog on the specified index. But when I close the dialog and want to start it again from the other image it seems that Galleria doesn't react to this and continues from the image where it was last time.
Thank you for your help.