I use ddslick list, and I search how copy opening of classical list.
When I have place to open in down direction then open in classical mode but when i don't have place I want force the opening in up direction.
and I can't say to my ddslick list open up a table like a simple select.
I give a sample code
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
.MaxHeightPopup
{
border-style: solid;
border-color: red;
display: block;
max-height: 100px;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function () {
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$("#btnAdd").click(function () {
var row = '<tr height="50"><td>';
row += '<select class="myDropdown"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas').append(row);
$('.myDropdown').ddslick({
zindex: 200,
data: ddData,
width: 300,
selectText: "Select your preferred social network",
imagePosition: "right"
});
});
$("#btnAdd1").click(function () {
var row = '<tr height="50"><td>';
row += '<select class="myselect1"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas1').append(row);
});
});
</script>
</head>
<body>
<button id="btnAdd">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
<br />
<button id="btnAdd1">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas1">
</table>
</body>
</html>
Can someone help me please?
i just see if i add
.dd-container
{
position:static;
}
But after .dd-options not in good position
it's better like that, but not perfect
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
.MaxHeightPopup
{
border-style: solid;
border-color: red;
display: block;
max-height: 100px;
overflow: auto;
}
.dd-container
{
position: static;
}
</style>
<script type="text/javascript">
$(function () {
var mypositions = [];
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$("#btnAdd").click(function () {
var nbl = $('#tbdatas tr').length;
var row = '<tr height="50"><td>';
row += '<select class="myDropdown" id="' + nbl + '"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas').append(row);
$('#' + nbl).ddslick({
zindex: 200,
data: ddData,
width: 300,
selectText: "Select your preferred social network",
imagePosition: "right"
});
var windowpos = $("#tbdatas").scrollTop();
mypositions.push(parseInt($('#' + nbl).position().top) + windowpos);
});
$("#tbdatas").scroll(function () {
var windowpos = $("#tbdatas").scrollTop();
$('.dd-container').each(function () {
$('.dd-options', $(this)).css("top", parseInt(this.clientHeight) + parseInt(mypositions[this.id]) - windowpos);
});
});
});
</script>
</head>
<body>
<button id="btnAdd">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
</body>
</html>
Related
I am trying to make date column accept two formats using parseformats attribute, but it seems not picking up, please advise.
Scenario: When I input 10/10/19 it is showing inccorect date message. But when I input 10/10/2019, its working as no errors and displays in the format.
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["save"],
columns: [{
field: "name"
},
{
field: "age",
format: "{0:MM/dd/yyyy}",
parseFormats: ["MM/dd/yyyy", "MM/dd/yy"]
}
],
dataSource: {
data: [{
id: 1,
name: "Jane Doe",
age: "11/11/2019"
},
{
id: 2,
name: "John Doe",
age: "10/10/2018"
}
],
schema: {
model: {
id: "id",
fields: {
age: {
type: "date"
}
}
}
}
},
editable: true
});
});
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Try this
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["save"],
columns: [{
field: "name"
},
{
field: "age",
format: "{0:MM/dd/yyyy}",
parseFormats: ["MM/dd/yyyy", "MM/dd/yy"]
}
],
dataSource: {
data: [{
id: 1,
name: "Jane Doe",
age: "11/11/2019"
},
{
id: 2,
name: "John Doe",
age: "10/10/2018"
}
],
schema: {
model: {
id: "id",
fields: {
age: {
parse: function (value) {
var dt = kendo.parseDate(value,["MM/dd/yyyy", "MM/dd/yy"]);
return kendo.toString(dt, "MM/dd/yyyy");
},
validation: {
ageValidation: function (value) {
var dt = kendo.parseDate(value.val(),["MM/dd/yyyy", "MM/dd/yy"]);
value.attr("data-ageValidation-msg", "age is not valid date")
return dt !== null;
}
}
}
}
}
}
},
editable: true
});
});
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
I am trying to get all the selected nodes from KendoTreeView and display a Treeview with only selected values from the previous Tree.
Is this possible to achieve?
Thanks in advance.
Sure it is possible and below there is a rough way to do it, taken from this demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Check nodes</h4>
<div id="treeview"></div>
<hr>
<div id="treeview2"></div>
</div>
</div>
<script>
$("#treeview2").kendoTreeView();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
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: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i]);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
let treeView2 = $("#treeview2").data("kendoTreeView");
treeView2.dataSource.data(checkedNodes);
}
</script>
<style>
#treeview .k-sprite,
#treeview2 .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.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>
Demo in Dojo
The point is, you have to retrieve the selected nodes(as made with checkedNodeIds()) and then set them to the target treeview dataSource:
$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
I have an example kendo treeList created: http://dojo.telerik.com/akAwe/4
In the example, how do i make child cells of "Protocol names" column clickable?
Thanks.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script type="text/x-kendo-template" id="template">
<a href='https://www.google.com/?test=#: ProtocolName #'>#: ProtocolName #</a>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ "id": 61, "parentId": 1, "ProtocolName": "P2", "SeriesDescription": "P2 " },
{ "ExamStart": "9/19/2015 8:00 AM", "id": 1, "ProtocolName": "P2", "SeriesDescription": "P2 ", "parentId": null },
{ "id": 62, "parentId": 2, "ProtocolName": "P1", "SeriesDescription": "P1 " },
{ "id": 63, "parentId": 2, "ProtocolName": "P2", "SeriesDescription": "P2 ", },
{ "ExamStart": "9/19/2015 8:13 AM", "id": 2, "ProtocolName": "P1, P2", "SeriesDescription": "P1 , P2 ", "parentId": null }
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
columnMenu: true,
dataBound: onDataBound,
columns: [{
field: 'ExamStart',
title: 'Date/Time'
}, {
field: 'ProtocolName',
title: 'Protocol names',
sortable: false,
template: $("#template").html()
}, {
field: 'SeriesDescription',
title: 'Series descriptions',
sortable: false
}]
});
});
function onDataBound(arg) {
$(".k-treelist-group").each(function (index) {
$(this).find('a').replaceWith($(this).find('a').text());
});
}
</script>
</div>
</body>
</html>
Update 1:
<script type="text/x-kendo-template" id="template">
<a href='localhost:20327/\\#/dose/test'>#: ProtocolName #</a>
</script>
Let me know if any concern.
I am trying to generate a bar graph using data from MYSQL through ajax by taking two input date fields from the user and returning the results using ajax.The problem is that when i select the date range, it doesn't show me anything.
I am new to Ajax as well, so any help will be appreciated.
Below is the code i have tried so far;
Thanks
<?php
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//default
var startdate = document.getElementById('startdate').value;
var enddate = document.getElementById('enddate').value;
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(startdate,enddate) {
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/"><< Back to index</a>
<div class="menu_top" >
<input type="date" id="startdate" name="startddate">
<input type="date" id="enddate" name="enddate">
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
Below is my data.phpfile,
<?php
#Basic Line
require '../../conn/connection.php';
$id = $_GET['id'];
$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];
$result = mysql_query("SELECT DISTINCT(membername), COUNT(membername)
AS member
FROM responses WHERE timerecorded>=" . $startdate . " AND timerecorded<=" . $enddate . " GROUP BY membername");
$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['membername'];
$rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysql_close($con);
SOLVED! Use my code!
I just can't use Ajax to refresh my result in JustGage. I've checked another post on Stackoverflow but this does not work. Could you please tell me what I'm doing wrong with the last setInterval function.
Thanks!
Matt
<!doctype html>
<html>
<head>
<title>Customize style</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style>
body {
text-align: center;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="resources/js/raphael.2.1.0.min.js"></script>
<script src="resources/js/justgage.1.0.1.min.js"></script>
<script src="resources/js/jquery-1.9.1.min.js"></script>
<script>
var g1;
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: getRandomInt(500, 600),
min: 0,
max: 1500,
title: "CO",
label: "ppm",
gaugeWidthScale: 0.3
});
var myvar='';
$.ajax({
type:'post',
url: 'g1CO.php',
dataType:'text',
success: function(data) {
useReturnData(data);
}
});
function useReturnData(data){
myvar = data;
console.log(myvar);
};
setInterval(function() {
//$.get('g1CO.php', function(data) { g1.refresh(myvar); });
$.get("g1CO.php", function(data) { g1.refresh(data)});
}, 2500);
};
</script>
</head>
<body>
<table border="0">
<tr>
<td><div id="g1" style="width:300px; height:200px"></div></td>
</tr>
</table>
Use g.refresh(newValue).
var g1, g2;
window.onload = function(){
var g1 = new JustGage({
id: "cpugauge",
value: 0,
min: 0,
max: 100,
title: "CPU",
label: "Load"
});
var g2 = new JustGage({
id: "memgauge",
value: 0,
min: 0,
max: 100,
title: "Memory",
label: "Used"
});
setInterval(function() {
$.get('ajax/cpu.php', function (newValue) { g1.refresh(newValue); });
$.get('ajax/mem.php', function (newValue) { g2.refresh(newValue); });
}, 2500);
};