This is what I am trying to achieve:
Whenever a user selects a row for editing, I want to check the value of that row for a particular column. If the value that I am looking for is found then I want to display a message and close the edit dialog box. So far, This is what I have come up with:
// Options for EDIT
{height:280,mtype: "POST",closeAfterEdit: true,reloadAfterSubmit:true, url:'gridedit.jsp',
recreateForm: true,
//set some properties beofre the dialog box is seen by the user
beforeShowForm: function(form) {
/*$('#adate',form).attr('readonly','readonly');
$('#account',form).attr('hidden','true');*/
$('#adate',form).hide();
$('#account',form).hide();
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
var value = $("#list").jqGrid('getCell', sel_id, 'mod');
if(value=='n'){
alert('NOOOOOOOOOOOOOOO!')
}
}
}
after the alert, how do i close the edit dialog box ? right now the dialog box appears after the alert.
found the answer:
i just have to write
form.close();
after the alert
Related
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
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 newbie to jqgrid. and for one requirement, I need to hide edit form that poped up when we click edit button of navbar(pager). How can I hide it based on condition.
on click of Edit button, I am checking how many rows are selected by user. if it is more than one, I need to hide edit form and need to show alert message that, they can only edit one record.
I did following but did not work.
beforeShowForm: function(form){
form.hide();
$("#editmodlist").css("display", "none"); // where I hardedcoded div that surounds edit form
}
just adding my solution here for better formatting of code.
beforeInitData: function(form){
var selRowIds = jQuery('#list').jqGrid('getGridParam', 'selarrrow');
if(selRowIds.length>1)
{
alert("Error");
return false;
}
else
{
return true;
}
}
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 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) {}
}