I was trying to use the drop down filter on Kendo Grid. But i am getting the error,
Invalid prop: type check failed for prop "filterable". Expected Boolean, got Object.
<kendo-grid-column :filterable="{
ui: statusFilter,
operators: {
string:{
eq : 'Is equal to'
}
}
}" field="status" title="Client Status" width="10%"></kendo-grid-column>
Status Filter Method
statusFilter(element) {
this.$http.get("list/getclientstatus").then(({ data }) => {
element.kendoDropDownList({
dataSource: data,
dataTextField: "text",
dataValueField: "value",
optionLabel: "--Select Value--"
});
});
I am using kendo vue-templates on grid for action method which is only available as the props.
https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/
The version of kendo grid i am using : 2018.2.516,
So, i could not use this filter as:
columns: [
{
field: "status",
title: "Client Status",
filterable: {
ui: this.statusFilter,
operators: {
string: {
eq: "Is equal to"
}
}
}
}
This method is working very fine for me. But the filterable props as object is not working on my case.
What could be the workaround for this problem?
Please help!
I updated my kendo vue ui wrapper version, It is working as expected.
"#progress/kendo-grid-vue-wrapper": "^2018.2.620",
Related
I'm starting to use Storybook in an Angular component library.
It works fine for components with inputs like booleans or strings, it shows those inputs using controls.
But there are certain components where the input is an object.
For those components I'm able to provide an object, but users are able to edit a string with the JSON representation of the object instead of several inputs.
How do I do this in a user-friendly way so users can edit those properties in the control without using a JSON representation of the object?
If you're using Knobs, you can write them like this:
This sample here:
class sample{
title: string;
text: string;
settings: {
language: string;
disabled: boolean;
}
}
would turn into this:
template: `
<div style="max-width:80vw;margin:auto;">
<app-custom-component
[title]="this.titleKnob"
[text]="this.textKnob"
[settings]="this.settingsKnob"
></app-custom-component>
</div>
`,
props: {
titleKnob: text('Title',''),
textKnob: text('Text area', ''),
settingsKnob: {
language: text('Default Language', 'en'),
disabled: boolean('Disabled', false),
}
}
I am building a app in angular 5. In my HTML page, I have a table which shows the data on being queried. This data is being displayed in ag-grid using directive. One of the column in grid is displayed as HTML link. I am using cellRendererFramework feature to show the values in column as link.
It is working fine and displays the link on the value for that column in table for each row. My requirement is that I want to pass additional parameter to cellRendererFramework component from the main component class. The reason I need this is because when the link is clicked the Angular app displays new components using angular routers and I need to pass multiple values to other component.
I am not sure how to pass parameters to cellRendererFramework class.
Column definitions of data grid
this.columnDefs = [
{ headerName: "Hotel ID", field: "HotelID", width: 500,
cellRendererFramework: LinkcompComponent },
{ headerName: "Account Number", field: "AccountNumber" , width: 700 },
{ headerName: "Customer Name", field: "PartyName", width: 670 }
];
HTML file of cellRendererFramework component
<a [routerLink]="['/trxDetails',params.value]">{{ params.value }}</a>
Is it possible to pass additional parameters to cellRendererFramework component?
Did you find a way to do this ? I am in exactly the same situation as you. Need to pass the "routerLink" as a parameter to this cellRendererFramework component, so that I can make it generic and use the component in multiple ag-grids / pages.
#Component({
// template: '<a routerLink="/trade-detail">{{params.value}}</a>'
template: '<a [routerLink]="inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
#Input('inRouterLink') public inRouterLink = "/trade-detail";
params: any;
EDIT
Ok, found the answer on their website itself after a little more looking.
https://www.ag-grid.com/javascript-grid-cell-rendering-components/#complementing-cell-renderer-params
So, in my case, I pass the params like so:
BlotterHomeComponent class
columnDefs = [
{
headerName: 'Status', field: 'status',
cellRendererFramework: RouterLinkRendererComponent,
cellRendererParams: {
inRouterLink: '/trade-detail'
}
},
RouterLinkRenderer Class
#Component({
template: '<a [routerLink]="params.inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params: any): boolean {
return false;
}
}
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I have just recently made a move from Adobe Flex to Sencha ExtJs.
I can't seem to find an equivalent of data binding in ExtJs where a form value depends on another form value.
e.g. I am creating an SMS window where i show the count of characters entered in a message field.
This is how i am doing in ExtJS. Also, the fiddle - http://jsfiddle.net/xxB4J/
Ext.create('Ext.window.Window',{
items: [
{
xtype: 'textarea',
fieldLabel: 'Message',
listeners: {
change: function() {
var countLabel = this.up('window').down('#lbCharacterCount');
countLabel.setText(this.getValue().length + '/160 Characters');
}
}
},
{
xtype: 'label',
itemId: 'lbCharacterCount',
text: '0/160 Characters'
}
]
}).show();
Now, in Flex this was as simple as doing
<mx:Text text="{message.text.length.toString()}/160 Characters}" />
So, just want to know if there is some sort of similar data binding in ExtJS? or the way i am doing is the only way of doing it?
Thank you
Maybe, you could use a textarea configuration:
Sencha:
maxLength and maxLengthText
or is the control field editable ?
I would like to have a DateTime column in my Kendo UI grid. I've searched on forums, but I didn't find a solution for this problem.
My field for the TimeStamp column is defined such as:
TimeStamp: { type: "date" },
The records are showing data according to the format specified in the template. But I would like to be able to filter my data source with greater precision. However, currently my filter is only able to filter by date. Is there a way to filter by DateTime instead of filtering only by date?
I was informed that this is not possible currently with Kendo UI. I know this is bad news, but this is the answer to my question.
you can achieve it to use template on kendo grid column, create one more property and pass that property in template in kendo grid column.
like
timeStamp: { type: "date" },
timeStamp1: { type: "String" },
pass timestamp1 in template like
{
title: "Last Login",
width: 80,
template: '<span>#= timeStamp1#</span>',
field: "timeStamp",
type: "date"
},
its work fine according your requirement and sorting will work fine like database sorting.
Its Posible:
DeliveredDate: {
type: "datetime",
editable: false,
nullable: false
}
And the template is:
{
field: "DeliveredDate",
title: "Delivered Date",
template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
width: 60,
groupable: false,
sortable: true,
filterable: true
}
The easiest Way to us the TimeStamp format data from your Database for KendoGrid.
In your HTML file, use the data from DB as shown.
<kendo-grid [data]="gridData">
<kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
[width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
[style]="{'background-color': '#36455a','color': '#fff'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
</ng-template>
</kendo-grid-column>
</kendo-grid>
PS: gridData is my var that stores Data from DB. and CreatedAt is one of the fields.