Questions on Kendo UI for jQuery Forum

11 answers

1.4K+ views

Delete Muliple Rows having Checkbox and using common Delete Button

Could any one help me how to delete muliple Rows in grid each having checkboxes and by clicking common delete button will delete the selected rows.Clicking on rows apart from checkbox should not make look like as selected /enabledor in different colour.
I am using only Kendo UI web and Framework .. So my code is like

MyTemplate:
$("#rfgGrid").kendoGrid(
{
dataSource : DataSource,
editable : true,
height : 260,
columns : [
{
field : "select",
title : "Select",
width : "16%",
template: "<input type='checkbox' class='checkbox' />"
},
{
field : "name",
title : "Name",
width : "35%"
}]
});

My Java Script:

$('#rfgGrid input:checked.checkbox').each(function(){
var dataItem1= grid.dataItem($(this).closest('tr'));
grid.dataSource.remove(dataItem1);
}

By this only one row is got deleted even if I select many in the check box..

could any one guide me or help me wit code on http://jsfiddle.net or http://jsbin.com..

Regards,
Winds

Grid

answered on 26 Apr 2018

3 answers

1.1K+ views

Batch Editing and not save per row edits

I am creating an inline editable grid where I can add row after row or edit a row or delete a row and during that whole process, I don't want to save any changes to the DB. I am using batch:true in the dataSource. I also have the add/edit/delete/done/saveAll buttons outside the grid (not using the toolbars).

Currently, I am calling addNew() from the add button and a new row appears with the editable controls (dropdown, etc) - all good so far

When I click on the done button, I want the current row to stop editing and turn into static text in the grid, but not trigger the create/update/etc options in the dataSource.

When I click on the save button, that is when the changes should be sent to the DB via the dataSource settings.

How can I achieve this?

Thanks,

--Ed

Grid

answered on 26 Apr 2018

3 answers

95 views

Grid not displaying data

Trying to display data from a remote api sending jsonp and using server paging. For some reason the grid will not display the data. There are no error messages and Chrome/FF have no trouble parsing the jsonp. To get this to work I can change either the API or the web app, whatever it takes.

Here's the jsonp:

jQuery112403661894688946523_1524408300528([{"total":4,"d":[{"t_id":6,"thread_title":"The Latest news is not good","thread_body":"Here is a long description of the problem and no solution offerred. Here is more typical BB nonsense. Here's a personal story about more nonsense..","thread_created_dt":"2018-03-21T18:08:32.7651816","thread_edited_dt":"2018-03-21T18:08:32.7651816","up_count":0,"down_count":0,"posts_count":3,"posts_last_dt":"2018-04-17T02:21:02.5061225","posts_first_dt":"2018-03-21T18:20:18.1132348","u_id":2,"username":"scdecade","user_created_dt":"2018-01-06T15:52:50.0880940","ranking":1},{"t_id":4,"thread_title":"Lorum ipso lorum","thread_body":"Fets over on everyone.","thread_created_dt":"2018-01-06T16:45:05.1147048","thread_edited_dt":"2018-01-06T17:28:12.0919741","up_count":1,"down_count":1,"posts_count":58,"posts_last_dt":"2018-01-10T15:56:08.7811010","posts_first_dt":"2018-01-06T21:42:54.3239900","u_id":2,"username":"scdecade","user_created_dt":"2018-01-06T15:52:50.0880940","ranking":2}]}])

Here's the html body :

<body>
<br style="margin-bottom:240px;" />

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://ndpapi.azurewebsites.net/api/v/threads/active/5",
dataType: "jsonp",
type: 'GET'
},
parameterMap: function (options, type) {
if (type == "read") {
return {
n: options.page,
s: options.take
}
}
}
},
schema: {
total: "total",
data: "d",
model: {
id: "t_id",
fields: {
t_id: { type: "number" },
thread_title: { type: "string" },
thread_body: { type: "string" },
thread_created_dt: { type: "date" },
thread_edited_dt: { type: "date", nullable: true },
up_count: { type: "number" },
down_count: { type: "number" },
posts_count: { type: "number" },
posts_last_dt: { type: "date", nullable: true },
posts_first_dt: { type: "date", nullable: true },
u_id: { type: "number" },
username: { type: "string" },
tagline: { type: "string", nullable: true },
url: { type: "string", nullable: true },
user_created_dt: { type: "date", nullable: true },
ranking: { type: "number" }
}
}
},
pageSize: 2,
serverPaging: true,
serverFiltering: false,
serverSorting: false
});
$('#grid').kendoGrid({
dataSource: dataSource,
height: 800,
//toolbar: ["create", "delete", "update"],
filterable: false,
sortable: false,
pageable: {
refresh: true,
//buttonCount: 10,
//type: 'numeric',
pageSizes: true,
//pageSizes: [1, 2, 4, "all"],
info: true,
numeric: true,
previousNext: true
},
columns: [
{
field: "ranking",
title: "Rank",
format: "{0: #) }",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
},
{
field: "thread_title",
title: "Thread",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "120px"
},
{
field: "thread_body",
title: "Body",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "240px"
},
{
field: "up_count",
title: "+Votes",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
},
{
field: "down_count",
title: "-Votes",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
},
{
field: "posts_count",
title: "Posts",
headerAttributes: {
style: "font-weight: bold; text-align: center; font-size: 10px"
},
width: "40px"
}]
});
</script>
</body>

