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.
Related
I have an Interactive Grid on my page that allows the rows to be selected. When the user clicks on the button, the page branches out to another page. I need to create a validation to ensure the page only branches out if some records were selected. What is the best way to do that?
I have no pretension my way is the best way, but it works:
You'll need to give your button a static ID (mine will be LinkButton).
You should then create a Dynamic Action on your grid on the event Selection change [Interactive Grid]. Make a True Action that Execute JavaScript Code, that code bit should do :
if(this.data.selectedRecords[0] != undefined) {
//This is what happens when rows are selected
document.getElementById("LinkButton").disabled = false;
}
else {
//This is what happens when no rows are selected
document.getElementById("LinkButton").disabled = true;
}
**Probably not the best solution, there most likely is a way of achieving this using the Grid Widget from APEX'S API, but I wasn't able to return any object from my grid using it. My answer would disable the button if any row is selected in any grid (if you have multiple reports/grids that is) in that page, instead of in a specific Interative Grid.
My answer was highly inspired by this person: http://thejavaessentials.blogspot.com/2017/03/getting-selected-rows-in-oracle-apex.html and this post : Disabling and enabling a html input button
**I tested it on APEX 19.1, but as the person above was working on APEX 5, my guess is that it should work on it too.
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.
I'm using Telerik Kendo UI Professional. I have a grid with an edit template, and several controls on it. I ran into a weird little requirement, where I needed to programmatically set the value of one of the controls, based on another control being changed. The actual change of value seems to happen just fine. However, when I submit the form to save changes, the new, programmatically-set value is ignored; it sends the original value instead. If the user changes the value himself, the new value is submitted just fine.
Here is a sample:
http://dojo.telerik.com/#wittca/otoxO
This is not my original code, but it shows the same problem. In this version, upon opening the edit popup, I programmatically modify the value of the UnitsInStock KendoNumericTextBox. Then when I save the form, I would expect to see the new value, but I still see the old value in the grid. So it does not take the programmatically-generated new value.
My original code is trying to set the value of a KendoComboBox, when one of the other controls changes, and the same situation happens. I didn't have time to create the exact same situation, but most likely if we can fix that dojo sample, the same fix would apply to my ComboBox.
Here is the response I got from Telerik support:
You will need to trigger the change event as well, as the Grid listens for it in order to update the value. Please see the updated example here:
http://dojo.telerik.com/UjUkE
var units = e.container.find("[name='UnitsInStock']").data("kendoNumericTextBox");
units.value( <insert new value here> );
units.trigger("change");
The key line of code is that last one; that manually triggers the "change" event on the control, which forces the Grid to update the value.
This fix also works with my original problem involving ComboBoxes.
He is a solution for you:
If you change the edit function that you have from:
edit: function (e) {
var units = e.container.find("[name='UnitsInStock']").data("kendoNumericTextBox");
var unitsValue = units.value();
units.value(unitsValue+1);
}
to this:
edit: function (e) {
var val = e.model.UnitsInStock;
e.model.set("UnitsInStock", val+ 1);
}
It will bind the updated value for you.
Here is my updated code for you to test:
http://dojo.telerik.com/OHaKA/2
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.