Kendo-UI Chart error - kendo-ui

I am trying to show a KendoUI Chart inside a DIV and looks what the LOG says:
Invalid negative value for attribute width="-10px"
This is the code:
<div id="chart"></div>
This is the javascript:
$("#chart").kendoChart({
theme: "Metro",
legend: {
position: "right",
labels: {
font: "12px arial",
color: "white"
},
},
chartArea: {
background: "",
},
dataSource: data,
series: [
{
type: "pie",
field: "itemTotal",
categoryField: "itemNameAndTotal",
explodeField: "exploded"
}
],
tooltip: {
visible: true,
template: "${ category }"
}
});
This is the css:
#chart {
background: #f9a600;
border-radius: 5px;
margin: 10px 5px 5px 5px;
padding: 5px;
}
Thanks for the help!

Related

SweetAlert2: change font size

I'm trying to replace the sweetalert control with the new sweetalert2 but I've run into some doubts. Among them, I was able to change the width of the popup but not the height. It seems that the "height" property does not take effect.
const { value: causas } = Swal.fire({
title: "Titulo",
text: "Este es el mensaje!",
input: 'select',
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmar!",
confirmButtonColor: "#DD6B55",
icon: 'warning',
cancelButtonText: "Cancelar!",
closeOnConfirm: true,
closeOnCancel: true,
width: 800,
height: 800,
inputOptions: {
'Causas': {
cause1: 'c1',
cause2: 'c2',
cause3: 'c3',
cause4: 'c4'
}
},
inputPlaceholder: 'Seleccione el item',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
//if (value === 'oranges') {
// resolve()
//} else {
// resolve('You need to select oranges :)')
//}
})
}
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
I also want to change the font size but I haven't found how to do it. Maybe I should generate/create a css file? Can you help me? Thank you!!
I just fixed it! I added the properties in the css file.
.swal2-popup {
font-size: 14px !important;
}
.swal2-styled {
padding: 10px 32px 10px 32px !important;
margin: 20px 10px 0px 10px !important;
width: 170px;
height: 45px;
}

Toggle Button doesn't work inside datatable in laravel

The InActive button in the top of the picture, gets displayed properly when it is outside the datatable but doesn't work inside the datatable.
I have added the same code for status column inside the datatable but it displays only a checkbox. How do I get the InActive button inside datatable?
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
fill_datatable();
function fill_datatable(collegeID = '') {
var table = $('.user_datatable1').DataTable({
order: [
[0, 'desc']
],
processing: true,
serverSide: true,
ajax: {
url: "{{ route('alumni.datatable1') }}",
data: {
collegeID: collegeID
}
},
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'status',
name: 'status',
mRender: function(data) {
return ' <input data-id="{{$colleges->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $colleges->status ? "checked" : "" }}>'
}
}
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
}
});
$(function() {
$('.toggle-class').change(function() {
var status = $(this).prop('checked') == true ? 1 : 0;
var user_id = $(this).data('id');
$.ajax({
type: "GET",
dataType: "json",
url: '/changeStatus',
data: {'status': status, 'id': id},
success: function(data){
console.log(data.success)
}
});
})
})
</script>
Please Add css.....
CSS
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
You can simple put after status....
Toggle switch
{
"data": "id",
render: function(data, type, row, meta) {
$html = '<label class="switch"> <input type="checkbox">
<span class="slider round"></span></label>';
return $html;
}
},

Autosave Status in CKEditor 5

