I have text field with button in my CKEditor dialog:
{
type: 'hbox',
id: 'search',
children: [
{
type: 'text',
id: 'searchText',
label: 'Search something'
},
{
id: 'searchButton',
type: 'button',
label: 'Search',
onClick: function() {
alert("o.O");
}
}
]
}
Problem is, that searchButton is aligned with text field's label instead of text field itself. I tried to add align property to hbox and to the button too (with values bottom and center), but nothing happend.
How can I have that button aligned in the same line as text field?
I faced same problem too.I have got ride of this problem by applying style property.
{
type : 'button',
id : 'searchButton',
label : 'Search',
style : 'margin-top:15px;',
}
Related
As you can see in this codepen link, I have replaced the header text with v-text-field but the problem is the v-text-field is attached with filterBy icon (the up-down arrow icon) as well. When i click on the text-field the filterBy function is working that i dont want. So far I think the #click event is covering whole area. I wish to separate the text-field and filterBy behavior. Any help will be greatly appreciated.
https://codepen.io/MicroDreamIT/pen/vYRvMza
You can disable the filter option on v-table columns by using the property 'sortable'.
Your headers data should look like that :
headers: [
{
text: "Dessert (100g serving)",
align: "left",
value: "name",
sortable: false // this will disable filter property and hide the icon
},
{ text: "Calories", value: "calories", sortBy: true },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I have this grid
$("#LocationGrid").kendoGrid({
dataSource: locationDataSource,
editable: "inline",
columns: [ { field: "LocationID", hidden: "hidden" },
{ field: "LocationName", title: "Location Name" },
{ command: [{ name: "edit" }] }]
});
i want to add toolbar with create button to this grid if the user has permission
if(condition) //user has permission
{
//add toolbar to grid
toolbar: [{ name: "create", text: "Add New Location}],
}
and also add "Delete" button to command column if the user has permission
if(condition) //user has permission
{
//add delete button to grid
command: [{ name: "delete"}]
}
how i can perform this, please?
We can use the setOptions() method of grid like below,
if(condition)
{
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
toolbar: [{name: "create", text: "Add New Location"}]
});
}
Refer http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
First, I know how to exclude a field by marking it 'editable: false' in the kendo data source.
I added a column with a button to the Kendo UI grid to open a window for a file upload. This column is not in the datasource! However, the column is now also displayed in the popup editor as a tetxtbox with 'File Upload' as a label (that is the column header name also as you can see in the screenshot).
How can I exclude/hide this column in the popup editor?
I am using Kendo UI version: "2014.2.716"
Thanks for your help!
Here is how I added the column to the grid, see the last line:
columns: [
{ field: "Id", hidden: true },
{ field: "Name", title: ........ },
{ field: "EnteredBy", title: "Entered by", hidden: true },
{ field: "UpdatedOn", type: "date",.....},
{ field: "UpdatedBy", title: "......},
{ command: ["edit", "destroy"], title: "Action", width: "80px" },
{ field: "Upload", title: "File Upload", width: "80px", template: '<button class="k-button" onClick="uploadFiles(#=Id#)">Upload<br/>Files</button>' }
],
and here is a screenshot that shows the column 'File Upload' with the button 'Upload File' in each cell in the grid-column.
This is the screenshot from the popup editor with the field that I would like to hide.
I think you should make that extra column a custom command instead of specifying a "field" for it.
Something like:
columns: [
...
{
command: { text: "Upload", click: uploadFiles},
title: "File Upload",
width: "80px"
}
]
The uploadFiles function would then get passed a click event, from which it can get to the element that was clicked. You can add a data-id attribute to the row to get its Id from in the uploadFiles function, as they do in the demo linked above.
I am using the Sencha Touch TapPanel and want to navigate down on a view from a view.
Ext.create('Ext.TabPanel', {
itemId: 'panel',
fullscreen: true,
defaults: {
styleHtmlContent: true
},
tabBarPosition: 'bottom',
layout: {
type: 'card',
animation: {
type: 'fade'
}
},
items: [{
title: 'Home',
html: 'Home Screen'
}, {
title: 'Contact',
xtype: 'OfferDetailView'
}]
});
If the user is on the OfferDetailView, I want to have a button and if the user clicks on the button, it should navigate to a view foo and display it with an back button to get back to the tabpanel. Is there any Sencha Touch functionality or frameworks, which is supporting this issue?
I can set the activeItem to a view with
Ext.Viewport.animateActiveItem(foo, {type: 'slide', direction: 'left'});
but there is no back button. So I have to add it manually and manage all the views on a stack.
You should create an Ext.navigation.View that contains the Ext.tab.Panel as the only object. Then you can push() your new view onto that view and it will work as you're hoping.
Ext.create('Ext.navigation.View', {
itemId: 'navView',
layout: 'fit',
items: [
{
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [{
title: 'Home',
html: 'Home Screen'
}, {
title: 'Contact',
xtype: 'OfferDetailView',
items: [
{
xtype: 'button',
text: 'Go to Foo',
handler: function(btn) {
btn.up('navigationview').push({ xtype: 'foo' });
}
}
]
}]
}
]
});