I am trying to create multi-column combo-box in Kendo-Angular 2.I can't find it in the documentation: https://www.telerik.com/kendo-angular-ui/components/dropdowns/ Is this option present in the Kendo support for Angular 2?
The MultiSelect component provides numerous templates, which could be used to control the rendering of the header, footer and the item content. That being said, we can easily achieve different layout using some additional styling.
<kendo-multiselect
[data]="listItems"
[(ngModel)]="value"
[textField]="'text'"
[valueField]="'value'"
>
<ng-template kendoMultiSelectHeaderTemplate>
<div class="dropdown-header k-widget k-header">
<span>Value</span>
<span>Text</span>
</div>
</ng-template>
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<span class="k-state-default"><h3>{{dataItem.value}}</h3></span>
<span class="k-state-default"><h3>{{dataItem.text}}</h3></span>
</ng-template>
</kendo-multiselect>
Here is a plunker that demonstrates the templates usage:
http://plnkr.co/edit/BvdyXuQ4TQ5OFwDliqYd?p=preview
Please note, that the component doesn't have table-like layout and you will need to implement it manually. Nevertheless as it is shown in the demo, this shouldn't be a tough task.
Related
I am trying to add buttons to my Spartacus storefront.
The problem that is preventing me to progress ahead is:
1)If I generate new button angular component, using Angular, should it be mentioned inside the
tag or outside of that?
2)Should it be rendered in a different way as first?
Check out this repo and the corresponding stackblitz project. The easiest way add new buttons would be to place it in reference to an existing standard component using the outlets. Essentially, you could do some like the following, placing your new angular component app-custom-component before the ExistingComponent.
<ng-template cxOutletRef="ExistingComponent" cxOutletPos="before">
<app-custom-component></app-custom-component>
</ng-template>
Can you describe the problem more clearly? As much as I understood you are looking for below kind of code. For code check this link Spartacus Product Page
<div class="row">
<div class="col-md-6">
<button
class="btn btn-block btn-action"
(click)="addAddressButtonHandle()"
>
{{ 'addressBook.addNewAddress' | cxTranslate }}
</button>
</div>
</div>
The Close Button seems to be a good way for displaying a notice which the user can click away. But its usage remains rather elusive to a newb.
I have placed one on a page:
<div>
<div class="callout" data-closable="slide-out-left">
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
But now I am unaware of any way of changing its color the Zurb way, or where to find closing animation options other than this one I use above. I would like the button to be colored e.g. as a Zurb success, and a fade out effect rather than the confusingly fast slide out effect. How do I go about that?
Actually I would also like the button to tightly wrap around the notice text, not take up the whole line width. Is that doable in any Zurb-idiomatic way?
Thanks!
To change the color of close button or other style, you can code the CSS like
.close-button{
color:red;
}
If you are using SASS you can customize the variables.
http://foundation.zurb.com/sites/docs/close-button.html#sass-reference
The animations you can use are:
slide-in-down
slide-in-left
slide-in-up
slide-in-right
slide-out-down
slide-out-left
slide-out-up
slide-out-right
fade-in
fade-out
hinge-in-from-top
hinge-in-from-right
hinge-in-from-bottom
hinge-in-from-left
hinge-in-from-middle-x
hinge-in-from-middle-y
hinge-out-from-top
hinge-out-from-right
hinge-out-from-bottom
hinge-out-from-left
hinge-out-from-middle-x
hinge-out-from-middle-y
scale-in-up
scale-in-down
scale-out-up
scale-out-down
spin-in
spin-out
spin-in-ccw
spin-out-ccw
http://foundation.zurb.com/sites/docs/motion-ui.html
You can add the callout to a column 1 to 12 wide (although 12 wide is what you already have with the callout on its own). Here I have added it to a 2 wide column. By removing the slide-out method it uses the default fade-out.
<div class="row">
<div class="small-2 columns">
<div class="success callout" data-closable>
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
</div>
</div>
I'm trying to customize the form layout of edit/add/del dialogs but the problem is that the height of my custom fields are not following the standard height (from the fields created automatically by jqgrid). Here is an image:
What I want is that the height of td.DataTD from my custom fields 'Responsável' and 'Componente' keep the same as the other fields. Here is the important part of my code:
beforeShowForm: function(form) {
$('#tr_responsavel').html('<td class="CaptionTD">Responsável</td><td class="DataTD"> <table><td><select role="select" id="resp" name="responsavel" size="1" class="FormElement ui-widget-content ui-corner-all"><option role="option" value="1">Usuário</option><option role="option" value="2">Área</option><option role="option" value="3">Grupo</option></select></td><td><input id="inputResponsavel" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
$('#tr_componente').html('<td class="CaptionTD">Componente</td><td class="DataTD"> <table><td><input id="comp" type="text" role="textbox"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
},
Why you replace existing jqGrid fields with another HTML code? Additionally it seems strange to set <table> inside of the field 'Responsável'. How you imagine that jqGrid get the results from such custom fields? Is it not more easy to append or prepend standard input fields of the Add/Edit form with additional information. In the case the standard fields with the standard ids will stay unchanged and you will have less problems. jqGrid will get the information from the fields without any problems. If one uses jQuery UI Autocomplete or jQuery UI Datepicker controls it do that.
If you really need custom field you should follow the documentation and use edittype: "custom". Look at the demo from the answer for more information.
I've been searching high and low for the past couple of days for the file(s) in Orchard where I can customize the markup used for the navigation
Traversing the tree in the Designer Tool and looking at the template and HTML views doesn't help much seeing as the MenuItemLink renders the <li> in the HTML view but nothing renders it in the template view. So I am quite stumped.
The original markup is like so (Taken from the Designer Tools Zone [Navigation]):
<div class="zone zone-navigation">
<article class="widget-navigation widget-menu-widget widget">
<nav>
<ul class="menu menu-main-menu">
<li class="first">
Work
</li>
</ul>
</nav>
</article>
</div>
What I need is to customize the classes on the <ul> and <li> elements, really.
If possible I'd love to be able to customize it all so I didn't need the <div class="zone zone-navigation"> for example.
But is this even possible?
<li> element is rendered by MenuItem shape (Core\Shapes\MenuItem.cshtml)
<nav> and top <ul> elements are rendered by Menu shape
(Core\Shapes\Menu.cshtml)
<a> element is rendered by MenuItemLink shape (Core\Shapes\MenuItemLink.cshtml)
If you want to override the defaults, simply put appropriate Menu.cshtml, MenuItem.cshtml or MenuItemLink.cshtml files in your theme (or better - copy the default one(s) and alter). Those will be used then instead of the default ones I wrote about above.
I would like to have each and every page on my site to have a skeleton structure as mentioned below. Based on the template selected by the user (saved choice/default css) the appearance of the page changes.
I am planning to use 960.gs or blueprint CSS framework for layout handling.
I am a newbie to CSS and layouts. Best example for my requirement would be how its done on jimdo.com/weebly.com. I am looking for advice so that I can learn this fast and implement it in iterations.
Whats the best approach to solve such design problems. I am sure it needs creative bend but as of now I would like to take bookish approach so that I can use it for my own solution.
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
This 3 column layout generator may help.