kendo multiselect refresh list - javascript

i am try kendo multiselect tab remove when click on button and again this remove option in come to select.
i have done this code
Close Oranges
<script>
$("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
tagTemplate: "<span class='mitesh12' entity_id ='${data.id}' path ='${data.name}' >" + '#: data.name #' + "</span>",
});
function closeOrange(e){
$("span[entity_id='2']").parent().parent().remove();
}
</script>
this is jsfiddle and i want like this Like
here i am try to remove orange tag and after remove this again i am able to select this orange
help me out this
thanks.

You did not follow the same approach than your second link.
Define the HTML as:
<select id="multiselect" multiple="multiple"></select>
<button id="oranges" class="k-button">Close Oranges</button>
And this code for creating the multiselect:
var multi = $("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
tagTemplate: "<span class='mitesh12' entity_id ='${data.id}' path ='${data.name}' >" + '#: data.name #' + "</span>",
}).data("kendoMultiSelect");
The button handler for removing the value is:
$("#oranges").on("click", function(e) {
// List of values to remove (only the ones with id = 2)
var subtract = [2];
var values = multi.value().slice();
values = $.grep(values, function(a) {
return $.inArray(a, subtract) == -1;
});
// Filter out everything
multi.dataSource.filter({});
// Now add the remaining values.
multi.value(values);
});
You can see it here : http://jsfiddle.net/OnaBai/9WfGA/23/

Related

Kendo Grid Acting Weird on Update

I have a kendo grid which is acting weirdly. I'm trying to select a row and update value in the data source. The grid has 2 rows: one template i.e. check box and one value in data source which is Boolean.
All I'm trying to do is:
When clicked on checkbox - Update the value of IsChecked in the data
source and mark the row as selected
The code below works fine but only after each check box is clicked at least once.
To replicate: Click on any checkbox, you'll see the value in the row gets updated, but check box is not checked. Click on it again and you'll see the check box gets checked and row gets selected. But never on first time. Same happens with all the rows. After 2nd run they work fine, but not at first.
Here is the Telerik fiddle link to play around
$("#grid").kendoGrid({
columns: [
{
title: "Check",
template: '<input class="checkbox" type="checkbox" />'
},
{ field: "IsChecked" }
],
dataSource: [
{ IsChecked:false},
{ IsChecked:false },
{ IsChecked:false },
{ IsChecked:false }
],
dataBound: function () {
$(".checkbox").bind("change", function (e) {
var row = $(e.target).closest("tr");
row.toggleClass("k-state-selected");
var grid = $("#grid").data("kendoGrid");
var index = $("tr", grid.tbody).index(row);
var data = grid.dataSource.at(index);
data.set("IsChecked", true);
});
}
});
Thank you
Try below code. Working fiddle http://dojo.telerik.com/UNIpU/3
$("#grid").kendoGrid({
columns: [{
title: "Check",
template: '<input class="checkbox" #= IsChecked ? \'checked="checked"\' : "" # type="checkbox" />'
},
{
field: "IsChecked"
}
],
dataSource: [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
dataBound: function(e) {
var grid = e.sender;
var data = grid._data;
data.forEach(function(entry) {
if (entry.IsChecked) {
$('tr[data-uid="' + entry.uid + '"]').addClass("k-state-selected");
} else {
$('tr[data-uid="' + entry.uid + '"]').removeClass("k-state-selected");
}
})
}
});
$("#grid .k-grid-content").on("change", "input.checkbox", function(e) {
var grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("IsChecked", this.checked);
});

How to create custom dropdownlist in kendo grid header column?

Actually my requirement is want to create custom dropdownlist in the column header of kendo grid. I don't down like nrwant to use filtler column. I just want to add normal dropdown in header. Please provide any example like that so that i can move forward on my task.
Thanks in advance...
In your column definition add a property like this:
headerTemplate: '<input id="dropdown" />'
Then after your grid initialization do:
$("#dropdown").kendoDropDownList({...init parameters...});
UPDATE: go to dojo.telerik.com and paste in the following code:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "ProductName",
title: "Product Name",
headerTemplate: '<input id="dropdown" />'
},
{ field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
],
pageable: true,
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
},
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
var template = kendo.template(this.columns[1].template);
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var dataItem = {
UnitPrice: row.cells[1].value
};
row.cells[1].value = template(dataItem);
}
}
});
$("#dropdown").kendoDropDownList({
optionLabel: 'Choose a value...',
dataTextField: 'description',
dataValueField: 'id',
dataSource:{
data: [{id: 1, description: 'One'},{id: 2, description: 'Two'}]
},
change: function(e){
//do whatever you need here, for example:
var theGrid = $("#grid").getKendoGrid();
var theData = theGrid.dataSource.data();
$(theData).each(function(index,item){
item.ProductName = e.sender.text();
});
theGrid.dataSource.data(theData);
}
});

Assigning dynamic value to a global variable in kendo grid column template

