Develop Reference

Bug with kendo grid,for closing pop up editor,you need to press cancel many times

its over a week im dealing with a strange behavior of kendo grid ,let me split my problem, for better understanding ,i have a autocomplete text box ,after I press ENTER,it binds my grid,when I press "add new record" on my kendo grid,if I press cancel,the pop up will be closed,BUTTT after second search and the add new record,if press cancel,this time needs 2times pressing,3d time needs 3times pressing.......made me crazy,badly need your help
Here is the code
$(document).keypress(function (e) {
var myResult;
var modelProducerResult;
var temp = null;
var mydata;
var mydata_deviceType;
var modelProducerDrpList;
if (e.which == 13) {
var i = 0;
debugger;
var flag = 0;
// $('#turbingrid').data().kendoGrid.refresh();
var drp = document.getElementById('autocomplete').value;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("turbineDeviceDetail","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "turbine": drp, }),
success: function (result) {
//debugger;
myResult = result;
var flg = "s";
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("producersDevice","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "flg": flg, }),
success: function (data) {
// debugger;
mydata = data;
}
})
var flg_dvType = "s";
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("deviceTypeList","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "flg": flg_dvType, }),
success: function (data) {
// debugger;
mydata_deviceType = data;
}
});
dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
options.success(result); // where data is the local data array
},
create: function (options) {
if ($("input[name='DeviceIP']").val() == "" || $("input[name='TurbineId']").val() == "") {
alert("DeviceIP and TurbineID could not be blank ");
$("input[name='DeviceIP']").css("background-color", "red");
$("input[name='TurbineId']").css("background-color", "red");
}
else
$.ajax({
type: "POST",
url: "#Url.Action("AddDeviceToTurbine","AdminTool")",
data: options.data.models[0],
dataType: "json",
success: function (data) {
options.success(data);
alert("New Device Has Been Inserted");
//var e = $.Event("keypress", { which: 13 });
//$('#autocomplete').trigger(e);
},
//error: function (data) {
// options.error(data);
// alert("Insert New Data Has Been Failed");
// alert(data);
//},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
},
update: function (options) {
if ($("input[name='DeviceIP']").val() == "" || $("input[name='TurbineId']").val() == "") {
alert("DeviceIP and TurbineID could not be blank ");
$("input[name='DeviceIP']").css("background-color", "red");
$("input[name='TurbineId']").css("background-color", "red");
}
else
$.ajax({
type: "POST",
url: "#Url.Action( "update_grid","AdminTool")",
data: options.data.models[0],
dataType: "json",
success: function (data) {
options.success(data);
alert("Update Has Been Done!");
var value = document.getElementById('autocomplete').value;
var e = $.Event("keypress", { which: 13 });
$('#autocomplete').trigger(e);
},
error: function (data) {
options.error(data);
alert("Update Failed!");
},
});
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 40,
schema: {
//data: employee,
model: {
id: "DeviceIP",
fields: {
DeviceIP: { editable: true, nullable: false },
//Producer: { type:"string" },
//3 Model: { type: "string" },
DeviceType: { type: "string" },
Description: { type: "string" },
Username: { type: "string" },
Password: { type: "string" },
PublicIP: { type: "string" },
ModelProducer: { type: "string" },
Model: { type: "string" },
Producer: { type: "string" },
TurbineId: { type: "string" }
//UnitPrice: { type: "number", validation: { required: true, min: 1} },
//Discontinued: { type: "boolean" },
//UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#turbingrid").kendoGrid({
// debugger;
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{
name: "create",
text: "ADD NEW DEVICE"
}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id: 'Producer' },//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px', id: 'Model' },
// { field: 'DeviceType', title: 'DeviceType', width: '100px', id: 'DeviceType', editor: deviceTypesList },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px', id: 'PublicIP' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', id: 'TurbineId', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', id: 'deviceid', hidden: true },
// { field: 'ModelProducer', title: 'Producer/Model', id: 'ModelProducer', hidden: true, editor: modelPro },
{
command: ["edit"], title: " "
}
],
editable: "popup",
});
}
})
}
});
//This Part Is For The AUTOCOMPLETE textbox
$(document).ready(function () {
var value = document.getElementById('autocomplete').value;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("List_Turbine","AdminTool")",
contentType: "application/json; charset=utf-8",
//data: JSON.stringify({ "name": value ,}),
data: {},
success: function (result) {
$("#autocomplete").kendoAutoComplete({
dataSource: result,
dataTextField: "Text",
// filter: "contains"
});
}
})
});

kendo ui grid sortable and crud is not working

I have followed this tutorial and brought up the sorting to work but now the crud operation is not working.
If i remove the grid sortable code then the crud is working, but no sort.
I have no idea where i am making mistake to make both sort and crud to work
THis is the code i have
$(document).ready(function () {
function dataSource_change(e) {
var data = this.data();
console.log(data.length); // displays "77"
}
var dataSource = new kendo.data.DataSource({
//pageSize: 20,
transport:{
read:{
url: function() {
return "/makes"},
dataType: "json",
cache: false
},
update: {
url: function (make) {
console.log(make)
return "/makes/"+ make.models[0].id
},
type: "PUT",
dataType: "json",
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token',jQuery('meta[name="csrf-token"]').attr("content")); }
},
destroy: {
url: function (make) {
return "/makes/"+ make.models[0].id
},
type: "DELETE",
dataType: "json"
},
create: {
url: "/makes",
type: "POST",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
console.log(options)
return{"make": options.models[0]};
}
else{
return {"make":options};
}
}
},
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
}
}
}
});
dataSource.bind("change", dataSource_change);
dataSource.fetch();
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: [{name: "create", text: "Add New Make"}],
columns: [
{ field:"name",title:"Makes" },
{ command: ["edit", "destroy"], title: "Action", width: "250px" }],
editable: "inline"
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
placeholder: function(element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#grid tbody",
change: function(e) {
console.log(grid)
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
var updated_order = []
$('tbody tr').each(function(i){
updated_order.push({ name: $(this).children('td:first').text(), position: i+1 });
});
controller_name = $('#controller_name').val();
$.ajax({
type: "PUT",
url: '/sort',
data: { order: updated_order, controller_name: controller_name }
});
grid.dataSource.remove(dataItem);
grid.dataSource.insert(e.newIndex, dataItem);
}
});
});

