After working on with master detail with JQGrid , I am trying to get partial view data added to a div block.
what I am trying to do is
afterEditCell: function () {
$.ajax(
url: "/order/Selected/",
type: "GET",
success: function (response, status, xhr) {
var jqContainer = $('.right');
jqContainer.html(response);
)
},
I am using inline cell editing
jQuery('#list10_d').jqGrid('editRow', id, true,);
ONce I edit value in cell it does send the update to server wher I am able to update selected dataitems with value.
Once this is done I want to load partial view which contains information about selected data item
afterEditCell event never fires.
I have checked the ajax call by adding it to $().ready.
Am I using the right event. Is there a better way to add partial view after row has been edited?
Regards,
Mar
There are a misunderstanding because jqGrid is a grid which can do probably too many things. The problem is that Inline Editing, Form Editing and Cell Editing are three absolutely different implementation of jgGrid editing. You can combine Inline Editing and Form Editing. There are some common grid settings used during all of editing modes. The events used by editRow can be defined as parameters of editRow. You can use succesfunc or aftersavefunc for your purpose. The Events of the cell editing will be
not fired by editRow which is the part of Inline Editing.
I may have got one solution from another post on SO
jqgrid reload grid after successfull inline update / inline creation of record
added
jQuery(document).ready(function () {
function updateSelected(rowid, result) {
alert("Hello");
return true;
}
and inside JQGrid script
jqGrid('editRow', id, true, '', updateSelected, '', '', '');
Though it works for me I will stillwant to know if it is possible to do so using cell events?
Regards,
Mar
Related
In response to
jQuery UI menu inside a jqGrid cell
My specific implementation of a grid has to call setRowData in numerous places. When setRowData is called, the formatter for the column will get called, and will return the <button>s when the row rebuilds in response to the setRowData.
But in the Menu example, the formatting of the buttons (the calls to .button() and .buttonset()) occur on the loadComplete. Since loadComplete obviously does not run after the setRowData, the buttons in the column display unformatted. So, say we add a button to the body:
<button id="setRowData">Set Row Data</button>
and a click event in the $(function() {})
$("#setRowData").click(function() {
var $grid = $("#list");
var data = $grid.jqGrid('getRowData', 1);
data.name = "Changed!";
$grid.jqGrid('setRowData', 1, data);
});
If you click on the button, the "My Action" and "Bla Bla" buttons show up unformatted.
So, I am looking for an event which I can hang off the setRowData for when after the <button>s have been added to the dom, so I can call .button() and .buttonset() on them again. I want to use an event, since I have a generalized routine which is doing the setRowData (in another library altogether).
Okay, I dug through the JQGrid code, and noticed there was a jqGridAfterGridComplete getting called after the setRowData finishes. So I added a:
$("#list").on("jqGridAfterGridComplete", function() {
... call the .button code again
});
to the ready function, and the styles are applied again. There may be a better way, and please feel free to offer one. But this seems to work.
Let me describe the layout of my page. There is a splitter on my page, the left page is the navigation panel and the right page is the content. So when the user, clicks a node on the panel, the content will be displayed on the right side. The problem is when the user supply a value on the displayed content, the remote validation is not firing. I tried this when the page is not a partial view and it was working.
Here is script when loading the partial view.
var onPanelItemSelect = function (e) {
var windowPath;
windowPath = $(e.item).attr('data-value');
if (windowPath != '#') {
$.ajax({
type: 'GET',
url: windowPath,
success: function (data) {
$('#right_pane').html(data);
}
});
}
return false;
}
Essentially, I have a feeling that problem could also be that that property names are not bound correctly if you use the same model to bind the main page as well as the partial.
For example if you have a model class (called ModelClass) that has a property each for the two panels (called ModelClass.LeftPanel and ModelClass.RightPanel)
LeftPanel could have a property (TextProperty) that you use to bind to the right partial page.
You would expect it to be named 'RightPanel.TextProperty' but it actually ends up with a name 'TextProperty'. This could also impact remote validations.
This Stackoverflow question describes what I think is the problem, as well as various solutions to it.
Hope this helps.
Fixed the problem, I'm open if anyone has a better answer. On the header for each view I attach the validate and unobstrusive script.
Try this:
change
success: function (data) {
$('#right_pane').html(data);
}
to
success: function (data) {
$('#right_pane').html(data);
jQuery.validator.unobtrusive.parse("#right_pane");
}
Please add reference to validate.min.js, and validate.unobtrusive.js in your partial page.
Its working for me.
P.S: Am I too late :)
My article has a descriptive code for remote validation , you can have a look at it .
Remote Validation Article
I am loading two MVC Partial Views in jQuery UI dialog using following code for editing and adding a record:
$.get(url, function(data)
{
dialogDiv.html(data);
var $form = $(formid);
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
var dat = $form.data("unobtrusiveValidation");
var opts = dat ? dat.options || '' : '';
$form.validate(opts);
//THIS FUNCTION ADDS PLUGINS ETC.
runEditCreateStartScripts();
dialogDiv.dialog('open');
});
Following is the function that wires-up chosen functionality.
function runEditCreateStartScripts(){
$("select.chzn-select").chosen(
{
no_results_text: "no match",
allow_single_deselect: true
});
}
Everything is perfect on first call. After opening one dialog say edit a few times everything is broken. There is only hyperlink available in place of chosen stuff. This also happens if I open one dialog say add and then second dialog. The bindings and other functionality from first one (add) is gone.
Any insights on why this might be happening?
The problem that caused my issue was that the modals I was loading via AJAX had inputs with the SAME ID as an input field that was already on the page (using Django that has generic ID generators for model fields). This caused collision between the two inputs when re-triggering .chosen() on the selector. When I made the ID fields unique, all worked as expected.
Hope this would have helped.
I am writing a piece of code, where i have a jqgrid and a filter with a textbox on the top, i have used the jquery ui autocomplete functionality, everything works fine, but i need to customize the functionality now i.e on autocomplete results when i select a option it should filter the grid with the result selected. Following is the example given below:
// i am doing a search on the textbox with auto complete feature
grid.jqGrid('setColProp', 'Name',
{
searchoptions: {
sopt:['cn'],
dataInit: function(elem) {
$(elem).autocomplete({
source:getUniqueNames('Name'),
delay:0,
minLength:0,
matchContains: true,
autoFill:true,
select:function(event,ui){
grid.setGridParam('postData', ui.item.value);
//grid.jqGrid('clearGridData');
grid.trigger('reloadGrid');
return false;
// need to write the code which will trigger the reload here on selection
}
});
}
}
});
On select function i need the selected option to be loaded in the jqgrid, how can i do it. Please suggest solution.
If you have implemented server side sorting and paging for your jqgrid then this should be easy, you simply need to reload the jqgrid.
To reload the grid see this, use this line of code
$("#grid1").trigger("reloadGrid", [{current:true}]);
this will reload the jqgrid, where you can pass in the paramters using postData: and get the filtered data.
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.