On my kendo grid there is a button, by default it's add new record. I want to change it. I used the following tag but does not work :
#turbinegrid .k-icon.k-add::after {
content: "ADD";
}
You can set template for the button like below,
$("#myGrid").kendoGrid({
toolbar: [{
template: '<div><div style="float:left;"><h2>Tech Documents</h2></div><div style="float:right;margin: 2% 1% 1% 1%;"><a title="add new" class="k-button k-button-icontext k-grid-add" href="\\#"><span class="k-icon k-i-plus-outline"></span>**Create One**</a></div></div>'
}]
});
Use Your Text for the button in place of Create One.
When using MVC you can set the text like this:
#(Html.Kendo().Grid<GridViewModel>()
.ToolBar(tools =>
{
tools.Create().Text("ADD");
})
)
When using jQuery use this:
$("#grid").kendoGrid({
toolbar: [{ name: "create", text: "ADD" }]
});
#turbinegrid .k-icon.k-add {
font-size: 0px !important;
}
#turbinegrid .k-icon.k-add::after {
content: "New Text" !important;
font-size: 18px !important;
}
Related
I have a couple different types of UI widgets on my page. There is a class that is common between all of them .ui-widget-content. I need to style this class differently for each one, so I have assigned unique ids or classes to the HTML elements. This worked ok for one type of widget (dialog where I can use the dialogClass option in the JS to assign classes), but the other type of widget (slider) will still only inherit styles from .ui-widget-content even when I specify a style for #id .ui-widget-content to get at the specific element of interest. I'm kind of at a loss on how to override the original style at this point.
HTML:
<div id="opacitySlide" class="slider">
<div id="opacityVal" class="ui-slider-handle"></div>
</div>
<div id="habClassify-dialog" title="Habitat Classification">
<div id="HabClassifyGPService">
//whole bunch of stuff
</div>
</div>
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
CSS:
//This one doesn't work and get overridden by the default style .ui-widget-content
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
//This one does work, these classes are assigned in the JS, NOT the HTML
.habClassify-dialog .ui-widget-content,
.error-dialog .ui-widget-content,
.success-dialog .ui-widget-content {
border: none;
}
I've also attempted to use the custom class I assigned in the HTML instead of the id for the non-working CSS as well, but no luck.
.slider .ui-widget-content {
border: 1px solid black;
}
Here's the JS code:
//Creates the popup dialog for the habitat classification button
var habClassifyDialog = $("#habClassify-dialog").dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'habClassify-dialog',
buttons: [{
id: "classify",
text: "Classify habitat",
click: upload
}],
close: function () {
$('#uploadForm')[0].reset();
$('#validation-text').empty();
}
});
$('#classifyHab').click(function() {
habClassifyDialog.dialog("open");
});
//Creates the popup dialog that contains error messages
var errorDialog = $("#error-dialog").dialog({
autoOpen: false,
height: "auto",
width: 1000,
modal: true,
dialogClass: 'error-dialog',
buttons: [{
id: "error-ok",
text: "Ok",
click: function () {
errorDialog.dialog("close");
}
}]
});
//Creates the popup dialog that shows the success message
var successDialog = $('#success-dialog').dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'success-dialog',
buttons: [{
id: "success-ok",
text: "Ok",
click: function () {
successDialog.dialog("close");
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
}],
close: function () {
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
});
//Create the opacity slider
var handle = $("#opacityVal");
$("#opacitySlide").slider({
range: "min",
value: 100,
min: 0,
max: 100,
create: function () {
handle.text($(this).slider("value") + "%");
},
slide: changeOpacity,
change: changeOpacity
});
If you haven't used jQuery UI before, it automatically adds a whole bunch of default styles to the widgets upon load, that's why you don't see class="ui-widget-content" in my HTML anywhere, it's not necessary to declare it.
Alright, I have officially made the stupidest mistake ever. Considering the HTML was generating with the correct custom ID I assigned, I figured there had to be a way to access the ui-widget-content class using that ID. It was as simple as chaining them together, before when I was testing this I had left a space in between.
Problem CSS (won't work):
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
Simple fix (remove space between id and class):
#opacitySlide.ui-widget-content{
border: 1px solid black;
}
For the sake of completeness, the explanation is that if you leave a space between these items, it thinks the HTML is structured like this:
<div id="opacitySlide">
<div class="ui-widget-content"></div>
</div>
when really my HTML was structured like this:
<div id="opacitySlide" class="ui-widget-content"></div>
I am trying to use the Ext.ux.form.ItemSelector,but no icons are on the add/remove/top/down buttons!
Code below:
Ext.create('Ext.ux.form.ItemSelector', {
renderTo: Ext.getBody(),
name: 'channelRange',
store: Ext.create('Ext.data.Store', {
fields: ['display', 'value'],
data: [{
display: '22',
value: 2
}, {
display: '33',
value: 3
}]
}),
buttons: ['add', 'remove'],//No icons on the buttons! Why?
//imagePath: '../ux/images/',
displayField: 'display',
valueField: 'value',
value : [ 3 ],
allowBlank: false
});
See the result here, the buttons between the 2 multiselect have no icon!
Yes it is an issue with ItemSelector. You will not see any icon on buttons after any kind of BUILD.
I was able to resolve this issue permanently via overriding below CSS. Actually if you debug the code you will see that it is trying to location these button icons on different location.
// Do these overrides in any of your CSS file.
.x-form-itemselector-top {
background-image: url(images/itemselector/top.gif) !important;
}
.x-form-itemselector-up {
background-image: url(images/itemselector/up.gif) !important;
}
.x-form-itemselector-add {
background-image: url(images/itemselector/right.gif) !important;
}
.x-form-itemselector-remove {
background-image: url(images/itemselector/left.gif) !important;
}
.x-form-itemselector-down {
background-image: url(images/itemselector/down.gif) !important;
}
.x-form-itemselector-bottom {
background-image: url(images/itemselector/bottom.gif) !important;
}
NOTE: Also make a sure you have these icons on given path (images/itemselector/). In my case I copied these icons from "ui-client\ext\packages\ux\classic\resources\images\itemselector" to "ui-client\resources\images\itemselector". Here "ui-client" is my application root folder.
Hope above provided information will help.
Solution from my project:
grid.tbar.push({
itemId : 'create',
iconCls : 'iconAdd',
text : 'Add'
}
and config in some .css file:
.iconAdd {background: url(/resources/img/action-add.png) no-repeat !important;}
I am using Sencha Touch 2.2.1 . I want to display list items with icons, for that I am using itemTpl config property of the list. The image is rendered as icon but the list item is not getting aligned properly- it appears starting from much below. I want the text to get started from the top- it must be aligned horizontally with the image. I also tried changing 'margin' property but it didn't seem to work.
Please find my code below:
Ext.define('BBraunSencha.view.ListPanel',{
extend: 'Ext.Panel',
xtype: 'listpanel',
config:{
layout:{
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'label',
html: '<div style="margin-left: 20px;">List one</div>'
},{
xtype: 'list',
flex: 1,
ui:'round',
scrollable: true,
data:[
{ name: 'item1', price:'2000',in_stock : 'no'},
{ name: 'item2', price: '3000',in_stock :'yes'}
],
itemTpl: '<img src="images/Tulips.jpg" style="height: 50px;width: 50px;display:inline-block;margin-right:50px;"/>{name}'
}
]
} });
What can be the other way to achieve it?
Add a class to your css, then use that class for your itemTpl:
CSS file:
.tulip-icon {
background-image: url(images/Tulips.jpg);
background-size: 50px 50px;
background-repeat: no-repeat;
padding-left: 50px;
}
JS Code:
itemTpl: '<div class="tulip-icon">{name}</div>'
Add css:
.list-image{
height:20px;
width:20px;
float: left;
}
in js file:
itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'
I'm using Exjts 4 and i want to change the button text color. Here is my code:
{
xtype: 'button',
text: 'My Button',
style:{
color: 'red'
}
}
In case someone needs it. I do not know if it's a dirty solution but it works
{
xtype: 'button',
text: '<div style="color: red">My Button</div>',
}
Davor Zubak shed light on a solution although it failed in my complex application. I achieved what I want by this:
Button's cls: 'myButton'
In my css file, define:
.myButton .x-btn-inner {
color: red;
font-family: Georgia;
font-size: large;
font-weight: bold;
}
This way it only overrides the ExtJS theme for the particular buttons who have 'myButton' cls.
There is some strange behavior in Extjs 4.2.0, but there is an override possible. Give your button a class using cls:'yourClassName' property and then in CSS make a full path to span holding the text, like so: .yourClassName div a span. Also give your css property a !important value to successfuly override base class.
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
},
cls: 'foo'
});
and in css simply:
.foo div a span
{
color:#ff0000 !important;
}
Here is a example.
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}