Check specific check box in kendo grid

i want to loop through each row of kendo grid and check the check box of specific rows only.here's what i have tried so far.
function LoadControllerGrid(list) {
$("#controllerGrid1").kendoGrid({
data Source: {
type: "json",
// contentType: "application/json; charset=utf-8",
transport: {
read: {
url: "#Html.Raw(Url.Action("GetControllerList", "Account"))",
type: "POST",
dataType: "json"
},
},
schema: {
model: {
id: "Id",
fields: {
'Id': { type: "string" },
'Name': { type: "string" },
'Description': { type: "string" },
'URL': { type: "string" },
},
},
data: 'data',
total: 'TotalCount'
},
complete: function (jqXHR, textStatus) {
// HidePageLoader();
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
columnMenu: true
},
height: 300,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: 5000
},
columns: [{ template: '<input type="checkbox" id="#=Id#" class="gridCK" />', width: "35px" },
{ field: "Description", title: "Actions" }, ]
});
var df = list;
var grid = $("#controllerGrid1").data("kendoGrid");
grid.tbody.find("input").closest("tr").each(function (index, row) {
var dataItem = grid.dataItem(row);
for (var i = 0; i < df.length; i++)
{
if (df[i] == dataItem.Id) {
$("#controllerGrid1 tbody").find("tr[data-uid=" + dataItem.Id + "]").attr("checked");
});
}
can any one explain what did i do wrong?? and suggest if there are any alternative ways of doing this. Thanks in advance

I found a solution.
var selected = $("#controllerGrid1 tbody").find("tr[data-uid=" + dataItem.uid + "]");
selected
.find("td:first input")
.attr("checked", true);
It works for me after adding above code instead of following,
$("#controllerGrid1 tbody").find("tr[data-uid=" + dataItem.Id + "]").attr("checked");

kendo ui grid loading indicator not showing

I am using kendo grid in my html page and every thing working perfectly but one issue i am facing when page loads and i send request to get data it takes 1 or 2 seconds meanwhile grid should show loading indicator as we can see in demo . This is what i am doing
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: api/getdata,
dataType: 'json',
cache: false,
headers: { 'ccode': compCode },
async: false,
data: '?&tableName=' + table + '&userId=' + userId + '&fromDate=' + dateFrom + '&toDate=' + dateto + '&isSearchForClient=' + true,
success: function (result) {
var data = [];
if (result) {
result = result.replace(/&/g, "'");
var jsonResult = JSON.parse(JSON.parse(result));
for (var i = 0; i < jsonResult.length; i++) {
data.push({ Log: jsonResult[i]["Log"], TransactionId: jsonResult[i]["TransactionId"] });
}
var grid = $("#logs").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
TransactionId: { type: "string" },
Log: { type: "string" }
}
}
},
pageSize: 10
},
height: 405,
scrollable: true,
detailInit: detailInit,
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
},
pageable: {
input: true,
numeric: false
},
columns: [
{ field: 'Log', title: "Audit Logs", encoded: true }]
});
//grid.dataSource.read();
}
}
});

Kendo UI ListView sorting not working

I have a sortable list view that does not work. When I drag and drop the items, and the Ajax calls the stored procedure to update the display order, the items just go back to their original order.
The database is being updated, so I know it's not a database issue. There are no error messages and the stored procedure returns "Success". Maybe I have the list view and sortable set up wrong?
var DataSource;
$("#VideoView").kendoListView({
dataSource: {
type: "json",
transport: {
read: {
type: "Get",
contentType: "application/json; charset=utf-8",
url: "../api/Admin_Videos",
dataType: "json"
},
timeout: 120000
},
sort: [{ field: "DisplayOrder", dir: "asc" }],
serverSorting: true
},
dataBound: function () {
$(this.items()).on("dblclick", function () {
data = DataSource[$("div.product").index(this)];
EditVideo(data);
});
},
dataBinding: function() {
DataSource = this.dataSource.data();
},
template: kendo.template($("#VideoViewTemplate").html())
});
$("#VideoView").kendoSortable({
filter: ">div.product",
cursor: "move",
placeholder: function (element) {
return element.clone().css("opacity", 0.1);
},
hint: function (element) {
return element.clone().removeClass("k-state-selected");
},
change: function (e) {
var items = $("#VideoView").data("kendoListView").items();
var itemList = items.children("img");
var newList = '';
for (var i = 0; i < items.length; i++) {
newList = newList + itemList.eq(i).attr("id") + ','
}
newList = newList.substring(0, newList.length - 1);
$.ajax({
type: "Post",
contentType: "application/json; charset=utf-8",
url: "../api/Admin_VideoReorder",
datatype: "json",
data: JSON.stringify({ ID: newList }),
success: function (d) {
// rebind data
$("#VideoView").data("kendoListView").dataSource.read();
}
});
}
});