Develop Reference

Kendo combo box retrive selected item with virtual

I have a kendo combo box with virtual enabled and I would like to retrive selected item beacause I need more information after.
I got undefined when I select an item after some virtual loading.
This is my code
$scope.select_item_options = {
dataValueField: "id",
dataTextField: "description_nhl",
template: "#= description #",
virtual: true,
filter: "contains",
change: function(e) {
var selected_index = this.selectedIndex;
if (selected_index < 0) {
delete $scope.work_item.item_id;
} else {
var item = this.dataItem(this.select());
console.log(item);
console.log(this.dataItem(selected_index));
// undefined here
}
$scope.$apply();
},
dataSource: new kendo.data.DataSource({
transport: {
read: {
type: "GET",
url: APP_CONFIG.api.base_url + "/items/itemTypes/AC",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(xhr) {
xhr.setRequestHeader('Authorization', storageService.getValue('auth_token'));
},
complete: function(result, status) {
if (result.status !== 200 || !result.responseJSON.fn.result.done) {
return httpService.callbackOnError(result.responseJSON, result.status);
}
}
}
},
schema: {
data: 'data',
total: function(data) {
return data.dataCount;
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
sort: {field: "description", dir: "asc"}
})
};

Resolved changing
var item = this.dataItem(this.select());
with
var item = this.dataItem();

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");

How to add new tags in select2?

I am trying to get the tags from my api. Everything works fine but I cant able to add new tags. Here is what i tried:
$(function(){
var user_email = localStorage.getItem('email');
var api = localStorage.getItem("user_api_key");
var auth = "apikey" +' ' +(user_email+":"+api);
$('#s2id_id_add-places').select2({
multiple: true,
tags: [],
tokenSeparators: [",", " "],
width: "200px",
ajax: {
placeholder: "Click to enter who",
type: "GET",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", auth);
xhr.setRequestHeader("Content-Type","application/json");
xhr.setRequestHeader("Accept","application/json");
},
url: "https://example.com/api/v3/places/",
dataType: "json",
contentType: "application/json",
processData: true,
quietMillis: 50,
data: function(term) {
return {
term: term
};
},
results: function(data) {
var results = [];
if(data.objects.length > 0) {
for (i=0; i<data.objects.length; i++) {
results.push({id: data.objects[i].id, text: data.objects[i].label, isNew: true});
}
}
return {
results: results
};
},
});
});
By using the above code, I can only get the tags but I cant able to add the new tags. how can i add the new tags?
Please help

$("#e11_2").select2({
createSearchChoice: function(term, data) {
if ($(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
You have to create a function like createSearchChoice, that returns a object with 'id' and 'text'. In other case, if you return undefined the option not will be created.

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();
}
});
}
});