Hi,
i need to drag from list and drop to grid, but i have problem with refreshing grid list:
This is code:
<!DOCTYPE HTML>
<html>
<head>
<title>Your Website</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
html,body {
padding:0;
margin:0;
height:100%;
max-height:100%;
}
.articles-list, .articles-grid {
border: 1px solid #CCC;
height: 40%
}
#list {
padding: 10px
}
#grid {
height: 200px;
background: #FF0;
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.k-listview:after, .product dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<ul id="menu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
<li class="k-item k-state-default k-first" role="menuitem">
<span class="k-link">Menu item</span>
</li>
</ul>
<div class="articles-list">
<div id="list"></div>
</div>
<div class="articles-grid">
<div id="grid"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="http://placehold.it/100x100" alt="${name} image" />
<h3>#:name#</h3>
<input type="hidden" value="#:id#">
</div>
</script>
<script>
$(document).ready(function() {
var list = $("#list");
var grid = $("#grid");
var data = [
{ id: 1, name: "Jane Doe", quantity: 30 },
{ id: 2, name: "John Doe", quantity: 33 }
];
var grid_data = new kendo.data.DataSource({
data: []
});
list.kendoListView({
dataSource: data,
template: kendo.template($("#template").html())
});
grid.kendoGrid({
dataSource: {
data: []
},
sortable: true,
columns: [ {
field: "name",
width: 90,
title: "Naziv"
} , {
field: "quantity",
width: 90,
title: "Kolicina"
}
]
});
list.kendoDraggable({
filter: ".product",
hint: function(row) {
return row.clone();
}
});
grid.kendoDropTarget({
drop: function(row) {
var tempData = row.draggable.currentTarget.context.children;
grid_data.add({ id: tempData[2].value, name: tempData[1].innerHTML, quantity: '2' });
}
});
});
</script>
</body>
</html>
Can you tell me if this is correct way doing it, and how should i refresh grid on drop?
i need to drag from list and drop to grid, but i have problem with refreshing grid list:
This is code:
<!DOCTYPE HTML>
<html>
<head>
<title>Your Website</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
html,body {
padding:0;
margin:0;
height:100%;
max-height:100%;
}
.articles-list, .articles-grid {
border: 1px solid #CCC;
height: 40%
}
#list {
padding: 10px
}
#grid {
height: 200px;
background: #FF0;
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.k-listview:after, .product dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<ul id="menu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
<li class="k-item k-state-default k-first" role="menuitem">
<span class="k-link">Menu item</span>
</li>
</ul>
<div class="articles-list">
<div id="list"></div>
</div>
<div class="articles-grid">
<div id="grid"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="http://placehold.it/100x100" alt="${name} image" />
<h3>#:name#</h3>
<input type="hidden" value="#:id#">
</div>
</script>
<script>
$(document).ready(function() {
var list = $("#list");
var grid = $("#grid");
var data = [
{ id: 1, name: "Jane Doe", quantity: 30 },
{ id: 2, name: "John Doe", quantity: 33 }
];
var grid_data = new kendo.data.DataSource({
data: []
});
list.kendoListView({
dataSource: data,
template: kendo.template($("#template").html())
});
grid.kendoGrid({
dataSource: {
data: []
},
sortable: true,
columns: [ {
field: "name",
width: 90,
title: "Naziv"
} , {
field: "quantity",
width: 90,
title: "Kolicina"
}
]
});
list.kendoDraggable({
filter: ".product",
hint: function(row) {
return row.clone();
}
});
grid.kendoDropTarget({
drop: function(row) {
var tempData = row.draggable.currentTarget.context.children;
grid_data.add({ id: tempData[2].value, name: tempData[1].innerHTML, quantity: '2' });
}
});
});
</script>
</body>
</html>
Can you tell me if this is correct way doing it, and how should i refresh grid on drop?
2 Answers, 1 is accepted
0
Hello Mirza,
Regards,
Daniel
Telerik
You should set the "grid_data" dataSource to the Grid in order to update the Grid when using the dataSource add method:
var grid_data = new kendo.data.DataSource({ data: []});grid.kendoGrid({dataSource: grid_data,Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mirza
Top achievements
Rank 1
Rank 1
answered on 06 Jun 2013, 01:33 PM
Thanks, it works.