from demo example binding with signalR.
i am facing issue in add and edit mode in this scenario.
so i checked online demo and updated only 2 or 3 lines as per my requirement and found out that this issue is with kendo only not my code.
please help me here. in signalr we want popup add and edit mode not inline.
so i updated ( editable: "popup") and i wanted edit also so added edit command with destroy also.
so now if you will check if we click on add new it will open poup and close at a time and add blank record in grid.
in edit mode also if you will change only one field then also it will update that cell only and popup will close.
please help.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/signalr">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid" style="margin-bottom:20px"></div>
<span id="notification"></span>
<script src="../content/web/integration/jquery.signalr-1.1.3.min.js"></script>
<script>
$(function(){
var hubUrl = "http://demos.telerik.com/kendo-ui/service/signalr/hubs";
var connection = $.hubConnection(hubUrl, { useDefaultPath: false});
var hub = connection.createHubProxy("productHub");
var hubStart = connection.start({ jsonp: true });
$("#notification").kendoNotification({
width: "100%",
position: {
top: 0,
left: 0
}
});
$("#grid").kendoGrid({
height: 550,
editable: "popup",
sortable: true,
columns: [
{ field: "UnitPrice" },
{ field: "ProductName" },
{ command: ["edit", "destroy"], width: 100}
],
toolbar: ["create"],
dataSource: {
type: "signalr",
autoSync: true,
// Handle the push event to display notifications when push updates arrive
push: function(e) {
var notification = $("#notification").data("kendoNotification");
notification.success(e.type);
},
schema: {
model: {
id: "ID",
fields: {
"ID": { editable: false, nullable: true },
"CreatedAt": { type: "date" },
"UnitPrice": { type: "number" }
}
}
},
sort: [ { field: "CreatedAt", dir: "desc" }],
transport: {
signalr: {
promise: hubStart,
hub: hub,
server: {
read: "read",
update: "update",
destroy: "destroy",
create: "create"
},
client: {
read: "read",
update: "update",
destroy: "destroy",
create: "create"
}
}
}
}
});
});
</script>
<div class="box">
<h4>Information</h4>
<p>This example demonstrates real-time push-notifications from <a href="http://signalr.net/">SignalR</a>. To see the real-time updates:</p>
<ol>
<li>Open this page in another browser window by clicking <a href="./signalr" target="_new">here</a></li>
<li>Create, update or destroy grid items.</li>
</ol>
<p><strong>Note:</strong> To further enhance real-time experience, the Grid will also display changes from other users,
which currently happen to perform CRUD operations on the same demo.
If you refresh the page, all changes will be lost, because the remote service only broadcasts changes, it does not actually save them.</p>
</div>
</div>
</body>
</html>
i am facing issue in add and edit mode in this scenario.
so i checked online demo and updated only 2 or 3 lines as per my requirement and found out that this issue is with kendo only not my code.
please help me here. in signalr we want popup add and edit mode not inline.
so i updated ( editable: "popup") and i wanted edit also so added edit command with destroy also.
so now if you will check if we click on add new it will open poup and close at a time and add blank record in grid.
in edit mode also if you will change only one field then also it will update that cell only and popup will close.
please help.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/signalr">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid" style="margin-bottom:20px"></div>
<span id="notification"></span>
<script src="../content/web/integration/jquery.signalr-1.1.3.min.js"></script>
<script>
$(function(){
var hubUrl = "http://demos.telerik.com/kendo-ui/service/signalr/hubs";
var connection = $.hubConnection(hubUrl, { useDefaultPath: false});
var hub = connection.createHubProxy("productHub");
var hubStart = connection.start({ jsonp: true });
$("#notification").kendoNotification({
width: "100%",
position: {
top: 0,
left: 0
}
});
$("#grid").kendoGrid({
height: 550,
editable: "popup",
sortable: true,
columns: [
{ field: "UnitPrice" },
{ field: "ProductName" },
{ command: ["edit", "destroy"], width: 100}
],
toolbar: ["create"],
dataSource: {
type: "signalr",
autoSync: true,
// Handle the push event to display notifications when push updates arrive
push: function(e) {
var notification = $("#notification").data("kendoNotification");
notification.success(e.type);
},
schema: {
model: {
id: "ID",
fields: {
"ID": { editable: false, nullable: true },
"CreatedAt": { type: "date" },
"UnitPrice": { type: "number" }
}
}
},
sort: [ { field: "CreatedAt", dir: "desc" }],
transport: {
signalr: {
promise: hubStart,
hub: hub,
server: {
read: "read",
update: "update",
destroy: "destroy",
create: "create"
},
client: {
read: "read",
update: "update",
destroy: "destroy",
create: "create"
}
}
}
}
});
});
</script>
<div class="box">
<h4>Information</h4>
<p>This example demonstrates real-time push-notifications from <a href="http://signalr.net/">SignalR</a>. To see the real-time updates:</p>
<ol>
<li>Open this page in another browser window by clicking <a href="./signalr" target="_new">here</a></li>
<li>Create, update or destroy grid items.</li>
</ol>
<p><strong>Note:</strong> To further enhance real-time experience, the Grid will also display changes from other users,
which currently happen to perform CRUD operations on the same demo.
If you refresh the page, all changes will be lost, because the remote service only broadcasts changes, it does not actually save them.</p>
</div>
</div>
</body>
</html>
2 Answers, 1 is accepted
0
Accepted
Hi,
This occurs because the autoSync option is set to true. When this is done the data source syncs every time it changes. Setting that option to false should solve the problem that you are experiencing.
Regards,
Atanas Korchev
Telerik
This occurs because the autoSync option is set to true. When this is done the data source syncs every time it changes. Setting that option to false should solve the problem that you are experiencing.
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tejpal
Top achievements
Rank 1
Rank 1
answered on 02 Aug 2014, 07:59 AM
Thank you.
it solved my problem.
it solved my problem.