I want to use responsive column widths for my p-datatable p-columns like so:
<p-dataTable [class]="'ui-grid ui-grid-responsive ui-grid-pad'"
[value]="dataList" [responsive]="true" [paginator]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50,100]" emptyMessage="Nothing to see
here...">
<p-column [class]="'ui-grid-col-1'" field="ID" header="ID" ></p-column>
<p-column [class]="'ui-grid-col-2'" field="Title" header="Title">
</p-column>
<p-column [class]="'ui-grid-col-4'" field="Desc" header="Description">
</p-column>
</p-dataTable>
Also, I would to apply different classes for grid columns based on display width breakpoints (-sm, -md, -lg) like Bootstrap.
Can this be done?
Related
Used: Kendo Grid Angularjs 2 version to show the list of users.
Issue: Having rendering issue intermittently to show locked columns data as it only show the first locked row only.
Please see the screenshot below with issue highlighted:
HTML template code:
<kendo-grid
[scrollable]="'scrollable'"
[data]="usersList | async"
[pageSize]="pageSize"
[skip]="skip"
[sort]="sort"
[filter]="filter"
[sortable]="{
allowUnsort: true,
mode: multiple
}"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"
>
<kendo-grid-column field="first_name" title="First Name" width="200" [locked]="true">
<ng-template kendoGridCellTemplate let-dataItem>
<button [routerLink]="['/users/edit/' + dataItem.id]" title="Edit" type="button" class="btn btn-outline btn-default"><i class="fa fa-edit"></i></button>
{{dataItem.first_name}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="last_name" title="Last Name" width="125" [locked]="true">
<ng-template kendoGridCellTemplate let-dataItem>{{dataItem.last_name}}</ng-template>
</kendo-grid-column>
<kendo-grid-column-group media="(min-width: 450px)" [locked]="false">
<kendo-grid-column field="username" title="Username" width="200"></kendo-grid-column>
<kendo-grid-column field="email" title="Email" width="350"></kendo-grid-column>
<kendo-grid-column field="created_at" title="Created On" width="150" [headerStyle]="{'text-align': 'center'}" class="text-centre" [format]="'{0:dd/MM/y}'">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell [showOperators]="true" [column]="column" [filter]="filter"></kendo-grid-date-filter-cell>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.created_at | date:'dd/MM/y' }}</ng-template>
</kendo-grid-column>
</kendo-grid-column-group>
</kendo-grid>
Apparently I have resolved the issue by adding below class on css.
.k-grid-content-locked {
height: calc(100% + 0px) !important;
}
My general purpose is to make a dynamic and very simple flowchart view. I use svg and angular material. I am trying to show angular material objects like (md-select, md-menu, md-button) inside SVG. After a quick research I saw it is possible with "foreignObject" tags.
Secondly; I want to move all these elements at once inside SVG regarding mouse panning. So I use "viewBox" property.
In my sample;
I use "foreignObject" tag to show angular material "md-select" inside a svg element.
I expect "md-select" to move when I change x and y values of viewBox property of svg element but it keeps its position while clickable area changes.
When I try same scenario with html "select" it moves as I expect. But I can't do the same with angular material objects. (they visually stay in their original position but their click area goes another where regarding viexBox x-y values.)
<div ng-controller="MyCtrl">
x: <input ng-model="vbx">
y: <input ng-model="vby">
<svg id="processDesignPanel" viewBox="{{vbx}} {{vby}} 500 500" name="processDesignPanel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px">
<foreignObject width="100" height="50" x="100" y="100">
<md-select placeholder="Assign to user" ng-model="userkey" style="width: 200px;">
<md-option ng-repeat="user in formusers">{{user}}</md-option>
</md-select>
</foreignObject>
<foreignObject width="100" height="50" x="100" y="200">
<select placeholder="Assign to user" ng-model="userkey" style="width: 150px;">
<option ng-repeat="user in formusers">{{user}}</option>
</select>
</foreignObject>
</svg>
</div>
sample js
angular.module('MyApp', ['ngMaterial'])
.controller('MyCtrl', function ($scope) {
$scope.formusers=["ally","mike"];
$scope.vbx=null;
$scope.vby=null;
})
here is my fiddle.
This isn't a complete solution, but I think it's a couple steps in that direction. I cut down your fiddle to show the incorrectly-placed MD select along with the correctly-placed regular select, with a button that modifies the style of the md-select-value tag to have position:inherit and z-index:auto, which makes the MD select appear in the correct place. I don't know why it does this, yet, as I haven't delved into the lib's CSS.
document.getElementsByTagName('md-select-value')[0].setAttribute('style','z-index:auto; position:inherit')
https://jsfiddle.net/emamid/n8tr0gfk/6/
Unable apply background color/color the text present in the table data.
Below mentioned is the code.
<p-column field="unitCount" header="Unit Count" [editable]="true"
[sortable]="true" ></p-column>
<p-column field="serviceCostPerUnit" header="Service Cost Per Unit"
[editable]="true" [sortable]="true" >
<ng-template let-col let-unitgridtask="rowData" pTemplate="body">
<span>{{unitgridtask[col.field] | currency:'USD':true:'1.2-2'}}</span>
</ng-template>
</p-column>
You can achieve it by the following way:
in your style.css add:
td {
color: red;
}
Hope it helps!
Need to change <td> background color if user change the value from dropdown.
<p-column field="newValue" header="User new value" >
<template let-col let-list="rowData" pTemplate="body">
// dropdown here
</template>
</p-column>
It's working fine for me. '#dropdownId' is dynamic. I am using angular2.
let td = this.element.nativeElement.querySelector('#dropdownId').parentNode.parentNode;
this.renderer.setElementStyle(td, 'background-color', 'blue');
how can i get combobox in a ZK spreadsheet cell as shown in the link below?
ZK spreadsheet
Try this code...
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<div height="100%" width="100%" apply="org.zkoss.zssessentials.config.SheetDimensionComposer">
<combobox id="sheets">
</combobox>
<spreadsheet id="spreadsheet" src="/WEB-INF/excel/config/demo_sample.xls"
maxrows="200"
maxcolumns="40"
width="100%"
height="450px"></spreadsheet>
</div>
</zk>
The combobox is a ZK Spreadsheet data validation drop down(when excel cell validation type is a list), it is not a embedded zk combobox. I think ZK Spreadsheet doesn't support to embedded a outside zk component into it yet.
I've never used ZK Spreadsheet but I think this could be the same behavior that in a classic listbox.
In a listbox you have to use a listbox in mold "select" instead a combobox, like this bellow.
<listbox id="listOfItems" model="#bind(vm.listOfItems) #template('anItem')" selectedItem="#bind(vm.selectedItem)">
<listhead>
<listheader label="Item-Label" hflex="1" />
<listheader label="Thing-Label" hflex="1" />
</listhead>
<template name="anItem" var="i">
<listitem>
<listcell>
<textbox value="#bind(i.code)" hflex="1" />
</listcell>
<listcell>
<listbox mold="select" model="#bind(vm.listOfThings) #template('aThing')" selectedItem="#bind(i.selectedThing)" hflex="1">
<template name="aThing"var="t">
<listitem label="#load(t.label)" />
</template>
</listbox>
</listcell>
</listitem>
</template>
</listbox>