Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?
I did not see difference between MVC2 and other types of applications...
You should read about dojo grid
First of all you need to load dojo script (it would be better if you do it on master page).
Also you can add some css styles that dojo grid using:
Site.Master:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table
{
margin: 0;
}
</style>
...
</head>
....
</html>
After that you should add some code in view for initialize dojo grid, E.g.:
Index.aspx:
...
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var layoutCountries = [
[{
field: "abbr",
name: "Abbeviation",
width: 10
},
{
field: "name",
name: "Name",
width: 10
},
{
field: "capital",
name: "Capital",
width: 'auto'
}]];
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito'
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo'
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador'
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo'
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara'
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn'
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa'
}]
}
</script>
<div style="width: 400px; height: 300px;">
<div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
</div>
<div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
queryoptions="{deep:true}" query="{}" rowsperpage="40">
</div>
</div>
...
And the result of this code is:
Related
I have dynamically changing data for Vuetify's v-data-table:
<v-data-table
:headers="table_headers"
:items="table_content"
>
</v-data-table>
In the table_headers I can add "class" so that it can be used to apply custom css formatting on the headers:
table_headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
class: 'section-dessert'
},
{ text: 'Calories', value: 'calories', class: 'section-calories' },
],
However this only affect headers. So my question is, would it be possible, or what is the best way to apply this class that I keep in table_headers also to all rows (per respective column).
So that when I write css for given class it will affect both header and all the rows for the given column.
EDIT:
So essentially I want to style whole column (on column basis), something like this:
Can I color table columns using CSS without coloring individual cells?
However with dynamic data for headers and table items (and since vuetify does not have working colgroup then Im not sure how to do something like this here)
You have to use the body slot to achieve that kind of customization, see below:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
table_headers: [{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
class: 'section-dessert'
},
{
text: 'Calories',
value: 'calories',
class: 'section-calories'
},
],
table_content: [{
name: "Some dessert",
calories: 100
},
{
name: "Some dessert2",
calories: 200
},
{
name: "Some dessert3",
calories: 300
},
{
name: "Some dessert4",
calories: 400
}
]
}),
})
.section-dessert {
color: red !important;
}
.section-calories {
color: green !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<body>
<div id="app">
<v-app>
<v-data-table :headers="table_headers" :items="table_content" hide-action hide-default-footer>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item in items" >
<td :class="table_headers[0].class">{{item.name}}</td>
<td :class="table_headers[1].class">{{item.calories}}</td>
</tr>
</tbody>
</template>
</v-data-table>
</v-app>
</div>
</body>
i created a new MVC asp.Net webpage and for testing i added Fullcalendar 5.1.
For testing i put all the stuff in index.html:
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="~/lib/fullcalendar/main.css" />
<script src="~/lib/fullcalendar/main.js"></script>
<meta charset='utf-8' />
<style>
.fc-sun {
background-color: blue;
}
.fc-sat {
background-color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2020-07-01'
},
{
title: 'Long Event',
start: '2020-07-07',
end: '2020-07-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-16T16:00:00'
},
{
title: 'Conference',
start: '2020-07-11',
end: '2020-07-13'
},
{
title: 'Meeting',
start: '2020-07-12T10:30:00',
end: '2020-07-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-07-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-07-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-07-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-07-28'
}
]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
But the backcolor wont change :-(
if i put some other variables in like this:
.fc .fc-col-header-cell-cushion { /* needs to be same precedence */
padding-top: 10px; /* an override! */
padding-bottom: 21px; /* an override! */
}
the header padding changes.
What iam doing wrong?
the fiddle is the example: http://jsfiddle.net/rajesh13yadav/nf9whojL/1/
Can you please help me?
EDIT:
As a workaround i use this:
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '00:00', // a start time (09am in this example)
end: '00:00', // an end time (6pm in this example)
},
and the style is:
<style>
.fc .fc-non-business {
color: red;
background: green;
opacity: 0.1;
}
</style>
But why i cant set the other properties?
In version 5.1 the classes are .fc-day-sat and fc-day-sun
Setting the background-color for those classes works fine.
I am using cytoscape.js to display a directed graph and I display 2 properties in a label.
I want to wrap the text and this is said to be possbile in the documentation but I cant get it to work. Can anyone help with the syntax?
'label': 'data(name)',
'font-size' : 14
'text-wrap': 'wrap/n'
text-wrap does not seem to work, it hangs up the graph display.
Do I need to set 'text-max-width'?
thanks in advance
You can't add the \n in the text-wrap css property, you are looking for the label property:
{
"selector": ".multiline-manual",
"style": {
"text-wrap": "wrap"
}
},
{
"selector": ".multiline-auto",
"style": {
"text-wrap": "wrap",
"text-max-width": 80
}
},
One of these classes should be added to the node you want your label to be wrapped. You can do it like this:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(name)",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ".multiline-manual",
style: {
"text-wrap": "wrap"
}
},
{
selector: ".multiline-auto",
style: {
"text-wrap": "wrap",
"text-max-width": 80
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
name: "This is a very long name and all I have to do is to add a class!"
},
classes: "multiline-auto"
},
{
data: {
id: "n1",
name: "Shorter"
},
classes: "multiline-auto"
},
{
data: {
id: "n2",
name: "This shouldn't wrap"
},
classes: "multiline-manual"
},
{
data: {
id: "n3",
name: "This should\nwrap"
},
classes: "multiline-manual"
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
In my extjs6 grid I have column headers that don't fit in the space. How do I do a word wrap in the column header only? This is what I have tried and is not working.
xtype: 'grid',
title: 'Daily Performance',
itemId: 'performanceAccountDailyGridID',
bind: {
store: '{myDailyPerformanceAccountStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
height: 400,
width: 800,
columns: [
{
header: 'Filedate',
dataIndex: 'filedate',
flex: 1
},
css
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
You CSS selector should be nested till .x-column-header-text which contains the column header text.Just giving white-space: normal is sufficient.
So your CSS should be:
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
Working Example:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'region'],
data: [{
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Arizona'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alabama'
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
width: 400,
cls: 'custom-gridPerformance',
renderTo: Ext.getBody(),
columns: [{
text: 'Name of zoro of life style',
dataIndex: 'name',
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
}, {
text: 'State',
dataIndex: 'region',
}],
});
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
I have a Kendo UI scheduler widget with a custom event template. In the template I add a css class to the event template if a certain condition is met. What I want to do is to change the border of the event. I have already tried by using the css selector .k-event:has(div.custom-event.high) but with no success. In the below fiddle there is an example of what I'm trying to achieve. The task are colored using the lightgray color, the tasks on which I need to change the border color are highlighted in yellow. As you can see I can correctly select div.k-event and div.custom-event.high but not .k-event:has(div.custom-event.high). Can someone help me?
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
eventTemplate: $('#template').html(),
height: 600,
views: [{
type: "week",
selected: true
}],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: {
from: "MeetingID",
type: "number"
},
title: {
from: "Title",
defaultValue: "No title",
validation: {
required: true
}
},
start: {
type: "date",
from: "Start"
},
end: {
type: "date",
from: "End"
},
startTimezone: {
from: "StartTimezone"
},
endTimezone: {
from: "EndTimezone"
},
description: {
from: "Description"
},
recurrenceId: {
from: "RecurrenceID"
},
recurrenceRule: {
from: "RecurrenceRule"
},
recurrenceException: {
from: "RecurrenceException"
},
roomId: {
from: "RoomID",
nullable: true
},
attendees: {
from: "Attendees",
nullable: true
},
isAllDay: {
type: "boolean",
from: "IsAllDay"
}
}
}
}
},
group: {
resources: ["Attendees"],
orientation: "horizontal"
},
resources: [{
field: "attendees",
name: "Attendees",
dataSource: [{
text: "Alex",
value: 1,
color: "#f8a398"
}, {
text: "Bob",
value: 2,
color: "#51a0ed"
}, {
text: "Charlie",
value: 3,
color: "#56ca85"
}],
multiple: true,
title: "Attendees"
}]
});
});
div.k-event {
background-color: lightgray !important;
}
.k-event:has(div.custom-event.high) {
background-color: red !important;
}
div.custom-event.high {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="template" type="text/x-kendo-template">
<div class="custom-event #if(title.indexOf('Eval') > -1) {# high #}#">
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<h3>#: title #</h3>
</div>
</script>
</body>
</html>
In general, the eventTemplate controls only the content of the event element. If you would like to change the background of the whole event, then you will need to:
expand the width and height of the inner element custom-event
set the custom class directly to the .k-event element in the dataBound event of the widget
For the former approach check the following how-to demo:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/event-custom-background-color
For the latter implementation check this one:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/modify-event-styling-on-databound