there is an option in the grid pageable.previousNext
If set to true the pager will display buttons for going to the first, previous, next and last pages. By default those buttons are displayed.
My question is: Is there a way to display only next and last buttons? If i set it false it hides all the buttons, and true display them.
Reading the source code it doesn't look like there is an option in kendo, don't know if you guy know a work around?
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 2,
previousNext: false
}
});
</script>
Thanks,
Henry
The pager link contains following classes.
k-pager-first - class on first page link
k-pager-last - class on last page link
classes on all other page links
k-pager-numbers
- data-page="2"
- data-page="3"
etc
You can user jQuery, and disable links you don't want user to use.
not very elegant but should work.
Related
I have 5 divs on my page. When my form is loaded, all 5 divs gets populated with some data. However, I have to display only 3 div at a time and when user takes any action or clicks on cross(X) sign on
any div, we have to display next div.
Need to figure out how to display only 3 records i.e. only 3 div ?
At a time max 3 divs can be displayed
//Model
export class Bird{
id: number;
name: string;
}
This is the sample collection that we need to display in DIV on form
arrBirds: Birds [] = [
{ id:1, name: 'Bells Sparrow' },
{ id:2, name: 'Mourning Dove'},
{ id:3, name: 'Bald Eagle' },
{ id:4, name: 'Sparrow' }
{ id:5, name: 'Parrot' }
];
//html
This is how, I am displaying the data in DIV on form.
<div *ngFor='let bird of arrBirds' (click)="onSelection(bird)">
<div>{{ bird.name }}</div>
</div>
// this code is to take any action on what user has selected in div
<div *ngIf="selectedBird">
{{selectedBird.id}} {{selectedBird.name}}
</div>
//
onSelection(userSelectedBird: Bird}{
this.selectedBird = userSelectedBird;
}
You should define array of pages with 'active' state, i.e
const pages = [{
id: 1,
name: 'page1'
active: true
}, {
id: 2,
name: 'page2'
active: true
}, {
id: 3,
name: 'page3'
active: true
}, {
id: 4,
name: 'page4'
active: false
}, {
id: 5,
name: 'page5'
active: false
}]
Based on selection, you can set active flag true/false. You can use active Property with *ngIf in the Template file.
https://stackblitz.com/edit/angular-sxzrlp
I have a Panel where in I wish to add two text fields in 'hbox' layout for every entry in the json data.
For e.g. : Suppose I have a json like this:
{
..
ids : [
{
'name' : 'first name',
'surname' : 'first surname',
},
{
'name' : 'second name',
'surname' : 'second surname'
}
]
}
In this example the panel will consist of two rows of two textfields each with the labels being 'name' and 'surname'
So in the for loop I need to know how to insert the two textfields in 'hbox' layout inside the Panel. Had it been a grid it would be easy to add to the store.
Here's what I have done.
Ext.getCmp('panelid').items.add(Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10',
height: 100
},
items: [
{
fieldLabel: 'Name',
id: 'idFieldName',
name : 'Data',
margin:'0 10 10 0',
width:225,
labelWidth: 40
},
{
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType',
margin: '0 10 10 0',
width:225,
labelWidth:55
}
]
}));
EDIT1: Added my progress.
EDIT2: I have found half the solution to the problem. The problem was that I don't need to add to the items but rather I can just add to the panel itself. So this is working :
Ext.getCmp('panelid').add(....)
But now the issue is that in the second iteration of the loop the next hbox formatted text fields come on TOP of the existing ones, i.e., instead of adding a row below this line is adding on top of the panel. Kindly advise how to get rid of this issue.
EDIT 3:
I have found the solution as to why it was adding elements on top of the existing ones. It's because whenever I was adding elements in the loop the id of the added elements was same. So in effect it was replacing the two textfields I had already put in the previous iteration.
So, I have just altered the id name as follows:
id: 'idFieldName' + i
I think you should use the "form" layout instead (or an Ext.form.Panel), and use a Ext.form.FieldContainer to group your 2 text field.
Example :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'first line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
},
{
xtype: 'fieldcontainer',
fieldLabel: 'second line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
}
]
});
If you want to do it dynamically you can do :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
addRow : function(rowLabel) {
this.add({
xtype: 'fieldcontainer',
fieldLabel: rowLabel,
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
});
}
});
and then in your loop you can use :
myPanel.addRow('test');
You should use different names for each field too, to be able to retrieve the form values later.
name: 'Data' + i
EDIT
Besides, I would use itemId instead of id, as stated here: https://stackoverflow.com/a/18472598/2085604
You can then use Ext.ComponentQuery.query(..) to get components by their itemId:
https://stackoverflow.com/a/24407896/2085604
What version of ExtJS are you using for this example? 3, 4 or 5? I ask this because changes the solution of your problem (more or less) depending on the version.
EDIT
Seems that you found a solution. I don't know if you are doing this in the view, but if that's the case, you should use a controller linked to that particular view. In this way your code will look better, more clear and another important reason, the following versions of ExtJS(5), use this kind of structure.
For Kendo UI Grid, there is the option of setting filterable to row or menu or both. I was wondering if it was possible to set some columns to be row(only as row), while others display as menu(only as menu). Preferably not with css.
Example: I want field name to be a row filter, while age to be a menu filter
<script>
$("#grid").kendoGrid({
dataSource: ...
filterable: {
operators: {
string: {
startswith: "Starts with",
eq: "Exact Client Name",
contains: "contains"
},
number: {
gte: "From",
lte: "Before"
}
},
mode: "row" },
column: [ { field: "ClientName", title: "Client Name", width: 150, type: "string" , attributes: { style: "text-align:left;" }, filterable: { messages: { info: "Show clients that: " }, extra: false} },
{ field: "Month", title: "Month", width: 78, type: "number", attributes: { style: "text-align:center;" }, filterable: { messages: { info: "Show month(s): ", and: "To" }, ui: monthFilter, mode: "menu" } }
]
});
</script>
I figured out a solution. Probably not the best solution, but for anyone that needs it for future reference, I used the follow solution.
set filterable mode to mode: "row, menu"
filterable: {
cell: { enabled: false}
}
to eliminate unwanted rows filters. And using jquery
databinding: function(e){
$("#grid-name .k-grid-filter .k-filter").css('display', 'none');
$("#grid-name ").find("[data-field=Month]>.k-grid-filter .k-filter").css('display', 'block');
}
to eliminate unwanted column menu filters.
I have followed through a tutorial on the CKEditor website but I can't figure out why my custom tool bar is not appearing on the CKEditor. Originally I had all of the default toolbar on, but now it has reverted to just being a text area. Can someone help please? The code is as follows:
$(function () {
CKEDITOR.replace('txtBodyText',
config.toolbar=[
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'list', items: ['NumberedList', 'BulletedList'] },
{ name: 'Indent', items: ['Outdent', 'Indent'] },
{ name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: ['link', 'unlink;'] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
{ name: 'styles', items: [ 'Font', 'FontSize'] },
{ name: 'Clipboard', items: ['Cut', 'Copy', 'PasteText', 'PasteFromWord'},
{ name: 'undo', items: [ 'Undo', 'Redo'] },
{ name: 'tools', items: [ 'Maximise'] },
{ name: 'mode', items: [ 'Source'] }
]);
})
<td class="prompt">Body</td>
<td>
<%: Html.TextArea("txtBodyText", Model.EmailTemplate.BodyText)%>
</td>
That doesn't look like a valid second argument to the replace function. This might be of assistance:
var configObject = {};
configObject.toolbar = [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
'/',
[ 'Bold', 'Italic' ]
];
CKEDITOR.replace('txtBodyText', configObject);
See the difference between the two? The 2nd argument to replace needs to be a valid JavaScript object. There was a typo in your example: see unlink;? That's not really correct :).
I had an extra pair of brackets at the bottom. If there is a problem in the Javascript it will not run the whole segment of code. So it's best to check!
CKEDITOR.replace() accepts the ID of the element to replace with the editor and the config. However, you do not need to write:
CKEDITOR.replace( 'txtBodyText',
config.toolbar=...
it's enough to just use toolbar, without the preceding config. And also, as pointed above, your JavaScript code is incorrect (notice your = instead of :):
CKEDITOR.replace( 'txtBodyText', {
toolbar: ...
} );
See how it is done in the samples from the CKEditor SDK, e.g. the Custom Toolbar sample. Scroll down to get the complete source code of the sample.
Don't forget to clear your browser cache after any editor configuration change!
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}