Grid

answered on 25 Apr 2018

2 answers

72 views

Page reloads when trying to expand row

Hello

I have a page with a kendoGrid that uses detail rows. The page works perfectly fine when I include all the javascript using script tags but I'm trying to move everything into webpack. Now everything looks correct but clicking a row just refreshes the page. It seems that kendo isn't registering a click event on the .k-icon anchors in the grid.I also have comboboxes and a chart on the page and the click events work on them.

I've spent a lot of time trying to debug this but I don't see any errors or warnings. Any help would be appreciated.

Grid

answered on 25 Apr 2018

1 answer

116 views

jQuery inside a tooltip

We have a kendo tooltip which loads content (a cshtml partial) via ajax. But it seems as though that partial doesn't have access to jQuery.

We get the old classic "$ is not a function" message in the browser console.

Is this a known issue? Is there a workaround?

To be specific, we want to host another tooltip from an object within the first tooltip.

Thanks,

George

ToolTip

answered on 25 Apr 2018

3 answers

1.9K+ views

ComboBox read data

I have a Kendo UI ComboBox with dynamic data from a server (>1000 objects).

The following restricts should apply to the control:

1) It should only load data when interacted with.

2) It should always return the first 20 object when the dropdown box is clicked

3) Filtering should work and return objects from the server that match the filter

4) An object might be added to the combobox when the page is loaded

My problem right now is that if I add an item to the dataSource on page load, the combobox will not trigger a read. Adding a binding to dropdown read will sometimes trigger read 2 times entailing flicker and weird behavior.

I have created a example here: https://dojo.telerik.com/ATEWEmuz/4

How do I make it so the combobox always trigger a read when the user click on the down arrow?

ComboBox

answered on 25 Apr 2018

1 answer

484 views

There is an issue with Value method when remove an option

Hi, I have the next code

HTML

<input id="dropdownlist" />

JAVACRIPT

$("#dropdownlist").kendoDropDownList({

dataTextField: "text",

dataValueField: "value",

dataSource: [

{text:"None", value:"Fruits"},

{text:"Apples", value:"Apples"},

{text:"Oranges", value:"Oranges"},

{text:"Lechus", value:"Lechus"},

{text:"Carrot", value:"Carrot"}

]

});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

dropdownlist.value("Fruits");

dropdownlist.value("Carrot");

removeItem(dropdownlist, "Oranges");

dropdownlist.value("Lechus");

function removeItem(dropdownlist, value){

var items = dropdownlist.dataSource.data();

var foundItem = {};

var i;

for (i = 0; i < items.length; i++) {

if (items[i].value == value) {

foundItem = items[i];

break;

}

if (foundItem) {

dropdownlist.dataSource.remove(foundItem);

}

If you run, the dropdown list has a issue, two options are selected.

If you comment code line removeItem(dropdownlist, "Oranges"); works well, I think that Remove method of dataSource is the problem.

I tested in DOJO with all versions but the problem is no solved.

Could are you tell me why does that occur ? and How could I solved this problem?

DropDownList

answered on 24 Apr 2018

5 answers

186 views

Copy/Paste multi cells pastes vertically

Hi Guys

I am having a strange issue with Edge Browser (other browsers work fine).

If you copy a set of cells (which are horizontal) into a new row, the copied values are copied vertically. This happens only with Ctrl + C & Ctrl +V options. If you copy using context menu and paste using Ctrl + V, it works fine.

You can also check this with the sample spreadsheet https://demos.telerik.com/kendo-ui/spreadsheet/index

Is this a know issue?

Spreadsheet

answered on 24 Apr 2018

7 answers

322 views

How to highlight items find by the filter

Is there a way to highlight items find by the filter in a treeList ?

I Want this behavior: http://jsfiddle.net/fosxumcb/ but using kendo provided filter

TreeList

answered on 24 Apr 2018

2 answers

527 views

Bind data in tab activate event not working

Hi

I'm having trouble binding the data when I change the tab. First time the data s binding perfectly fine but when I click any other tab is not working and if I return to the first one the data is there. here is part of my code I will appreciate any help

function onItemSelect()
{
var index = this.select().index();
currItem = dataSourceItem.view()[index].ItemId;
if (itemDatSourceCreated === false) {
createItemObsDataSource();
createItemDataObservable();
itemDatSourceCreated = true;
Observ.dataSource.read();
}
else
itemObserv.dataSource.read();
}

function createItemDataObservable() {
itemObserv = kendo.observable({
dataSource: dataSourceItemDat
});
}

TabStrip

answered on 24 Apr 2018