Related
When we work with KendoUI, we need to specify the backcolor of the chart. like this:
{
category: "Latin America",
value: 16.3,
color: "#068c35"
}
See the full code below or example here. I want to know, instead of specifying the backcolor for each component, is it possible to set the base color and then kendoui will use variation of the base color and set the backcolor for remaining component.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2011",
data: [{
category: "Asia",
value: 30.8,
color: "#9de219"
},{
category: "Europe",
value: 21.1,
color: "#90cc38"
},{
category: "Latin America",
value: 16.3,
color: "#068c35"
},{
category: "Africa",
value: 17.6,
color: "#006634"
},{
category: "Middle East",
value: 9.2,
color: "#004d38"
},{
category: "North America",
value: 4.6,
color: "#033939"
}]
}, {
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
You can use js function and logic do there.
{
category: "Africa",
value: 17.6,
color: GetColor
}
example here
Is that what you are looking for?
Based on #ademar's answer, I have updated the solution
this is how the GetColor function looks
var color = "#2b577011";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
Here is full code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: GetColor
},{
category: "Europe",
value: 16.1,
color: GetColor
},{
category: "Latin America",
value: 11.3,
color: GetColor
},{
category: "Africa",
value: 9.6,
color: GetColor
},{
category: "Middle East",
value: 5.2,
color:GetColor
},{
category: "North America",
value: 3.6,
color: GetColor
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
var color = "#63C6FF";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
</script>
</div>
</body>
</html>
I have a problem in my multiselect for the code below. While adding new row when I select all items in the list of ‘resources’ column (this field is multiselect with checkbox) and save the row, all data of the row saves correctly to the database. But when the same row is retrieved for editing I see all the items of resources selected except the first one. In the above code I am using bootstrap multiselect plugin. But same is the behaviour when I use eric hynds multiselect plugin. This problem appears to be only with the first item in the list.
<html>
<head>
<title>Maintenance Daily Log</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel='stylesheet' href='css/jquery-ui.css'/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 70%;
}
table, th, td {
font-size: 100%;
}
#editmodlist {
font-size: 70%;
}
div#editmodlist {
width: 1000px;
font-size: 130%;
}
.ui-jqgrid {font-size:0.5em;}
div .mce-tinymce {
margin-left: 5px
}
div .mce-btn button, div .mce-menu-item-normal {
font-size: 80%;
}
ul .ui-multiselect-checkboxes {
font-size: 130%;
}
#ui-datepicker-div {
font-size:120%;
}
div .ui-multiselect-header {
font-size: 100%;
}
.ui-multiselect-menu {
font-size: 150%;
width: 100%
}
button .ui-multiselect {
width: 100%;
}
</style>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery-ui.min.js'></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'server.php',
datatype: "json",
mtype: "POST",
colNames: ["SL","Date", "Shift", "Equipment","Resources-1", "Resources", "Works done", "Spares used", "Status"],
colModel: [
{name:'id',index:'id', width:30,classes: 'cvteste', hidden:true},
{ name:'date',index:'date',search: true,searchoptions: {searchhidden: true},editrules:{date:true,required:true},datefmt:'dd-mm-Y', width:70, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:10, dataInit:function(el){
$(el).datepicker({dateFormat:'dd-mm-yy'});
}
}},
{ name:'shift',index:'shift',search: true,searchoptions: {searchhidden: true}, edittype:'select', formatter:'select', editoptions:{value:"G:G;A:A;B:B;C:C"}, width:35,align:"center",classes: 'cvteste',editable:true },
{name:'equipment',index:'equipment',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'equipments.php'}},
{name:"resources-1", index:"resources-1",width:105,sortable:false, editable:false},
{name: 'resources', index: 'resources', width: 105, align: 'left', editable: true, formatter: 'select', edittype: 'select', hidden:true, editrules:{edithidden:true}, editoptions: { /*dataUrl: 'resources.php',
postData: function (rowid, value, cmName) {
return {
myId: rowid
}
},*/
dataUrl: function(){
var srow = jQuery("#list").jqGrid('getGridParam','selrow');
var myUrl = "resources.php";
if( srow ) {
myUrl = 'resources.php?myId='+srow;
}
return myUrl;
},
multiselect:true,
dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
//minWidth: 150, //'auto',
// height: "auto",
// selectedList: 2,
// checkAllText: "all",
// uncheckAllText: "no",
// noneSelectedText: "Any",
/*open: function () {
var $menu = $(".ui-multiselect- menu:visible");
$menu.width("auto");
return;
}*/
});
}, 2000);
},
multiple: true
// defaultValue: 'IN'
}
},
{ name: "workdone", index: "workdone", width: 80, sortable: false, editable: true,
//edittype: "textarea"
edittype:'custom',
editoptions: {
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
//tinymce.remove();
//var ctr = $("#" + options.id).tinymce();
//if (ctr !== null) {
// ctr.remove();
//}
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length > 0) {
id = element.attr("id");
} else if (typeof element.selector === "string") {
var sels = element.selector.split(" "),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === "#") {
id = idSel.substring(1);
} else {
return "";
}
}
if (oper === "get") {
return tinymce.get(id).getContent({format: "row"});
} else if (oper === "set") {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
},
{name:'sparesused',index:'sparesused',search: true,searchoptions: {searchhidden: true}, width:150, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:100}},
{name:'status',index:'status',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'status.php'}}
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "date",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Maintenane Daily Log",
editurl: "update.php"
});
$("#list").jqGrid("navGrid", "#pager", {add: true, edit:true}, {closeOnEscape:true, recreateForm: true, width:800},{closeOnEscape:true, recreateForm: true, width:800}
);
});
</script>
</head>
<body>
<div><table id="list"><tr><td></td></tr></table>
<div></div>
</div>
</body>
</html>
and in my resources.php I have as below
<?php
if(isset($_REQUEST['myId']))
{
$rowid=$_REQUEST['myId'];
require_once 'config.php';
$result1 = mysqli_query($con,"SELECT resources FROM worksdata WHERE id=$rowid limit 1") or die(mysql_error());
$row=mysqli_fetch_assoc($result1);
$value = $row['resources'];
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
if (strpos($value,$row['resource']) !== false)
echo " selected='selected' ";
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
else
{
require_once 'config.php';
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
?>
What may be the problem here?
Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
Also even though width is 'auto' there is a horizontal scroll bar appearing.
The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.
I downloaded again jqgrid but no .png icons were there in the installation
My jsp code goes as below -
<html>
<head>
<style>
div.ui-jqgrid-titlebar {
height: 10px;
}
#sidebar {
float: left;
width: 150px;
padding: 10px 10px;
// background-color:yellow
}
#container {
margin: 0px 320px 0px 170px;
text-align: center;
// background-color:red
}
</style>
<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<link href="../images/favicon.ico" type="image/x-icon" rel="shortcut icon">
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
var myColModel = [
{ name: "promId", index: 'Promotionid', width: 60 },
{ name: "promoCode", index: 'promotioncode', width: 110 },
{ name: "name", index: 'name', width: 160 },
{ name: "description", index: 'description', width: 250 },
{ name: "distCode", index: 'distributor_code', width: 110 },
{ name: "status", index: 'status', width: 110 },
{ name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
{ name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
{ name: "discount", index: 'discount', width: 90 },
{ name: "extension", index: 'extension', width: 90 }
];
$(function () {
$("#list").jqGrid({
url: 'some/url',
datatype: "json",
mtype: "GET",
colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
colModel: myColModel,
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "end_date",
sortorder: "asc",
viewrecords: true,
gridview: true,
rownumber: true,
autoencode: true,
width: 'auto',
height: 'auto',
caption: "Promotion Summary"
});
});
</script>
</head>
<br></br>
<body>
<br>
<br>
<center>
<hr />
<div class="clear">
<%# include file="header.jsp"%>
</div>
</center>
<div class="sidebar">
<%# include file="/admin/User.jsp"%>
</div>
<br>
<br>
<div id="container" border="2px solid green"
style="left: 5%; position: relative;">
<div id="tableContent" width="100%">
<div>Summary</div>
<div style = "margin: 0px auto 0px 150px;">
<table id="list"><tr><td></td></tr>
</table>
<div id="pager"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I found that the images were not downloaded from the version I installed from jqgrid website. Not sure why. so I manually downloaded images from internet and worked fine.
I am trying to determine why I am not getting alert one when I press enter key upon having the cursor inside an editable cell. I am getting the first "alert1!" upon entering the cell for editing but I am not getting the alert inside of afterSaveCell: after pressing the enter key.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="jqueryui/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqueryui/themes/redmond/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="timepicker/jquery-ui-timepicker-addon.css" />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar/fullcalendar.print.css' media='print' />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type='text/javascript' src='fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='timepicker/jquery-ui-sliderAccess.js'></script>
<script type='text/javascript' src='timepicker/jquery-ui-timepicker-addon.js'></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'php.scripts/customers.get.php',
datatype: 'xml',
mtype: 'POST',
colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'],
colModel :[
{name:'idcustomers', index:'idcustomers', width:55},
{name:'firstname', index:'firstname', width:90, editable: true},
{name:'lastname', index:'lastname', width:90, editable: true},
{name:'address1', index:'address1', width:90, editable: true},
{name:'address2', index:'address2', width:90, editable: true},
{name:'city', index:'city', width:90, editable: true},
{name:'state', index:'state', width:90, editable: true},
{name:'zip', index:'zip', width:90, editable: true},
{name:'phone', index:'phone', width:90, editable: true},
{name:'email', index:'email', width:90, editable: true},
{name:'cell', index:'cell', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid,name,val,iRow,iCol) {
alert("alert1!");
},
afterEditCell: function (id,name,val,iRow,iCol){
alert("alert2!");
}
});
});
</script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
How you can see on the demo, which uses practically your code, the both alerts will be displayed. You don't wrote which version of jqGrid you use. Probably some problem exist in old version, but not in the last one.
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?