So the default behavior for the edit button inside each row of jqGrid is to open the form in the same page, right?
I need it to open another view, another URL.
I've managed to do this with the edit button that is located in the grid-pager, using the .navButtonAdd method. But I can't figure out how to do the same for the row buttons.
Can anyone help me, please?
jqGrid don't provide currently any simple way to replace the call of editing to another method or to include custom button. What you can do alternatively is "subclassing" $.fn.fmatter.rowactions function like I describe it in the answer. The $.fn.fmatter.rowactions function will be called on click on any from action buttons. So you can test whether the act parameter is "edit" or not. In case of non "edit" button you can forward the call to original $.fn.fmatter.rowactions function. In case of "edit" button you can do any your custom action instead.
UPDATED: The exact implementation depends a little from the version of jqGrid which you use because parameters and the value of this of the function $.fn.fmatter.rowactions are different for different versions of jqGrid. I created for you the demo which uses free jqGrid 4.8 (see readme and wiki). I used the following code for subclassing
var orgRowActions = $.fn.fmatter.rowactions;
$.fn.fmatter.rowactions = function (e, act) {
var $grid = $(this).closest("table.ui-jqgrid-btable"),
rowid = $(this).closest("tr.jqgrow").attr("id");
if (act === "edit") {
$grid.jqGrid("viewGridRow", rowid);
return false;
}
return orgRowActions.call(this, e, act);
}
As the result the "Edit" button starts "View" instead of edit form.
I plan to include more customization possibilities in the next version of free jqGrid. So one will be able to create custom inline icon without the tricks with subclassing.
Related
I'm using jqGrid jqGrid 4.14.2-pre
How to hide or show buttons depending on the condition
Not using css
loadComplete:function(data)
{
if(data.records > 100)
{
$('#grid').jqGrid('navGrid','#pager');
// hide $('#grid').jqGrid('inlineNav','#pager'); ?
}
else
{
$('#grid').jqGrid('inlineNav','#pager');
// hide $('#grid').jqGrid('navGrid','#pager'); ?
}
}
I'd recommend you to call both navGrid and inlineNav, but to hide unneeded buttons identifying there by id. You should just know simple rule how the ids will be build. jqGrid uses prefix build on the navigator button ("add_", "edit_", "refresh_", ...) and the grid id ("grid" in your case). See the old answer for more details. The method inlineNav do the same, but the ids of buttons will be build base on another rule: the grid id and the suffix "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button).
Let us you have grid with id="grid". To hide Add button added by navGrid you can use $("#add_grid").hide();. To hide inlineNav Add button you can use $("#grid_iladd").hide();.
I have a Telerik MVC grid that includes a boolean value, CreateIncident. For a new row, I want to set that value to true. For an edit, if the value is already true, I want to disable the checkbox. The Kendo UI apparently added a method to determine if the row is new, but the same call is not accessible in the MVC version. I can intercept the Insert and Update events in C#, but that's after they've clicked on the Save button. I can intercept the edit event in Javascript, which is where the above Kendo answer makes the call.
Alternately, if there is a better way to handle this, I'm open to suggestions.
The Actual Answer is
if (e.model.isNew())
so when isNew() is True then you have a new row else if it is False you are in edit Mode
I found an answer. Inside the javascript, I can do the following check:
// If this wasn't just created and Create Incident is checked, we already have a value for this, so disable it.
if (e.dataItem.CreateIncident == true && e.mode == 'edit') {
$('#CreateIncident').attr("disabled", "disabled");
}
e.mode is set to 'insert' for new items and edit for older ones. Handy, that.
I turn to you stackoverflow!
I'm using a kendo ui batch grid with InCell editing set and am wanting to know a way to set a particular column into edit mode.
I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(
In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(#"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");
Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}
Am I doing something wrong here because the particular column never goes into edit mode?
For reference, I can do the following successfully using the same "cell" variable:
var cellIndex = grid.cellIndex(cell);
and cellIndex gets assigned correctly, so I don't think its a problem of selecting the particular cell...
Anybody have any ideas?
Figured it out! It was the link that was the cause of the problem :( Swapping that to be an input button was the only thing that was needed. bangs head into desk.
Often I need to edit a single record in a database without the need to display the grid at all. I can hide the grid using CSS or jQuery. What I couldn't figure out is to directly go to the edit form from another webpage while hiding the grid.
I know it's kind of defeating the purpose of having a grid, but it's one of those cases where only a single record should be view and modified by the users similar to the Access single record mode. Is it even possible?
In general you can just hide so named "gbox" created over the grid and then call editGridRow method with the options which you like to have. As the result you will have the form which close to what you want. I am sure that you have to make some other small problems, but the first look can be like you want. Moreover you can scroll over the rows during editing.
The demo demonstrate what I mean. It displays the following form
The demo uses the following code
$("#list").jqGrid({
...
loadComplete: function (data) {
$(this).jqGrid("editGridRow", data.rows[0].id, {
modal: true,
overlay: 0, // create no overlay
onClose: function () {
return false; // don't allow to close the form
}
});
}
}).closest(".ui-jqgrid").hide();
This is one of the reasons I like to use my own custom edit forms, instead of the one built into jqGrid. Then you can just open it like you would from the jqGrid handler (with appropriate parameters of course), no grid required.
I have an MVC 3 Razor Telerik grid. I have an Edit comand on the row.
When a user clicks on Edit (this places the grid in Edit mode with an Update and Cancel button), I want to set a property for two of the columns to readonly.
When the user clicks on Cancel or Update, I want to set the columns back to full permission.
I know there must be some properties in the controller I should be able to set when the Edit button is pressed for this, but have not seen any docs on how to accomplish this.
How can I do this?
I'm using version 2011.2.712.340 of the controls.
What your describing above sounds a little bit confusing. The purpose of the readonly property is to ensure that when your row enters edit mode the columns that had readonly explicitly set cannot be edited, which seems to be what you're looking for. When in regular read mode all columns will have the same permission whether or not readonly was set, since you are just viewing the data and not editing.
Edit after clarification from comment:
Seems like you want to have this field editable when you are inserting a record, but not when you edit the row. Well, this can be done using some JavaScript. If you use Ajax binding (the only way to fire this event) you can do the following by subscribing to the onEdit client-side event:
...
.ClientEvents(clientEvents => clientEvents.OnEdit("onEdit"))
...
And here's the JavaScript:
<script type="text/javascript">
function onEdit(e) {
var form = e.form;
var mode = e.mode;
if (mode == "edit") {
var country = form.Country; //Country is a public property of my Model
country.disabled = true;
}
}
As you can see above, I get the form with the associated edited row and specifically grab the field associated with the property I do not want to be edited and disable that input element.