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");
Related
I have a kendo grid inside kendo grid (using integrated grid). I have implemented drag n drop in both grid using grid sortable provided by kendo. But it is only work with one grid at a time. If I commented one of them, second grid reordering perfectly. I want that user can able to drag n drop both grid. Please help.
I was missing filter option in parent grid.
var grid = mygrid.data("kendoGrid");
grid.table.kendoSortable({
handler: ".handler",
**filter: ">tbody >tr:not(.k-detail-row)",**
hint: function (element) { //customize the hint
var grid = $("#gridProductGroup").data("kendoGrid"),
table = grid.table.clone(), //clone Grid's table
wrapperWidth = grid.wrapper.width(), //get Grid's width
wrapper = $("<div class='k-grid k-widget'></div>").width(wrapperWidth),
hint;
table.find("thead").remove(); //remove Grid's header from the hint
table.find("tbody").empty(); //remove the existing rows from the hint
table.wrap(wrapper); //wrap the table
table.append(element.clone()); //append the dragged element
//table.append(element.next().clone());
hint = table.parent(); //get the wrapper
return hint; //return the hint element
},
Filter differentiate between detail grid and parent grid.
It is working for me
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 grid and its build-in functionality for creating and updating items.
I'm looking for a way to change Editor labels (title and buttons Update/Cancel).
I found an answer here (Change Button text in Kendo Ui Grid Popup Window) where OnaBei explains how to change title.
However, I still cannot figure out the way to change button names based on whether item is being added or being edited. The same with title, is it a way to change it based on "create"/"update" state?
I assume that it can be done with javascript, but it will probably be a hack and dirty solution.
This can be done in the edit event of the grid. The model event argument has a isNew method which will return true in "create" state. Here is some sample code:
edit: function(e) {
var title = "Edit mode";
if (e.model.isNew()) {
title = "Insert mode";
}
var wnd = e.container.data("kendoWindow");
wnd.title(title);
}
And a live demo: http://jsbin.com/USUpAZUT/1/edit
I have a RadGrid in with all rows in EditForm mode. This Radgrid has virtual scrolling. I need to jump (scroll) to a specific row.
I've tried several options. To put a row in select is not applicable in this case. I now have tried:
RadScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);
in the ItemDataBound, but the :
function scrollItemToTop(itemID) {
$('.rgVragenPanel').scrollTo(0, $telerik.$($get(itemID)).offset().top);
}
does not seem to work.
Any thoughts on how to best tackle this?
try this Scrolling to the Selected Item
I select the item in the code behind in the databound event.
Set one of the items in the control as selected.
Provide a handler for the client-side GridCreated event.
In the event handler, locate the selected row using the GridTableView object's get_selectedItems() method.
Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.
Use the DOM element for the row to check if it is visible in the scrollable region. If it is not, set the scrollTop property of the scrollable region to scroll the grid so that the selected row is showing.
The following example demonstrates this technique:
CopyJavaScript
<script type="text/javascript">
function GridCreated(sender, eventArgs) {
//gets the main table scrollArea HTLM element
var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
var row = sender.get_masterTableView().get_selectedItems()[0];
//if the position of the selected row is below the viewable grid area
if (row) {
if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
//scroll down to selected row
scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
}
//if the position of the the selected row is above the viewable grid area
else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
//scroll the selected row to the top
scrollArea.scrollTop = row.get_element().offsetTop;
}
}
}
Notice : The function does not work on page postbacks. you should triger directly from javascript (i notice that the ongridcreated event of the grid is not fired on the Telerik example).
So a better way is to handle the scrolling with JQuery like this :
1) Create a function for a specific grid
2) At the telerik code replace the sender with var sender = $find("<%= RadGrid1.ClientID%>");
3) $(window).load(function () {
thefunctiontoscrollthegrid();});
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.