I have a grid like this:
To edit a line, the user chooses one from the grid an click the "pen" icon. Then, the record is displayed in the form.
To save the form, choose the save button link. Ok.
Now I need to update the line in the grid.
I get this working, doing the follow in javascript:
$.post(this.href,
sf,
function (response) {
$("#form-edicao").html(response);
var $grid = $("#Grid").data("tGrid");
$grid.rebind(); //==this line update the grid
});
But this approach updates all the grid, return to the first page...
I need to update just one line.
In common table grids, I replace some html elements. How to do this in this mysterious grid?
Taking a look at the Client-side API of the Grid component I think that using .ajaxRequest() instead might be what you're looking for. .rebind() resets the state (page number, filter/sort expressions etc.) while .ajaxRequest() shouldn't.
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.
I have two kendo grid in one page and the results of the first grid should be reflected to the second grid. For instance, Grid1 = list of subjects, Grid2 = list of students, if I have to add new subject, it should be right away available on the students dropdown column for subjects without the need of refreshing the whole page.
Hopefully someone could help. Thanks.
I was able to do it by having an ajax call inside complete: function(e){ // ajax call to update } to update the dropdownlist. Thank you guys.
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 a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.
I use two grids at one PHP page.
Is there any way to get data from the first grid (i.e. after click row) and pre-fill it into the add new row form in the second grid?
thank you for any suggestion Petr
I am not sure that I correct understand what you mean under the "pre-filling". But how I understand you question you can do following:
With respect of onSelectRow event which you define on the first grid you will receive the id of selected row as the parameter. Inside of the onSelectRow event handle you can call getRowData to get full information about the data of selected row. Then using addRowData for example you can add new row in the second grid.