I use jqgrid.I want use label in navgrid and dynamic change label text.
I can add button by navButtonAdd.
how to add label in navgrid?
Use the caption property of jqGrid navGrid. As given in the Wiki you can see that for existing navGrid buttons you can use the property addCaption/editCaption in case of Edit and caption in case of others to set the label.
As
caption: "Delete",
Since this is a string value you can directly assign a variable dynamically to set the label
If you really need to modify the text of the buttons added by inlineNav or navGrid you have to do this manually because jqGrid has no simplified function for this.
First of all you can use Developer Tools of Internet Explorer (press F12 to start), Firebug or other tools to examine the navigator buttons. You will see something like
The id of every button are constructed from the id of the grid and some button specific suffix. For example the "Edit" button added by inlineNav is "list_iledit" where "list" is the id of the grid and the suffix "_iledit"has the Edit button. To change the texts later you can use the code like
var $div = $("#" + grid[0].id + "_iledit>.ui-pg-div");
var $icon = $div.find(">span.ui-icon");
$div.text("edit"); // new text of the button
$div.append($icon);
$div.parent().attr("title", "my custom edit tooltip"); // new tooltip
You can use something like this:
.navGrid('#pager_list_1', {
//other codes
}).navButtonAdd('#yourpagerId', {
caption: "Del",
url: delUrl,
buttonicon: "ui-icon-trash",
onClickButton: function (response) {}
}
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 jqGrid and in which there is a column which holds an image. When the user click on the edit icon from the page then in the edit window the photo is visible and that has been done by the following command in the edit section of the navGrid -
recreateForm: true,
beforeInitData: function () {
var cm = jQuery("#list3").jqGrid('getColProp', 'img'),
selRowId = jQuery("#list3").jqGrid('getGridParam', 'selrow');
cm.editoptions.src = '/BDED_WEB/resources/images/user'+selRowId+'.jpg';
}
But if I want to go back and forward to the data set by pressing the previous and next arrow in the edit window, then all the data changed but the image is not changing. That means the beforeInitData method is not getting called when the user is clicking on pData or nData button.
How can I change the image also in the edit window when the user press the next and previous arrow buttons?
It looks like you use the demo which I created for the answer.
To implement changing of the image on clicking on the "Next", "Prev" buttons of the edit form (marked yellow on the image below)
one can use afterclickPgButtons callback which set src attribute.
afterclickPgButtons: function () {
var $self = $(this),
selRowId = $self.jqGrid("getGridParam", "selrow");
// "img" below is the column name which have edittype: "image"
$("#img").attr("src", "/BDED_WEB/resources/images/user" + selRowId + ".jpg");
}
The demo demonstrates the modified version of the original demo.
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
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
I tried
grid.navGrid("#grid_toppager",{},
{
bSubmit: 'Submit',
editCaption: 'Edit',
title: 'Save changes (Ctrl+S)' } );
but Save changes (Ctrl+S) tooltip does not appear if mouse is over Submit button. how to show tooltip in edit and add form submit buttons ?
There are no title option of navGrid method. There are only options like edittitle or addtitle which are not what you need.
What you need is to set title attribute on the "Submit" button which you have to do directly inside of beforeShowForm for example. See the demo.
If u want to add tooltip on your custom jqgrid buttons then just add title .
.navButtonAdd('#discPgr',{ title:"Add Discount" });