I want to set the text size for a programmatically generated combo box using dojo codes below. The width and height work but not the font-size.
var cboState = new ComboBox({
id: "usastate",
name: "usastate",
style:{width: "100%", height: "40px", fontsize: "20px"},
placeholder: "Select a State",
store: stateStore,
searchAttr: "name",
autocomplete: true
});
Change fontsize to fontSize and it will work.
var cboState = new ComboBox({
id: "usastate",
name: "usastate",
style:{width: "100%", height: "40px", fontSize: "20px"},
placeholder: "Select a State",
store: stateStore,
searchAttr: "name",
autocomplete: true
});
Or, you can also pass the style as a string:
var cboState = new ComboBox({
id: "usastate",
name: "usastate",
style:"width: '100%'; height: '40px'; font-size: '20px'",
placeholder: "Select a State",
store: stateStore,
searchAttr: "name",
autocomplete: true
});
Well, I have added running sample. along with added custom styles.
require([
"dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
], function(Memory, ComboBox){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var comboBox = new ComboBox({
id: "usastate",
name: "usastate",
style:{width: "200px", height: "28px", fontSize: "20px"},
placeholder: "Select a State",
store: stateStore,
searchAttr: "name",
autocomplete: true
}, "stateSelect").startup();
});
<script data-dojo-config="async: 1"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<body class="claro">
<input id="stateSelect">
</body>
Hoping this will help you :)
Related
Sorry for my bad english this isn't my main language, also sorry for the markup!!
Hi im trying to send data from my parent component to the child components. The idea behind this, is so that i can use a specifik color for every component. This color is declared in the parent component in the routers array. But the data sended to the component was from the previous one, so it sends to color which was previously stored in routerColor.
<template>
<div class="flex" id="app">
<quick-acces>
</quick-acces>
<nav>
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
</nav>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
routers: [
{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color){
this.routerColor = color
console.log(this.routerColor)
this.currentBorder = "3px solid" + color
},
I modified your code so I could make a snippet that runs.
I found that clicking the "orange" strip would update the color, but the border color did not show up until you clicked another color. I saw that you build the border color string without a space after "color", so when it built the string with "orange", it would be 3px solidorange, which does not work. Other colors were ok, because 3px solid#F9BE02 parses.
So I think your problem is just putting in a space after "color".
new Vue({
el: '#app',
data() {
return {
routers: [{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color) {
this.routerColor = color
// I added a space after "solid"
this.currentBorder = "3px solid " + color
}
},
components: {
routerLink: {
props: {
to: Object
},
template: '<div>X{{to.params.routerColor}}</div>'
},
routerView: {
template: '<div>V</div>'
}
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div class="flex" id="app">
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
am having an issue with displaying my Echarts on the second tab. The chart is only displayed on the first tab but on navigation to the second tab it doesn't display
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">
Campaigns
</li>
<li>
Subscribers
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="campaign">
<div id="pieChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</div>
<div class="tab-pane fade" id="subscribers">
<div id="barChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</div>
</div>
then hereis the js that displays the chart
var myChart = echarts.init(document.getElementById('pieChart'));
myChart.setTheme({color:['#6CC66C','#418BCA','#ff6600']});
pieChartOption = option = {
title : {
text: 'Campaign Analysis',
subtext: 'Jackpot',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Sent','Pending','Not Delivered']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Access Source',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:{{ $no}}, name:'Sent'},
{value:135, name:'Pending'},
{value:155, name:'Not Delivered'}
]
}
]
};
myChart.setOption(pieChartOption);
/*######################### BARCHART ##################################*/
var myBarChart = echarts.init(document.getElementById('barChart'));
var barChartOption = {
title: {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['2014', '2015']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '2014',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
}, {
name: '2015',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
}]
};
myBarChart.setOption(barChartOption);
/*######################### BARCHART ##################################*/
$(function() {
$( "#tabs" ).tabs({
select: function(event, ui) {
console.log('Calling chart.invalidateSize()');
chart.invalidateSize();
}
});
What cud be the solution to this?
});
ECharts documentation has mentioned
Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So resize should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in opts explicitly.
So every time you switch to a new tab, just call the resize function on the chart instance:
chartInstance.resize()
The answer is a little late and I am not sure if you found a solution, but the resolution to this would be a combination of echarts setOption and Bootstrap's Tab event.
Like-
$('#myTabItem').on('shown.bs.tab', function (e) {
myChart.setOption(options);
})
The above code will reload the chart mychart using echarts setOption callback as soon as the Bootstrap Tab is shown. More info on Bootstrap Tab events can be found here.
I am a newbie to Dojo. Here is the issue i had. Pleas help.
When select State radio button, State combo box should appear. When select Region radio button, Region combo box should appear. But my codes seem not working.
Fiddle project is here
require([
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/query',
'dojo/on',
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function (dom, domConstruct,domStyle,query,on, Memory, ComboBox) {
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"}
]
});
var regionStore = new Memory({
data: [
{name:"North Central", id:"NC"},
{name:"South West", id:"SW"}
]
});
var comboState = new ComboBox({
id: "stateSelect",
name: "state",
store: stateStore,
searchAttr: "name"
}, "state").startup();
var comboRegion = new ComboBox({
id: "regionSelect",
name: "region",
store: regionStore,
searchAttr: "name"
}, "region").startup();
domStyle.set(dom.byId('state'), "display", "block");
domStyle.set(dom.byId('region'), "display", "none");
on(query('.radio'),'change',function(){
query('.query').forEach(function(divElement){
domStyle.set(divElement, "display", "none");
});
domStyle.set(dom.byId(this.dataset.target), "display", "block");
});
});
.hidden {
display: none;
}
<input class="radio" data-target="state" type="radio" name="selection" value="state">State
<input class="radio" data-target="region" type="radio" name="selection" value="region">Region
<div id="state" class="query hidden"></div>
<div id="region" class="query hidden"></div>
It is more straightforward to query and then connect lke:
query('.radio').on('change', function(){
alert("bing")
})
Just started with DOJO and Dgrid.
I've got this simple dgrid using a Memory store.
However the grid in the web page stay empty. Only the header is displayed.
....
#import "./dgrid/css/dgrid.css";
<script src="./dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, isDebug: true">
</script>
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/List",
"dgrid/Grid",
"dgrid/Keyboard",
"dgrid/Editor",
"dgrid/extensions/ColumnResizer",
"dijit/form/NumberTextBox",
"dstore/Memory",
"dojo/parser",
"dojo/domReady!",
"dijit/TooltipDialog",
"dijit/form/DropDownButton",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
],
function(
declare, arrayUtil, List, Grid, Keyboard, Editor, ColumnResizer, NumberTextBox, Memory
){
var prevpds =[
{itemnu: "TEST", itemna: "", batchn: "", cqty: 5, sqty: 5, sz: 5},
{itemnu: "TEST 44", itemna: "", batchn: "", cqty: 1, sqty: 2, sz: 3}
];
var pdsstore = new Memory({data: prevpds});
var getColumns = [
{ label: "Item Number", id: "itemnu", field: "text", editor: "text" },
{ label: "Item name", id: "itemna", field: "text", editor: "text" },
{ label: "Batch number", id: "batchn", field: "text", editor: "text" },
{ label: "Concerned Qty", id: "cqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Sold Qty", id: "sqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Size/ Diameter", id: "sz", field: "floatnumber", editor: "NumberTextBox" }
];
var PdsGrid=declare([Grid, Keyboard, Editor, ColumnResizer]);
window.grid = new PdsGrid(
{
store: pdsstore,
columns: getColumns
}, "pdstable2"
);
}
);
</script>
You have at least two problems.
Firstly, assuming you're using dgrid 0.4 (which I assume since you're also using dstore), you should be setting collection instead of store.
Secondly, the base List and Grid modules do not read from stores; you will want to use either OnDemandGrid or the Pagination extension.
OnDemandList and OnDemandGrid docs
Pagination docs
This is my Main view page on which i am displaying kendo grid to show list of category:
<script>
$(document).ready(function () {
$("#categories-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("categoriesList", "Admin"))",
type: "POST",
dataType: "json",
data: '',
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: 9,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10, 20, 30]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
columns: [
{
field: "CategoryId",
title: "Action",
width: 10,
template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
},
{
field: "CategoryName",
title: "CategoryName",
width: 10
},
{
field: "CategoryId",
title: "Action",
width: 10,
//template: '<a class="delete" href="#"><span class="k-icon k-delete"></span></a>'
template: '<span class="k-icon k-delete"></span>'
}]
});
});
</script>
#Html.Partial("DeleteParentCategory")
this script display list of all categories in kendo grid.in kendo grid i am having one edit button and delete button.
on delete button i want to ask for confirmation to user to delete categories.
below is my delete link :
template: '<span class="k-icon k-delete"></span>'
now i want to call these partial view on above delete action link:
this is my Admin controller action:
[HttpGet]
public PartialViewResult DeleteParentCategory()
{
return PartialView("DeleteParentCategory");
}
in this partial view i am just having my modal pop up html code css and js references.
now what is happening is when my main view is displayed then this modal pop up message is also displayed and when i click on delete action link then that pop up opens but my main view doesnt display.my main view that is grid is lost on delete action link.
can anybody tell me how to display only partial view on click of delete action link with my grid display???
i am very much new in mvc.so guys can u please help me???????????
this is my Delete partial view(Modal Pop up Box Design):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href=" http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src=" http://code.jquery.com/jquery-1.10.2.js"></script>
<script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
#*<link rel="stylesheet" href="/resources/demos/style.css">*#
<script>
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>
your main view goes like this
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#categories-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("categoriesList", "Admin"))",
type: "POST",
dataType: "json",
data: '',
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: 9,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10, 20, 30]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
columns: [
{
field: "CategoryId",
title: "Action",
width: 10,
template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
},
{
field: "CategoryName",
title: "CategoryName",
width: 10
},
{
field: "CategoryId",
title: "Action",
width: 10,
template: '<a class="delete" onClick="myFunction(); return false;" href=""><span class="k-icon k-delete"></span></a>'
}]
});
});
function myFunction() {
$("#dialog-confirm").dialog({
resizable: false,
height: 190,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
</script>
#Html.Partial("DeleteParentCategory")
and DeleteParentCategory partial view goes like this
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>