Ok now I have this Kendo Grid code:
var ds = [
{ "ID" : 1, "attach" : "true", "attachment" : "http://www.google.com" },
{ "ID" : 2, "attach" : "false", "attachment" : "" },
{ "ID" : 3, "attach" : "true", "attachment" : "http://www.wikipedia.com" },
{ "ID" : 4, "attach" : "false", "attachment" : "" }
];
var $value = "asd";
var grid = $("#grid").kendoGrid({
dataSource: ds,
columns: [
{ field: "ID", Title: "ID", filterable: false, sortable: false, hidden: false },
{ field: "attach", Title: "Attached?", filterable: false, sortable: false, hidden: false},
{
title: "Attachment Link",
template: '#if(attachment != ""){' +
'$value = attachment' +
'#<input type="button" class="info" value="IT WORKS" />' +
'#}else{#' +
'<label>NOPE</label>' +
'#}#',
headerTemplate: "<label> Attachment </label>",
sortable: false,
filterable: false,
width: 100
}
]
}).data("kendoGrid");
//this is where I have been playing around trying to get the value. its not working. Shocker :D
//I changed this part frequently, this is just the latest form I got it in.
$(".info").on("click", function() {
var row = $(this).closest("tr");
var item = grid.dataItem(row);
var show = $value;
alert("The item is:" + show);
});
where I check if a column of a row has any non empty value or not, and if so I place a button there.
When I try to assign the value to attachment, ('value = attachment' part) I'm getting undefined as a result, but if I enclose attachment like this:
'#if(attachment != ""){#' +
'#= attachment#' +
'<input type="button" class="info" value="IT WORKS" />'
'#}else{#' +
'<label>NOPE</label>' +
'#}#',
I can print the actual link assigned to it. How can I get the value of the attachments (individually, not as a list or array or sth) when I click the button associated with it?
Here is the fiddle: https://jsfiddle.net/phyrax/zz1h65f5/
Thanks in advance!
Kendo grid column template is a template for HTML content.
If you want to place some element in html code, you should use template. As I see, you want to execute JS code inside this template. To do this you should define <script> $value = #= attachment# </script> in your template.
Other question is what you want to do, because when you do something like this, it is executed for each row during page load. So the value of $value will be always set to last row.
EDIT to first comment:
You should consider to define template as
<input type="button" class="info" value="IT WORKS" onclick="setAttachment('#= attachment#')" />
and in global JS code define function
function setAttachment(attachmentValue)
{
$value = attachmentValue;
}
This is more proper way to solve this task. Make action on click trigger, not immediately.

One Column Value remain unchanged in kendo grid drag and drop

I'm fairly new to kendo UI but some how I managed to render a kendo grid with drag and drop feature Where users can drag and place rows.In my case I have three columns id,name,sequence
So I need to keep sequence column data unchanged while id and name data changed when a drag and drop of a row.
Ex id=1 Name=David Sequnce=0
id=2 Name=Mark Sequnce=1
Now I'm going to drag row 1 to 2 while data of the sequence column remain unchanged new data like this,
Ex id=2 Name=Mark Sequnce=0
id=1 Name=David Sequnce=1
In my case every row is getting changed. I need to implement this solution.
Can somebody help me out on this.
Cheers,
Chinthaka
Try this,
Script
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark ", Sequnce: 1 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
Sequnce: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "Sequnce"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id"));
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("Sequnce");
target.set("Sequnce", dest.get("Sequnce"));
dest.set("Sequnce", tmp);
dataSource.sort({ field: "Sequnce", dir: "asc" });
}
}
});
});
</script>
View
<div id="grid">
</div>
Demo: http://jsfiddle.net/nmB69/710/

get selected id of kendo drop down value

how to get id of selected name from dropdown.
whene select Apples then got id 1and select Oranges then 2.
this is simple kendo dropdown example.
<body>
<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1,
select: onSelect
});
function onSelect(e) {
console.log(e);
};
</script>
</body>
thanks.
In order to retrieve the selected Id you can use the dataItem object and access the id within it with change event:
var dataItem = e.sender.dataItem();
$('#id').text(dataItem.id);
This will get you access to any data within the object too:
$('#name').text(dataItem.name);
Working example
http://jsfiddle.net/ygBq8/1/
Html
<input id="dropdownlist" /><br/>
<span id="id" >Id</span><br/>
<span id="name" >Name</span><br/>
JavaScript
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1,
change: onChange
});
function onChange(e) {
var dataItem = e.sender.dataItem();
$('#id').text(dataItem.id);
$('#name').text(dataItem.name);
};
The Select event is a bit more difficult one to use, as that event fires before the item is selected.
If you use the Change event, you should be able to get the dataItem with
this.dataSource.get(this.value())
See sample http://jsbin.com/OcOzIxI/2/edit
Please use this.dataItem()
function onSelect(e) {
alert(this.dataItem().id);
alert(this.dataItem().Name);
};
To select ID of the selected item use:
$("#dropdownlist").val()
And to select TEXT of the selected item use:
$("#dropdownlist").data("kendoDropDownList").text()

Categories