I want to implement draggable rows feature in jqGrid and it's working also using option
$('#MyGrid').jqGrid('gridDnD', {
connectWith: '#MyGrid2'});
Now, my client want to show "Drag here" text in target grid row at the position where the row will be dragged from existing to new one, how can I show this text while dragging row from source to target? Any help is appreciated...
I find your question interesting. So I modified the old demo from the answer and created the demo which demonstrates a possible implementation. The grid during dropping looks like on the picture below:
It uses the following code
$("#grid1").jqGrid("gridDnD", {
connectWith: "#grid2",
drop_opts: {
activeClass: "",
hoverClass: ""
},
onstart: function (ev, ui) {
ui.helper.addClass("ui-widget ui-widget-content")
.css({
"font-size": "11px",
"font-weight": "normal"
});
},
onstop: function (ev, ui) {
$("#dragHelper").hide();
},
droppos: "afterSelected", // "beforeSelected"
beforedrop: function (e, ui, getdata, $source, $target) {
var names = $target.jqGrid("getCol", "name2");
if ($.inArray(getdata.name2, names) >= 0) {
// prevent data for dropping
ui.helper.dropped = false;
alert("The row \"" + getdata.name2 + "\" is already in the destination grid");
}
$("#dragHelper").hide();
$("#grid2").jqGrid("setSelection", this.id, true, e);
},
ondrop: function (ev, ui, getdata) {
var selRow = $("#grid2").jqGrid("getGridParam", "selrow"),
$tr = $("#" + $.jgrid.jqID(selRow));
if ($tr.length > 0) {
$("#grid2").jqGrid("setSelection", $("#grid2")[0].rows[$tr[0].rowIndex + 1].id, true);
}
}
});
// make every row of the destination grid droppable and select row on over
$("#grid2 tr.jqgrow").droppable({
hoverClass: "ui-state-hover",
over: function (e, ui) {
$("#grid2").jqGrid("setSelection", this.id, true, e);
$("#dragHelper").show().position({my: "right center", at: "left bottom", of: $(this)});
}
});
I reserve some place for the tooltip "Drag here ↣" on the left of the grid and marked the row under the moved row additionally to make the position of the dropped row mostly clear. I used free jqGrid which have support of "afterSelected" and "beforeSelected" position of addRowData originally suggested in the answer. So I used droppos: "afterSelected". The dropped rows will be inserted after the selected row.
Related
Here I have a code to update a cell contet when pressing a button.
It works fine, but it doesn't set the flag, that indicates, that the cell has been changed.
It should look like this with the litle red triangle:
The code:
<a id="button" href="#">Click me</a>
<div id="grid"></div>
<script>
var dataSource, grid;
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ category: "Beverages", name: "Chai", price: 18},
{ category: "Seafood", name: "Konbu", price: 6}
],
})
grid = $("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
}).data("kendoGrid");
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
});
});
</script>
Update:
Here is the update based on #tstancin: Kendo example.
Thank you for the answer - I had thought of it to.
I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?
Kind regards from Kenneth
If that's all you want then you should expand your button click code with the following:
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
$("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
$("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});
But if you, for instance, manually change the value of name column from Chai to something else, and then click the click me button, the dirty marker in the name column will disappear.
You should use flags for every cell and set them before data.set(). Then, in the grid's dataBound event you should inspect every cell's value and assign the dirty marker if it's needed. For manual changes you should handle the save event and set flags there.
I wrote a script that makes it posible to use a call like this:
SetCellData(id, columnName, value);
So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.
function SetCellData(id, columnName, value) {
var dataItem = grid.dataSource.get(id);
dataItem.set(columnName, value);
var columnIndex = GetColumnIndex(columnName);
if (columnIndex > -1) {
var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')
if (!cell.hasClass("k-dirty-cell")){
cell.prepend("<span class='k-dirty'></span>");
cell.addClass("k-dirty-cell");
}
}
}
function GetColumnIndex(columnName) {
var columns = grid.columns;
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName)
return i;
return -1;
};
I have the code here : example
Using JQGrid-4.3.3 with jquery.contextmenu.js plugin.
I'm using onContextMenu inorder to dynamically show the menu according to a specific cell value inside the selected row. (return true or false).
The problem is after the menu is shown, when I right click another row the menu that was open for the previous row is not closed. If I don't want to show the menu for a row and the menu was opened before , it can't be closed until I show the menu again in another row, or when I left click anywhere in my page.
How can I close the old menu once a onContextMenu returns false ?
UPDATE:
this is my code:
function createGridContextMenu(grid_)
{
$("tr.jqgrow" , grid_).contextMenu('grid_contextmenu' , {
bindings: {
'item1': function(trigger)
{
}
},
menuStyle: { font:'11px Arial, Verdana, Helvetica',
border: '1px solid #000' ,
width: '130px'
},
itemStyle: { border: 'none', padding: '4px' },
itemHoverStyle: { backgroundColor: '#C0C0C0', border: 'none'},
onContextMenu : function(event, menu)
{
var selected_row_id = $(event.target).parent("tr").attr("id");
var row = grid_.jqGrid('getRowData',selected_row_id);
if(row.status == 1)
{
return false;
}
else
{
grid_.setSelection(selected_row_id, true);
return true;
}
},
onShowMenu: function(event, menu)
{
return menu;
}
});
}
I'm calling createGridContextMenu
inside
loadComplete: function()
{
createGridContextMenu($(this));
},
Thank's In Advance.
I suppose that the reason of the problem is the wrong place where you create context menu. The second problem is setting separate context menus on different rows of the grid.
The callback loadComplete will be executed every time on loading of the grid, paging, sorting and so on. The current implementation uses $("tr.jqgrow" , grid_).('grid_contextmenu' , {...});. On the other side you can set the context menu of the whole <table> instead of setting on every <tr> of the body of the table. Because <table> will be not recreated on every filling of the grid you can do the following
// create the grid
$("#grid").jqGrid({
...
});
// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
...
});
I hope that such changes will solve your current problem. I would recommend you additionally to update jqGrid which you use to the current version 4.6.0 which you can download from trirand.
UPDATED: You can hide context menu on leaving it. To do this you can modify the lines 57-59 of the code of jquery.contextmenu.js from
.bind('click', function(e) {
e.stopPropagation();
});
to
.bind('click', function(e) {
e.stopPropagation();
}).mouseleave(function (e) {
if (e.pageX === -1 && e.pageY === -1) {
return; // over tooltip
}
hide();
});
Alternatively you can do the same without modification of jquery.contextmenu.js. You need just to do the same after calling of contextMenu. The final code will be
// create the grid
$("#grid").jqGrid({
...
});
// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
...
});
// register mouseleave handler which close the menu
$("#jqContextMenu").mouseleave(function (e) {
if (e.pageX === -1 && e.pageY === -1) {
return; // over tooltip
}
$(this).hide().next().hide();
});
In my Kendo grid I am trying to put the 'create new item' button in the header (title) of the command column instead of the toolbar. Here is part of my grid definition:
var grid = $("#grid").kendoGrid({
columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } },
headerTemplate: "<a onclick ='NewItemClick()' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"},
My question is: how to create a new row and put that row in edit mode in 'NewItemClick()'
There are some troublesome scope issues when you try to bind the click event in the template definition itself.
Instead, it is easier to assign the link an ID, and then bind the click event later. Notice that I've given it id=create.
headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"
Then in document ready, I bind the click event:
$("#create").click(function () {
var grid = $("#grid").data("kendoGrid");
if (grid) {
//this logic creates a new item in the datasource/datagrid
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.page(dataSource.totalPages());
grid.editRow(grid.tbody.children().last());
}
});
The above function creates a new row at the bottom of the grid by manipulating the datasource. Then it treats the new row as a row "edit". The action to create a new row was borrowed from OnaBai's answer here.
Here is a working jsfiddle, hope it helps.
I would like to complete on gisitgo's answer. If your datasource takes some time to update, when calling page(...), then the refresh of the grid will cancel the editor's popup. This is averted by binding the call to editRow to the "change" event :
var grid = $("#grid").data("kendoGrid");
if (grid) {
//this logic creates a new item in the datasource/datagrid
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.one("change", function () {
grid.editRow(grid.tbody.children().last());
});
dataSource.page(dataSource.totalPages());
}
NB: This approach will yield problems if your grid is sorted because the new row will not necessarily be at the end
I have found that issues might appear if you have multiple pages, such as the inserted row not opening up for edit.
Here is some code based on the current index of the copied row.
We also edit the row based on UID for more accuracy.
function cloneRow(e) {
var grid = $("#grid").data("kendoGrid");
var row = grid.select();
if (row && row.length == 1) {
var data = grid.dataItem(row);
var indexInArray = $.map(grid.dataSource._data, function (obj, index)
{
if (obj.uid == data.uid)
{
return index;
}
});
var newRowDataItem = grid.dataSource.insert(indexInArray, {
CustomerId: 0,
CustomerName: null,
dirty: true
});
var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']");
grid.select(newGridRow);
grid.editRow(newGridRow);
//grid.editRow($("table[role='grid'] tbody tr:eq(0)"));
} else {
alert("Please select a row");
}
return false;
}
I've added a custom icon using below code in jqgrid Actions column. When the cutom icon is clicked, a pop up is opened with Textarea, Save and Close buttons. When I click Save button I wanted to save the text entered in textarea to a hidden field column in jQgrid. I tried 'setRowData' and 'setCell' properties but nothing works. Am I missing something here?
afterInsertRow: function (rowid, rowdata, rowelem) {
$(this).triggerHandler("afterInsertRow.jqGrid", [rowid, rowdata, rowelem]);
//...//
//Start: Code for Notes Icon in Actions column
var iCol = getColumnIndexByName(grid, 'actions');
$(this).find(">tbody>tr#" + rowid + ">td:nth-child(" + (iCol + 1) + ")")
.each(function () {
$("<div>", {
title: "Custom",
mouseover: function () {
$(this).addClass('ui-state-hover');
},
mouseout: function () {
$(this).removeClass('ui-state-hover');
},
click: function (eve) {
$("#change_dialog").dialog({
buttons: {
'Save': function () {
var selRow = $(eve.target).closest("tr.jqgrow").attr("id");
var txtNotes = $("#mytext").val();
$("#gridJQ").setRowData(selRow, { 'notesHidden': txtNotes });
$("#gridJQ").jqGrid('setCell', selRow, 'notesHidden', txtNotes);
$("#gridJQ").jqGrid('setRowData', selRow, 'notesHidden', txtNotes);
$(this).dialog("close");
},
'Close':function() {
$(this).dialog("close");
}
}
});
return false;
}
}
).css({ "margin-right": "5px", float: "left", cursor: "pointer" })
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
Instead of using this code to get the row
var selRow = $(eve.target).closest("tr.jqgrow").attr("id");
Try something a more direct such as
var selRow = $("#gridJQ").jqGrid('getGridParam', 'selrow');
Or even just var selRow = rowid.
Does that help at all?
I have a jqGrid. I would like to highlight a particular cell from a row, ondbClickRow. This would make the task of copying the value of a cell onto clipboard, easy for users. Can someone guide me on how to do this? Thanks!
In general it would be possible, but you should probably switch off row selection to see highlighting immediately. So the code will be about the following:
beforeSelectRow: function () {
return false;
},
ondblClickRow: function (rowid, iRow, iCol, e) {
$(e.target).toggleClass('ui-state-highlight');
}
As the result you can have the grid like
see the corresponding demo here
UPDATED: If you need select the text in the grid cell you can use the idea described here. In case of usage inside of jqGrid the code could be the following:
var selectText = function (element) {
var doc = element.ownerDocument, selection, range;
if (doc.body.createTextRange) { // ms
range = doc.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
if (selection.setBaseAndExtent) { // webkit
selection.setBaseAndExtent(element, 0, element, 1);
} else { // moz, opera
range = doc.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
}
};
$("#list").jqGrid({
// ... jqGrid options
ondblClickRow: function (rowid, iRow, iCol, e) {
selectText(e.target);
}
});
The next demo demonstrate this: