How can I get selected row data in kendo - javascript

I'm using this context menu example.
I used the context menu select event like this:
menu = $("#menu").kendoContextMenu({
target: "#listview-context-menu",
filter: ".product",
animation: {
open: { effects: "fadeIn" },
duration: 500
},
select: onSelect
});
function onSelect(e) {
console.log(e);
}
It's working fine, but now I'm getting the current menu object. How can I get selected row data instead?
For example, I have right-clicked on "RE: New version of Telerik Trainer (1st one record)" and then click on reply to sender, so how can I get row object of current row.

You can get the reference to the datarow by using the snippet below
function onSelect(e) {
var lst =$("#listview-context-menu").getKendoListView();
var row = lst.dataItem(e.target);
console.log(row);
}
Please refer the fiddle here for a demo

Related

Showing Customized Context Menu on clicking shapes(objects of fabric.js) in Canvas

I'm using fabric.js to create shapes on canvas . on right click on the shapes i want to show a context menu based on the shape selected. I'm able to capture the right click event and find which object the right click is done. but i don know how to show a context menu from a javascript (something like contextmenu.show). below is the code which im using to find the object. Any one please help.
$('.upper-canvas').bind('contextmenu', function (e) {
var objectFound = false;
var clickPoint = new fabric.Point(e.offsetX, e.offsetY);
e.preventDefault();
canvas.forEachObject(function (obj) {
if (!objectFound && obj.containsPoint(clickPoint)) {
objectFound = true;
// here need to set a customized context menu and show it
// but dont now how to do so.
}
});
});
Using jquery-ui-contextmenu you could instantiate a context menu on the canvas and modify the menu entries depending on the target.
(Note that the code is untested, but it should show the idea. Have a look at the API docs for details.)
$(document).contextmenu({
delegate: ".upper-canvas",
menu: [...], // default menu
beforeOpen: function (event, ui) {
var clickPoint = new fabric.Point(event.offsetX, event.offsetY);
// find the clicked object and re-define the menu or
// optionally return false, to prevent opening the menu:
// return false;
// En/disable single entries:
$(document).contextmenu("enableEntry", ...);
// Show/hide single entries:
$(document).contextmenu("showEntry", ...);
// Redefine the whole menu:
$(document).contextmenu("replaceMenu", ...);
},
select: function(event, ui) {
// evaluate selected entry...
}
});

How to stop Kendo KO Grid from auto-scrolling

I have a kendo knockout grid inside a kendo window, the grid is pretty basic, has a checkbox column, and 3 other text columns. The check box column is binded with an observable property in the records Model of the grid, like
$model.isChecked = ko.observable(false);
The datasource of the grid is an observable array of a given javascript model.The grid has pagination with a page size of 10 records, and is scrollable.
The problem I'm having is that for some weird reason, when I click on a checkbox that is at the bottom of the grid, the grid scrolls up to the top, hiding the record I just checked.
I have other grids with the same logic behind and this behavior doesn't happen, I've tried different things and it seems every time I change an observable property of record model, the grid does the same. I also tried subscribing to the scroll event of the grid but I wasn't able to find a difference from me triggering the scroll or the grid doing it by itself.
I also tried what is suggested in this: other question but the behavior I got is not good because you see like a flicker, the grid scrolls to the top and then scrolls to the selected row.
So, have any of you faced a similar problem?
Thanks,
Try this it worked for me
In dataBound and dataBinding events of grid
dataBound = function (e) {
var sender = e.sender;
sender.content.scrollTop(sender.options.gridTop);
}
dataBinding = function (e) {
var sender = e.sender;
sender.options.gridTop = sender.content.scrollTop();
};
Well actually, after some more debugging I was able to fix it, it was a combination of 2 things, first I had to remove the type declaration from the datasource:
dataSource: {
type: 'knockout',
pageSize: 10,
page: 1,
watchable: {
filter: dataSourceWithFilters
},
schema: {
model: {
fields: {
'effectiveFrom()': { type: 'date' },
'effectiveTo()': { type: 'date' },
'isChecked()': { type: 'boolean' } // <- this line was removed
}
}
}
}
And then, I had some dates in the model, but I had them as computed "listening" to an observable variable in the same model, and every time that observable variable had a value, I returned the dates
$model.link = ko.observable();
$model.effectiveFrom = ko.computed(function () {
if ($model.link()) {
return $model.link().effectiveFrom();
}
return null;
});
$model.effectiveTo = ko.computed(function () {
if ($model.link()) {
return $model.link().effectiveTo();
}
return null;
});
It seems this was making the grid to rebind itself every time when any of the date values changed, so I changed that code for this:
$model.link = ko.observable();
$model.link.subscribe(function (value) {
if (value) {
$model.effectiveFrom = ko.observable(value.effectiveFrom()).withDateFormat('MMM-DD-YYYY');
$model.effectiveTo = ko.observable(value.effectiveTo()).withDateFormat('MMM-DD-YYYY');
}
});
$model.effectiveFrom = ko.observable().withDateFormat('MMM-DD-YYYY');
$model.effectiveTo = ko.observable().withDateFormat('MMM-DD-YYYY');
And with those changes the grid stopped scrolling to the top.
Thanks for the help.

Persistance of expanded detail Jquery Datatables