I have gotten stuck on a rather simple aspect of the autosave feature and that is the current status of the action like found on the overview page: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#demo. But it doesn't look like they actually reference it anywhere (example below).
My html is just:
<textarea class="form-control" name="notes" id="notes">{!! $shipmentShortage->notes !!}</textarea>
My create script is below, the autosave feature works just fine, but the status just isn't there:
<script>
ClassicEditor
.create( document.querySelector( '#notes' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
},
autosave: {
save( editor ) {
console.log(editor.getData());
// The saveData() function must return a promise
// which should be resolved when the data is successfully saved.
return saveData( editor.getData() );
}
}
} );
// Save the data to a fake HTTP server (emulated here with a setTimeout()).
function saveData( data ) {
return new Promise( resolve => {
setTimeout( () => {
console.log( 'Saved', data );
$.ajax({
url: '/osd/shortages/update',
type: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
'shortage_id':'{{$shipmentShortage->id}}',
'notes': data,
},
dataType: 'json',
success: function (response) {
console.log('saved');
}
});
resolve();
}, 5000 );
} );
}
// Update the "Status: Saving..." info.
function displayStatus( editor ) {
const pendingActions = editor.plugins.get( 'PendingActions' );
const statusIndicator = document.querySelector( '#editor-status' );
pendingActions.on( 'change:hasAny', ( evt, propertyName, newValue ) => {
if ( newValue ) {
statusIndicator.classList.add( 'busy' );
} else {
statusIndicator.classList.remove( 'busy' );
}
} );
}
</script>
You are absolutely correct. They show us a sexy status updater but don't give us the code for it. Here is what I extracted from the demo page by looking at the page source. This should give you the Status updates as you asked. Let me know if you have any questions.
HTML:
<div id="snippet-autosave">
<textarea name="content" id="CKeditor_Notes">
Sample text
</textarea>
</div>
<!-- This will show the save status -->
<div id="snippet-autosave-header">
<div id="snippet-autosave-status" class="">
<div id="snippet-autosave-status_label">Status:</div>
<div id="snippet-autosave-status_spinner">
<span id="snippet-autosave-status_spinner-label"></span>
<span id="snippet-autosave-status_spinner-loader"></span>
</div>
</div>
</div>
CSS:
<style>
#snippet-autosave-header{
display: flex;
justify-content: space-between;
align-items: center;
background: var(--ck-color-toolbar-background);
border: 1px solid var(--ck-color-toolbar-border);
padding: 10px;
border-radius: var(--ck-border-radius);
/*margin-top: -1.5em;*/
margin-bottom: 1.5em;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#snippet-autosave-status_spinner {
display: flex;
align-items: center;
position: relative;
}
#snippet-autosave-status_spinner-label {
position: relative;
}
#snippet-autosave-status_spinner-label::after {
content: 'Saved!';
color: green;
display: inline-block;
margin-right: var(--ck-spacing-medium);
}
/* During "Saving" display spinner and change content of label. */
#snippet-autosave-status.busy #snippet-autosave-status_spinner-label::after {
content: 'Saving...';
color: red;
}
#snippet-autosave-status.busy #snippet-autosave-status_spinner-loader {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border-top: 3px solid hsl(0, 0%, 70%);
border-right: 2px solid transparent;
animation: autosave-status-spinner 1s linear infinite;
}
#snippet-autosave-status,
#snippet-autosave-server {
display: flex;
align-items: center;
}
#snippet-autosave-server_label,
#snippet-autosave-status_label {
font-weight: bold;
margin-right: var(--ck-spacing-medium);
}
#snippet-autosave + .ck.ck-editor .ck-editor__editable {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#snippet-autosave-lag {
padding: 4px;
}
#snippet-autosave-console {
max-height: 300px;
overflow: auto;
white-space: normal;
background: #2b2c26;
transition: background-color 500ms;
}
#snippet-autosave-console.updated {
background: green;
}
#keyframes autosave-status-spinner {
to {
transform: rotate( 360deg );
}
}
</style>
The rest is just initializing the Editor just like on the demo page here.
ClassicEditor
.create(document.querySelector('#CKeditor_Notes'), {
autosave: {
save(editor) {
return saveData(editor.getData());
}
}
})
.then(editor => {
window.editor = editor;
displayStatus(editor);
})
.catch(err => {
console.error(err.stack);
});
// Save the data to Server Side DB.
function saveData(data) {
return new Promise(resolve => {
setTimeout(() => {
console.log('Saved', data);
SaveDataToDB(data)
resolve();
});
});
}
// Update the "Status: Saving..." info.
function displayStatus(editor) {
const pendingActions = editor.plugins.get('PendingActions');
const statusIndicator = document.querySelector('#snippet-autosave-status');
pendingActions.on('change:hasAny', (evt, propertyName, newValue) => {
if (newValue) {
statusIndicator.classList.add('busy');
} else {
statusIndicator.classList.remove('busy');
}
});
}

Uncaught TypeError: Cannot read property 'replace' of undefined with KendoTreeView`

Below is my KendoUI tree view, I am using templates to show edit link on each node, but I am getting this error: "Uncaught TypeError: Cannot read property 'replace' of undefined "
#section scripts{
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
var territory = new kendo.data.HierarchicalDataSource({
transport: {
read: {
type:'POST',
url: rootURL + "Territory/AllTerritories",
dataType: "json"
}
},
schema: {
model: {
id: "ID",
hasChildren: "HasChildren",
children: territory
}
}
});
$("#treeview").kendoTreeView({
dataSource: territory,
dataTextField: "Name",
dataValueField: "ID",
template: kendo.template($("#treeview-template").html())
});
</script>
}
<script id="treeview-template" type="text/kendo-ui-template">
#
<a class='show-link' href='\#'><image src="/Content/images/select2.png"></a> #
</script>
<style scoped>
#territoryTree {
text-align: center;
}
#treeview .k-sprite {
background-image: url("../content/default/coloricons-sprite.png");
}
.rootfolder {
background-position: 0 0;
}
.demo-section {
display: inline-block;
vertical-align: text-bottom;
min-width: 320px;
min-height: 300px;
text-align: left;
margin: 0 2em;
}
</style>
Any solutions?? Please help
jquery can't find the element with Id #treeview-template when you say
kendo.template($("#treeview-template").html())
then first it will try to find the html element with the Id #treeview-template and then it will move forward. Try the F12 and the console by writing $("#treeview-template").html() in the console see if it can or cannot find the element

Tick label breaking(word-wrap)

I'm using jqPlot
Look at the right-bottom corner
Left side is correct, but the right side isn't.
There is a way to fix word-wrap on tick labels?
EDIT:
$(document).ready(function(){
var plot2 = $.jqplot ('chart-line', [[["2013-03-22",1],["2013-03-23",0],["2013-03-24",0],["2013-03-25",2],["2013-03-26",19],["2013-03-27",7],["2013-03-28",4]]]
, {
title: 'Total de alertas por dia',
seriesDefaults: {
fill:true,
color: 'steelblue',
rendererOptions: {
smooth: true
},
pointLabels:{ show:true }
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
formatString: '%F',//'%Q',
textColor: 'black',
fontSize: '11px',
labelPosition: 'auto'
}
},
yaxis: {
min:0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
EDIT:
Here is HTML
<style>
.ComBordaRedonda {
border:1px solid #dadada;
border-radius:3px;
padding:5px;
font-size: 10pt;
font-family: Calibri;
}
</style>
<div class="ComBordaRedonda" style = "float: right;background-color:#FFFFFF;width: 57%; height: 300px;">
<div id = "chart-line" style = "width: 90%; height: 95%;margin:auto">
</div>
</div>
I fixed it.
I forgot to include the css of jqPlot in the page.
thanks nick_w!

Resources