const gallery = () => ({
items: [{ "name": "tiger", "category": "animals" }, { "name": "cow", "category": "animals" }, { "name": "horse", "category": "animals" }, { "name": "wolf", "category": "animals" }, { "name": "hippopotamus", "category": "animals" }, { "name": "kangaroo", "category": "animals" }, { "name": "giraffe", "category": "animals" }, { "name": "bear", "category": "animals" }, { "name": "Aaron", "category": "people" }, { "name": "Basil", "category": "people" }, { "name": "Cliff", "category": "people" }, { "name": "Dan", "category": "people" }, { "name": "Mercury", "category": "plantes" }, { "name": "Venus", "category": "plantes" }, { "name": "Earth", "category": "plantes" }, { "name": "Mars", "category": "plantes" }, { "name": "Jupiter", "category": "plantes" }, { "name": "Saturn", "category": "plantes" }, { "name": "Uranus", "category": "plantes" }],
load:false,
loaded(){
this.load = true;
},
filter: 'all',
get filterItems() {
if (this.filter == 'all') {
return this.items;
}
return this.items.filter(item => item.category == this.filter);
},
init() {
this.$watch('filter', ()=> this.load = false);
},
});
p,
ul {
margin: 0;
padding: 0;
}
form {
margin: 50px;
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
li {
border: 1px solid #000;
width: 150px;
margin-bottom: 10px;
text-align: center;
user-select: none;
margin-right: 10px;
transition: all 0.5s;
opacity: 0;
}
li.load{
opacity: 1;
}
li p.category {
padding: 10px;
color: #fff;
border-bottom: 1px solid #000;
}
li p.animals{
background-color: tomato;
}
li p.people{
background-color: skyblue;
}
li p.plantes{
background-color:navy;
}
li p.name {
padding: 10px;
font-weight: bold;
}
<script defer src="https://unpkg.com/alpinejs#3.9.0/dist/cdn.min.js"></script>
<div x-data="gallery()">
<form action="form" id="gallery-filter">
<span class="form-item">
<input type="radio" x-model="filter" name="filter" id="all" value="all">
<label for="all">ALL</label>
</span>
<span class="form-item">
<input type="radio" x-model="filter" name="filter" id="people" value="people">
<label for="people">People</label>
</span>
<span class="form-item">
<input type="radio" x-model="filter" name="filter" id="animals" value="animals">
<label for="animals">Animals</label>
</span>
<span class="form-item">
<input type="radio" x-model="filter" name="filter" id="plantes" value="plantes">
<label for="plantes">plantes</label>
</span>
</form>
<ul>
<template x-for="(item,index) in filterItems" :key="index" x-init="$nextTick(()=>loaded())">
<li :class="{'load':load}">
<p class="category" :class="item.category" x-text="item.category"></p>
<p class="name" x-text="item.name"></p>
</li>
</template>
</ul>
</div>
By changing the value of the form, we are making it re-render.
The first time animation works fine, but after changing the values, the animation does not work properly.
I have tried changing the location of x-init, but it does not work.
alpinejs#3.9.0
<head>
<!-- + -->
<script defer src="https://unpkg.com/alpinejs#3.9.0/dist/cdn.min.js"></script>
</head>
css
li {
/*+*/
transition: all 0.5s;
opacity: 0;
}
/*+*/
li.load{
opacity: 1;
}
html
<ul>
<!-- x-init① -->
<template x-for="(item,index) in filterItems" :key="index"
x-init="$nextTick(()=>loaded())">
<!-- x-init② -->
<li :class="{'load':load}">
<p class="category" :class="item.category" x-text="item.category"></p>
<p class="name" x-text="item.name"></p>
</li>
</template>
</ul>
</div>
This didn't work either. However, this still works, but it is in x-for, so of course it will be executed repeatedly.
<!-- x-init② -->
<li :class="{'load':load}" x-init="$nextTick(()=>loaded())">
codepeUrl
https://codepen.io/y0sh1m0t0/pen/abVRJZw
Related
I want to make checkbox mode single in kendo treeview / ui for jquery.
But there is no official option for jquery. I found solution to scan all treeview and uncheck others one by one. But it puts me in trouble because i have 3-4 depth and over +500 items in my treeview. When i select 2nd time, it takes around 1-2 seconds and freeze all treeview for a while.
This is a demo for dummy solution that i use. But it's not smooth for my actual treeview.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide k-content">
<div id="demo-section-title" class="treeview-flex">
<div>
<h3>
Select nodes, folders and drag them between the TreeViews
</h3>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-kendo"></div>
</div>
<div class="treeview-flex">
<div>
<h4>Drag and Drop</h4>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-telerik"></div>
</div>
</div>
<script id="treeview" type="text/kendo-ui-template">
# if (!item.items && item.spriteCssClass) { #
#: item.text #
<span class='k-icon k-i-close kendo-icon'></span>
# } else if(!item.items && !item.spriteCssClass) { #
<span class="k-sprite pdf"></span>
#: item.text #
<span class='k-icon k-i-close telerik-icon'></span>
# } else if (item.items && item.spriteCssClass){ #
#: item.text #
# } else { #
<span class="k-sprite folder"></span>
#: item.text #
# } #
</script>
<script>
function traverse(nodes, callback) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var children = node.hasChildren && node.children.data();
callback(node);
if (children) {
traverse(children, callback);
}
}
}
function onCheck(e) {
var dataItem = this.dataItem(e.node);
var rootNodes = $("#treeview-kendo").getKendoTreeView().dataSource.data();
traverse(rootNodes, function(node) {
if (node != dataItem) {
node.set("checked", false);
}
});
}
$("#treeview-kendo").kendoTreeView({
template: kendo.template($("#treeview").html()),
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 8, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 9, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}],
//dragAndDrop: true,
checkboxes: {
checkChildren: true
},
check: onCheck,
loadOnDemand: true
});
</script>
<style>
#media screen and (max-width: 680px) {
.treeview-flex {
flex: auto !important;
width: 100%;
}
}
#demo-section-title h3 {
margin-bottom: 2em;
text-align: center;
}
.treeview-flex h4 {
color: #656565;
margin-bottom: 1em;
text-align: center;
}
#demo-section-title {
width: 100%;
flex: auto;
}
.treeview-flex {
flex: 1;
-ms-flex: 1 0 auto;
}
.k-treeview {
max-width: 240px;
margin: 0 auto;
}
#treeview-kendo .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
#treeview-telerik .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.demo-section {
margin-bottom: 5px;
overflow: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.rootfolder {
background-position: 0 0;
}
.folder {
background-position: 0 -16px;
}
.pdf {
background-position: 0 -32px;
}
.html {
background-position: 0 -48px;
}
.image {
background-position: 0 -64px;
}
</style>
</div>
</body>
</html>
There is an option mode:"single" for Angular.
single mode checkbox for treeview in kendo ui for Angular
But i'm looking same kendo ui for Jquery.
You don't need to manually traverse the nodes. You can leverage JQuery to get the appropriate selector and let it do it for you in the check event (documentation).
Basically what you'd do is:
Handle the check event
Get the inputs by selecting the treeview's k-checkbox-wrapper class' input
Set the checked property to false
Set the node that was checked back to true
Example:
check: function(e) {
$("#treeview .k-checkbox-wrapper input").prop("checked", false);
$(e.node).find("input").prop("checked", true);
}
Fiddle: https://dojo.telerik.com/ALEJetoD
The validation is currently happening correctly.The only issue is that I would like to show the error message in the tooltip only and not through a span next to the input element. How do I hide the default display?
My CSS:
<style scoped>
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
#tickets {
width: 710px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 7px 0 0 0;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
My HTML:
<div id="example">
<div class="demo-section k-header">
<form id="tickets">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" />
</div>
</li>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" />
</div>
</li>
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
My JavaScript:
<script>
$(document).ready(function () {
var status = $(".status");
var validator = $("#tickets").kendoValidator({
rules: {
customRule1: function (input) {
if (input.is("[name=fullname]")) {
return input.val() === "peter" || input.val() === "john";
}
return true;
}
},
messages: {
required: "Field is required",
customRule1: "User name must be either Peter or John"
}
});
var tooltip = $("#tickets").kendoTooltip({
filter: ".k-invalid",
content: function (e) {
var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]");
return '<span class="k-icon k-warning"> </span>' + errorMessage.text();
}
});
$("form").submit(function (event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets have been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
Why not use css? Just add this rule to your styles
.k-widget.k-tooltip-validation {
display: none !important;
}
I'm attempting to use Kendo-Validator and Kendo-ToolTip to show validation messages as a tooltip. The problem I currently have is that multiple validation error messages appear against the HTML element. How do you stop that from happening?
Here's the HTML:
<div id="example">
<div class="demo-section k-header">
<form id="tickets">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" style="width: 200px;" />
<!--<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" required validationmessage="Enter {0}" style="width: 200px;" />-->
</div>
</li>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" style="width: 200px;" />
<!--<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required validationmessage="Enter {0}" style="width: 200px;" />-->
</div>
</li>
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
Here's the CSS:
<style scoped>
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
#tickets {
width: 510px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 7px 0 0 0;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
Here's the JavaScript:
<script>
$(document).ready(function () {
var status = $(".status");
$(".k-textbox").blur(function (event) {
var tooltip = $("#tickets").kendoTooltip({
filter: ".k-invalid",
content: function (e) {
var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]");
return '<span class="k-icon k-warning"> </span>' + errorMessage.text();
}
});
var validator = $("#tickets").kendoValidator({
rules: {
required: function (input) {
var value = input.val();
if (value != null && value.length > 0)
return true
else return false;
},
customRule1: function (input) {
if (input.is("[name=fullname]")) {
return input.val() === "peter" || input.val() === "john";
}
return true;
}
},
messages: {
required: "Field is required",
customRule1: "User name must be either Peter or John"
}
});
if (validator.validate()) {
status.text("Hooray! Your tickets have been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
</div>
The following line was causing the duplicate message display:
$(".k-textbox").blur(function (event) {
The reason is because the kendo validation is fired as the element loses focus (onBlur) by default. Wiring the blur event, as shown above was causing the validation to happen again.
I am using Kendo UI Dataviz to develop my application, but I am getting a problem for render the chart. When the chart is renderer, it was not occupying all the div width, as shown below.
My JS code:
function creatChart() {
$("#chart").kendoChart({
dataSource : {
transport : {
read : {
url : "myUrl",
dataType : "json",
},
}
},
legend : {
position : "top"
},
series : [ {
type : "area",
field : "valor1",
color : "#73c100",
axis : "axes1"
}, {
type : "line",
field : "valor2",
color : "#007eff",
position : "right",
axis : "axes2"
} ],
valueAxes : [ {
name : "axes1",
color : "#73c100",
min : 0,
max : 150
}, {
name : "axes2",
color : "#007eff",
min : 0,
max : 150
} ],
categoryAxis : {
field : "data",
labels : {
template : "#=$(this).formatDate(value)#",
rotation: -35
}
},
tooltip : {
visible : true,
format : "{0}"
}
});
}
My HTML code:
<div id="tabs-1">
<div class="row-fluid" style="padding-top: 45px">
<div class="span2" style="padding-left: 15px; padding-top: 15px; padding-bottom: 15px">Selecione
o período:
</div>
<div class="span3">
<input type="text" class="dataInicio" readonly="readonly" style="margin-top: 15px;"/>
</div>
<div class="span1">
<label style="margin-top: 15px;">à</label>
</div>
<div class="span5">
<input type="text" class="dataFim" readonly="readonly" style="margin-top: 15px;"/>
<button class="btn submit" style="margin-top: 10px;">Buscar</button>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="chart"></div>
</div>
</div>
</div>
I need the chart occupy all the div width. Can anyone help me, please?
use the lines
chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
find the code below
$("#chartNo1").kendoChart({
theme: $(document).data("kendoSkin") || "silver",
title: {
text: "Store Visits"
},
chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
};
other way could be
chartArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
plotArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
change the percent to specific size
Newbie with Kendo UI here, thanks for the help. Having a problem with a selected listview inside a grid popup editor window.
It displays and is selectable, but I can't get it to send the selected listview data to the JSON string
the json string sent to the server:
{"blog"=>{"id"=>"", "title"=>"New title", "content"=>"New content", "published"=>"", "img_name"=>""}}
My code, kendo-grid and kendo-listview:
<script type="text/x-kendo-tmpl" id="image_template">
<div class="product">
<img src="/assets/blog/${img_name}" width="100" />
</div>
</script>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input type="text" id="title" name="Title" data-bind="value:title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="published">Published</label>
<div class="controls">
<input type="checkbox" id="published" data-bind="checked: published" />
</div>
</div>
<textarea id="editor" name="content" data-bind="value:content"></textarea>
<div id="listView"></div>
<div class="control-group">
<label class="control-label" for="img_name">Image Name</label>
<div class="controls">
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
</div>
</div>
</form>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "/posts";
var blogimages = [
{ "img_name": "image_one.jpg"},
{ "img_name": "image_two.jpg"},
{ "img_name": "image_three.jpg"},
{ "img_name": "image_four.jpg"},
{ "img_name": "image_five.jpg"}
];
imageSource = new kendo.data.DataSource({
data: blogimages
});
imageSource.read();
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id;
},
dataType: "json",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id
},
dataType: "json",
type: "DELETE"
},
create: {
url: crudServiceBaseUrl,
dataType: "json",
contentType: "application/json",
type: "POST"
},
batch:false,
parameterMap: function(posts, type) {
if (type === "create") {
return JSON.stringify({ post: posts });
}
else if(type === "update") {
return JSON.stringify({ post: posts }, replacer);
}
}
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
title: { editable: true, defaultValue: "New title" },
content: { editable: true, defaultValue: "New content" },
published: {editable: true},
img_name: {editable: true}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
navigatable: true,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
selectable: "row",
height: 490,
toolbar: ["create"],
editable: {
mode: "popup",
template: $("#popup_editor").html()
},
edit: function(e) {
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull"
]
});
$("#listView").kendoListView({
dataSource: imageSource,
selectable: "multiple",
change: onChange,
template: kendo.template($("#image_template").html())
}).data("kendoGrid");
},
save: function(e) {
},
columns: [
{ field: "title",title:"Title", width: "25%" },
{ field: "created_at", title:"Created", width: "20%" },
{ field: "updated_at", title:"Updated", width: "20%" },
{ field: "published", title:"Published", width: "10%" },
{ command: ["edit", "destroy"], title: " ", width: "20%" }]
});
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.at(index);
$('#img_name').val(dataItem.img_name);
}
replacer = function(key, value){
if (key=="id"||key=="created_at"||key=="updated_at"){
return undefined;
}else{
return value;
}
}
});
</script>
<style scoped>
.product
{
float: left;
width: 100px;
height: 60px;
margin: 5px;
padding: 5px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: none;
cursor: pointer;
overflow: hidden;
}
.product img
{
float: left;
width: 100px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.k-listview:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.k-listview
{
border: 0;
padding: 0 0 20px 0;
min-width: 0;
}
</style>
I can successfully send img_name data through the input text
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
But I can't get it to change with onChange function in the listview
Any thoughts on this?