I have an asp.net web application that has the option to provide pseudo-realtime data about an automation machine. I am using the JQuery Datatables with an ajax datasource. I have an interval that reloads the data source every set amount of time (which updates my datatable asynchronously from the db) and then redraws the table.
I am also using the responsive plug in for the table, so the web app can be accessed well from phone sized devices. I have set this up so that it drops all of the columns but the first(primary) column and adds the other columns a child (detail) record. This is where my app breaks and my phone users loose usability. This is because whenever the table redraws detail records snaps close. Therefore if a phone user is looking at the table and has expanded the detail of a record the record will snap shut as soon as the table is redrawn.
My solution would be to capture the opened detail and then at the time of redraw re-open the detail. I believe I have captured the detail successfully but everything I have found to try to programmatically expand it has not worked.
$(document).ready(function () {
var row;
var tr;
var table = $('#myDataTable').DataTable({
autoWidth: false,
processing: false,
stateSave: true,
sAjaxSource: '#Url.Action("GetDropData", "Drops")',
"columns":
[
{ "width": "10%" },
{ "width": "50%" },
{ "width": "40%" }
]
});
var timer = setInterval(function () {
table.ajax.reload(null, false);
}, 1000);
//flag is used to determine if last click expanded a detail
var flag = false;
//If table is clicked find closest 'tr'
table.on('click', 'tr', function () {
tr = $(this).closest('tr');
row = table.row(tr);
//was click a detail expansion
if (row.child.isShown()) {
flag = true;
}
})
// event fires after ajax call completes (reload and redraw)
$('#myDataTable').on('xhr.dt', function () {
if (flag) {
$(tr).addClass('row_selected');
}
});
});
If you can tell why the detail isn't expanded or a better way solution please let me know. I do have a temporary solution in place that just pauses the interval when the detail button is clicked but this makes my phone users table not update.
If you're using Datatables 1.9 and earlier use fnDrawCallback().
If you're using Datatables 1.10+ use drawCallback().
Both of these callbacks go in your datatables initializer and can take your row detail opening code.
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
//open detail row here
}
} );
} );

Reloading kendo ui grid the row item code executes an error

I've a web application with kendo ui grid. The grid is load with Bakbone.js when I click a button and I can remove a row with the next code:
$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
var item = grid.dataItem($(this).closest("tr"));
var check = confirm("Do I delete:" + item.City );
if (check) {
grid.removeRow($(this).closest("tr"));
}
});
The cofiguration of the button to delete:
command: [
"edit", {
name: "destroy",
text: "Remove",
className: "ob-delete"
}]
When I reload the content (grid) pushing the button, if I want to delete a row, item.City produce an error.
The complete example here
Edited:
Solved here! Thanks to #Whizkid747!
To add in
command: [ "edit",{
//...
click: deleteRow
}]
Then, when button is clicked a function is called:
function deleteRow(e){
var item = this.dataItem($(e.currentTarget).closest("tr"));
var check = confirm("Do I delete:" + item.City );
if (check) {
grid.removeRow($(e.currentTarget).closest("tr"));
}
}
Not sure, but your grid is actually not the same grid but the old (before the reload) one and second grid is created.
Following line changed:
var item = $('#grid').data().kendoGrid.dataItem($(this).closest("tr"));
updated version.
I suggest you to just change the data through the dataSource.data() method instead of recreating the Grid. Or change your logic so you actually destroy the widget before recreating it.

Kendo UI ListView Drag - Drop

I have two Kendo UI ListViews. I am able to get the list of available options to load and display values. I am also able to get the drag functionality to work. The issue is the drop functionality of the destination. I can get the second ListView to register as a dropTarget, but I cannot determine how to add the draggable to the destination ListView.
Here is the relevant code:
var groupDataSource = getReadGroupsDataSourceFor(2819);
try {
var readgroups = $("#availableReadGroups").kendoListView({
selectable: "single",
navigatable: false,
template: "#if(!IsSelectedGroup) {# <div style='font-size:13px;padding-left:5px;padding-top:5px;'>${GroupName}</div>#} else {# <div class=\"k-state-selected\" style=\"font-size:13px;padding-left:5px;padding-top:5px;\" aria-selected=\"true\">${GroupName}</div> #}#",
dataSource: groupDataSource
});
var selectedGroups = $("#selectedGroupsValues").kendoListView({
selectable: "single",
navigatable: false,
template: "#if(!IsSelectedGroup) {# <div style='font-size:13px;padding-left:5px;padding-top:5px;'>${GroupName}</div>#} else {# <div class=\"k-state-selected\" style=\"font-size:13px;padding-left:5px;padding-top:5px;\" aria-selected=\"true\">${GroupName}</div> #}#",
});
readgroups.kendoDraggable({
filter: "div[role=option]",
hint: function (row) {
return row.clone();
}
});
selectedGroups.kendoDropTarget({
drop: function (e) {
var lvObject= selectedGroups.data();
lvObject.kendoListView.dataSource.add(e.draggable);
}
});
} catch (err) {
alert(err);
}
I finally came up with an answer and got it to work in IE and FireFox on my machine; I couldn't get this solution to work in jsFiddle, though, and I can't figure out why.
Here is the code:
selectedGroups.kendoDropTarget({
drop: function (e) {
var lvObject= selectedGroups.data();
lvObject.kendoListView.dataSource.add(readgroups.data("kendoListview").dataSource.getByUid(e.draggable.hint.data().uid));
}
});
The hint property apparently contains the jQuery object which in turn has a data method. When you execute the data method, the only thing returned is an object with the property uid. Using this, you can search the dataSource of the draggable's origin for the data item. The data item is what you want to supply to the add method of the destination's dataSource.

Categories