How do I align text to the right on a
<kendo-grid-column>
</kendo-grid-column>
because both
<kendo-grid-column field="margin" title="Margin" style="text-align: right;">
</kendo-grid-column>
and
<kendo-grid-column field="margin" title="Margin" text-align="right">
</kendo-grid-column>
dont work. Please could someone help?
This one should be work
.k-header .k-link{
text-align: right;
}
you can use this one also for specific one
[headerStyle]="{'text-align': 'right'}"
[style]="{'text-align': 'right'}"
You can easily do it with a template:
<template kendoGridCellTemplate let-dataItem>
<span class="right-align">{{dataItem.ProductName}}</span>
</template>
See this plunkr
Related
I built a data grid using
Kendo Angular Grid in which i have given size to each columns and also has command button "Edit, Update, Cancel" as very last columns.
Due to size of columns, grid gets horizontal scroll bars.
Editing is allowed only in last two field columns.
When ever i click on "Edit" button the row scrolls to very left and my editable columns + command buttons ("update"&"cancel") hided this is something weird or not liking to user. Again user has to scroll to right and do the update/cancel operation.
Does any one has solution to this issue.
<kendo-grid [kendoGridBinding]="view" [height]="700" [pageSize]="25" [pageable]="true" [sortable]="true" [selectable]="true"
(dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
(save)="saveHandler($event)">
<!-- <kendo-grid-messages
noRecords="{{ this.noRecordMsg }}">
</kendo-grid-messages> -->
<kendo-grid-column title="View" width="60">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<button kendoButton [icon]="'hyperlink-open'" [look]="'outline'" [routerLink]="['/detail', dataItem.ID]"></button>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="FILE_NAME" title="File Name" width="140"></kendo-grid-column>
<kendo-grid-column field="FILE_DATE" title="File Date" width="90">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.FILE_DATE | date:"shortDate" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="AMT" title="AMT" width="80"></kendo-grid-column>
<kendo-grid-column field="NAME" title="Name" width="90"></kendo-grid-column>
<kendo-grid-column field="ID" title="ID" width="80"></kendo-grid-column>
<kendo-grid-column field="PI" title="PI" width="110">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="PIListItems" [value]="dataItem.PI" [(ngModel)]="dataItem.PI" name="PI"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="STATUS" title="Status" width="100">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="statusListItems" [value]="dataItem.STATUS" [(ngModel)]="dataItem.STATUS" name="STATUS"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="command" width="180">
<ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem">
<button kendoGridEditCommand class="k-primary">Edit</button>
<button kendoGridSaveCommand [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
<kendo-pager-info></kendo-pager-info>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-page-sizes [pageSizes]="[25, 50, 100, 200]"></kendo-pager-page-sizes>
</ng-template>
</kendo-grid>
I don't see how exactly your edit handler looks like but Grid have (edit) emitter according to the documentation.
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/
I believe if you add this in template:
<kendo-grid (edit)="onGridEdit($event)">...</kendo-grid>
And then in the component try add the following:
onGridEdit($event: any): void {
$event.preventDefault();
$event.stopPropagation();
}
It will help.
Hi I am showing items from library to the main page using Content Query. TO scroll this items i am using Marquee now i want to stop when OnMouseOver and again start on out i use onmouseover="stop()" onmouseout="start()" and button to stop but its not working please is the code i have. Can anyone help how use or is there any option. Thank you.
<marquee id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
<style>
#WebPartWPQ2 a {
color:#000000 !important;
}
</style></div></marquee>
Looks like, if I understand you correctly, you would like to add a MouseOver and MouseOut effect to a marquee. If that is correct. all you needed to do is tell the browser that you wanted THIS marquee and it would have worked. your code right now does not say which marquee you want the JavaScript to work towards.
syntax = some-event="(What)*Target****.*(Which)action();"
this.stop(); or this.start
onMouseOver="this.stop();"
Hope this is what you were looking for. If not could you rephrase your
question. I had a hard time understanding you.
<style>
#WebPartWPQ2 a {
color: #000000 !important;
}
</style>
<marquee onmouseover="this.stop();" onmouseout="this.start();" id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
</div>
</marquee>
I was working with a friend today, he uses EJS as templating and I'm using Jade / Pug, I saw something in his code, this part is useful for me but we can't find anything relating to this tag, any ideas ?
<template id="thumbTemplate">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href = "#">
<img src = "">
</a>
</div>
<p style="text-align: center; font-size: 20px"></p>
<p style="text-align: center; font-size: 20px" id="score"></p>
<p style="text-align: center; font-size: 20px" id="dist"></p>
</div>
</template>
Thank for your help.
Are you referring to the "template" tag? If so, here is some information about this tag: https://www.html5rocks.com/en/tutorials/webcomponents/template/
I would like ta dd buttons in a kendo-panelbar-item.
Is that possible?
<kendo-panelbar>
<kendo-panelbar-item title="Heroes" >
<kendo-panelbar-item *ngFor="let hero of heroes" title={{hero.name}} >
//add buttons here
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
I cannot see a problem with adding buttons inside the PanelBar item.
<kendo-panelbar>
<kendo-panelbar-item title="My Teammates" expanded="true">
<template kendoPanelBarContent>
<button kendoButton>Button</button>
</template>
</kendo-panelbar-item>
</kendo-panelbar>
See this plunkr
It's not template but ng-template
<ng-template kendoPanelBarContent>
<button kendoButton>Button</button>
</ng-template>
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.