Can anyone please tell how to get the click event of an empty grid.
i have an empty grid, and after inserting i need to refresh the grid for that i use a right click menu in the grid.
So at first there will be no data and need a click event of the grid,
Thanks,
Devan
It seems to me that you should trigger 'reloadGrid' after the filling of the grid.
If you do need implement 'click' or 'right click' event handler to the whole grid and not only the grid body you can use gbox div which will be constructed by jqGrid and which includes all jqGrid elements (see here for details):
var myGrid = $("#list");
// ...
$('#gbox_'+myGrid[0].id).click(function(e) {
alert("click!");
}).bind('contextmenu', function(e) {
alert("right click!");
});
See the corresponding demo here.
Related
Is there any way to hide the nav-bar in jqgrid and reappear on selecting the row?
And how to reload the grid dynamically after selecting new value
To show or to hide the navigator bar one need to call show/hide jQuery-method on the div having "navtable" class. The div contains all buttons on the bar. If you use, for example, pager: "#mypager" then to hide the navigator bar one need do the following:
$("#mypager").find(".navtable").hide();
In more common case you can use the method
var visibilityNavBar = function (show) {
var pagerSelector = $(this).jqGrid("getGridParam", "pager");
$(pagerSelector)
.find(".navtable")[show ? "show" : "hide"]();
};
and to call it inside of onSelectRow callback
onSelectRow: function (rowid, status) {
visibilityNavBar.call(this, status);
}
To hide the navigator bar initially you can call
visibilityNavBar.call($("#list")[0], status);
directly after calling of navGrid method.
The demo https://jsfiddle.net/OlegKi/s2qkh9mn/ demonstrates the code. On selecting of a row the nav-bar will be displayed, on deselection it will be hidden.
I have a dependent column that needs to be editable based on value of the first cell. How can do this using the beforeedit event of kendo grid.
I wish to avoid closing the cell in edit event of kendo grid.
Below is a sample
https://dojo.telerik.com/enodEwub
In order to achieve this when "Inline" edit mode is used you can use the Grid's cancelRow() method.
$("#grid").kendoGrid({
//....
edit: onEdit
});
function onEdit(e) {
//your custom logic
$('#grid').data("kendoGrid").cancelRow();
}
Hope that helps!
Using this I can display a menu by right clicking a cell:
// right click context menu
grid.onContextMenu.subscribe(function (e) {
e.preventDefault();
var cell = grid.getCellFromEvent(e);
//grid.setSelectedRows(cell.row);
$("#contextMenu")
.data("row", cell.row)
.css("top", e.pageY)
.css("left", e.pageX)
.show();
$("body").one("click", function () {
$("#contextMenu").hide();
});
});
However I would like the row to be selected, both as visual confirmation that the correct row has been right-clicked, and because some of the menu items use the selected row for their functions.
This:
grid.setSelectedRows(cell.row);
doesn't work. What is the correct way?
It might be as simple as the fact that setSelectedRows takes an array of row indexes.
Try
grid.setSelectedRows([cell.row]);
I have a grid that has child grid for each item, when i add a new item to the main grid, there is a stub for the child (with the toolbar etc and an empty grid for the child), I would like to hide the child grid when adding new one, i know i need the edit event, i just dont know how to get reference to the detailgrid for the item that the row was just created for input.
edit event has e.sender, e.container, e.model, first 2 reference the main grid of course as the event is raised by the main grid
The required behavior is not supported out of the box, however you can for example attach click event handler to the expanding arrows in the Grid. In the event handler you can prevent the expanding if current model is new. Please check the example below:
//Change Employees with your grid name
//the grid should have model ID defined
$("#Employees table").on("click", ".k-hierarchy-cell a", function (e) {
dataItem = $("#Employees").data("kendoGrid").dataItem($(e.srcElement).closest("tr"));
//check if is new record
if (dataItem.isNew()) {
e.preventDefault();
e.stopImmediatePropagation();
}
})
UPDATE (as requested): The above code should be executed in script tag (wrapped in document "ready" event handler) which is placed just after the Grid initialization code.
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");