How can I programmatically add textbox controls at run time with Asp.net core using kendo UI?
( I don't want use kendo grid )
Not sure what you really want(your post strongly lacks of information), but I think you might try templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script id="textbox-template" type="text/x-kendo-template">
<input type="text" name="#= data.Name #" value="#= data.Value #">
</script>
<style type="text/css">
#fields-container input {
display: block
}
</style>
</head>
<body>
<div id="fields-container"></div>
<button>Add textbox</button>
<script>
let getValues = function getValues() {
return {
Name: "User[" + $('input').length + "]",
Value: "John Doe"
};
};
$('button').on('click', function() {
let template = kendo.template($('#textbox-template').html()),
dataValue = getValues(),
templateValue = template(dataValue);
$('#fields-container').append(templateValue);
});
</script>
</body>
</html>
Demo
As you said you don't want to use grid, I imagine that you want something like kendo does in grid that is to use templates in background. You can use a template alone without any widget at all. With the snippet above you can request data form server with ajax(in the getValues() function precisely) or grab the data from other sources.
I am trying to add a zoom on my image with the jQuery (brilliant) plugin gzoom (http://lab.gianiaz.com/jquery/gzoom/ or http://www.chouselive.co.za/demo/pictures/zoom/gzoom.php).
But it doesn't work. My image is just resized, but there is no zoom in it.
Here is my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test gzoom</title>
<link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jquery.gzoom.css" type="text/css" media="screen">
<style>
div#zoom{
cursor: crosshair;
}
</style>
</head>
<body>
<div id="gzoomwrap">
<div id="zoom" class="zoom minizoompan">
<span class="loader">loading...</span>
<img src='img/myImage.png'/>
</div>
<!-- START gzoom zoom bar -->
<div class="ui-icon ui-icon-circle-minus gzoombutton"> </div>
<div class="gzoomSlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width: 258px;"></div>
<div class="ui-icon ui-icon-circle-plus gzoombutton"> </div>
<br style="clear:both">
<!-- END gzoom zoom bar -->
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- START gzoom dependencies -->
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.slider.min.js"></script>
<script type="text/javascript" src="js/jquery.gzoom.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(function() {
$zoom = $("#zoom").gzoom({
sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});
});
/*]]>*/
</script>
<!-- END gzoom dependencies -->
</body>
</html>
I looked on the Chrome console, and found some errors in the libraries. So I assume I didn't implement gzoom correctly. (Doesn't work in all browsers)
If you know what I'm doing wrong... I'll thank you a lot !
I'm the gzoom plugin author.
The plugin was developed a lot of time ago, but it's still working with new versions of jquery and jquery ui.
If you include a modern jquery version you have also to include a modern version of jquery-ui.
I've just tried the plugin with this versions and it does his job:
jquery-1.10.2.min.js
jquery-ui-1.10.3.custom.min.js
Include this files, and remove the ui.core.min from, and ui.slider.min.
I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">
<!-- FONTS -->
<!--Typekit - Adrianna Extended Demibold-->
<script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- AUTO RELOAD FOR HAMMER -->
<!-- Hammer reload -->
<script>
setInterval(function(){
try {
if(typeof ws != 'undefined' && ws.readyState == 1){return true;}
ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
ws.onmessage = function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length;i++) {
var link = links[i];
if (link.rel === 'stylesheet' && !link.href.match(/typekit/)) {
href = link.href.replace(/((&|\?)hammer=)[^&]+/,'');
link.href = href + (href.indexOf('?')>=0?'&':'?') + 'hammer='+(new Date().valueOf());
}
}
}
}catch(e){}
}, 1000)
</script>
<!-- /Hammer reload -->
<!-- CSS/SCSS -->
<link rel='stylesheet' href='css/ostrich-sans.css'>
<link rel='stylesheet' href='css/font-awesome.css'>
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/responsive-nav.css'>
<link rel='stylesheet' href='css/style.css'>
<!-- IOS LINK STYLES -->
<style type="text/css">
/*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
/*Disable touch-highlight
-webkit-tap-highlight-color: rgba(0,0,0,0); */
</style>
<!-- JS MODERNIZR -->
<script src='js/modernizr.custom.87213.js'></script>
<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">
<title>Title</title>
<!-- ZEPTO FALLBACK TO JQUERY -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
'.js><\/script>')
</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="nav-collapse">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sec-one">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-two">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-three">
<aside>Aside</aside>
<article>Article</article>
<p>Content copy</p>
</section>
<script src='js/responsive-nav.js'></script>
<script src='js/app.js'></script>
<!-- INITIATE RESONSIVE-NAV -->
<script>
var navigation = responsiveNav(".nav-collapse", {
label: '<i class=\"icon-reorder icon-2x\"></i>'
});
</script>
</body>
</html>
selectivizr.js is dependent on jquery (or similar libraries). Make sure that you're loading jquery BEFORE selectivizr...
<!--[if lte IE 8]>
**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>**
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
Have you tried including HTML5 shiv?
Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section>, <nav>, etc). For me, selectivizr.js does indeed allow Neat to work with IE8, but if you're using HTML5 elements then even with selectivizr Neat won't be able to style them in IE8 without the HTML5 shiv. (nb. that's not actually a problem with Neat per se - it's a more general problem that stems from IE8 being a pre-HTML5 browser).
Effectively, selectivizr.js fixes the problems with selectors that IE8 doesn't recognise, while HTML5 shiv fixes the problems with unrecognised elements: if you're using HTML5 elements then in order to get everything working smoothly, you'll probably need both.
I am trying to get the size of my image in IE9. I did it with success (tried on jpg). When I try loading an image whose width is lower than the height, there is no problem at all. But when I try to upload an image with a width higher than the height, I see that the lines that output "vh:", "vw:" return zero.
Why is there a problem when trying to load an image (by my code) with width > height?
Thanks.
Here is my code (Works for IE9 - That's what I want to check out).
<!doctype html>
<html>
<head>
<!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
var v=new Image();
if (navigator.appName === "Microsoft Internet Explorer") {
return function () {
alert("file." + document.getElementById("id_filepic").value);
$("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)");
//$("#id_image").attr("src", document.getElementById("id_filepic").value);
//v.src = document.getElementById("id_filepic").value;
v.src = $("#id_filepic").val();
alert("vw:" + v.width);
alert("vh:" + v.height);
$("#id_image").width(v.width);
$("#id_image").height(v.height);
document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value;
alert("w final:" + $("#id_image").width());
alert("h final:" + $("#id_image").height());
}
}
})();
</script>
<style type="text/css"></style>
</head>
<body>
<form name="uploadForm">
<p><input id="id_filepic" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
</form>
<image id="id_image" src="" onmousedown="return false"></image>
</body>
Consider this issue as closed, since I found solution on: The event after loading image on IE9
Thanks, anyway :)
my json file looks like
{"items":[
{"date":"2012-03-12","scoreMin":"9","scoreMax":"25","scoreAverage":"20.39","scoreSTD":"3.86","scoreCount":"133","count20":"73","count25":"46"},
{"date":"2012-03-13","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-14","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-15","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-09-15","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-16","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-17","scoreMin":"5","scoreMax":"24","scoreAverage":"18.59","scoreSTD":"5.67","scoreCount":"99","count20":"45","count25":"0"},
{"date":"2012-09-18","scoreMin":"5","scoreMax":"24","scoreAverage":"18.64","scoreSTD":"5.67","scoreCount":"100","count20":"46","count25":"0"}
]}
and my script is
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
alert('Document ready');
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData[i] =("['" + data.date + "'," + data.scoreAverage + "]");
});
alert( 'Fetched ' + objArrayData.length + ' items!');
console.log('object Data ' + objArrayData);
objArray = ("[" + objArrayData + "]");
console.log('object Array' + objArray);
var plot = $.jqplot('chartCanvas', [objArray], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%#m/%y'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
I am getting uncaught exception- No data error
Before plotting the chart, I am printing the array and there are all the values that I need.
What is missing? Where am I doing wrong?
Thanks for your help.
I don't understand why you are feeding data to the objArrayData array in the way you are doing here. The data doesn't become an array just because there are square brackets surrounding them (it will only appear pretty and satisfying and confusing in the cosole.log).
Use array.push() instead of the way you are doing it here.
And also make sure you make the data.scoreAverage a number before parsing it to the array.
You can do it using parseFloat() function.
So finally you can feed the data to the array like this.
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
Here's the modified working code.
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="../jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
});
console.log('object Data ' + objArrayData);
var plot = $.jqplot('chartCanvas', [objArrayData], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%Y-%m-%d'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
Hope this helps.
PS: Make sure you learn about arrays a little more.