My page layout is exactly as you see in Jqgrid demo page http://trirand.com/blog/jqgrid/jqgrid.html
When a user selects from the menu grid on the left pane, a tab is dynamically created on the right pane with a Subgrid. The grids are all identical accross the tabs. The id value is overriden with key set to true in colModel. But the problem is when an update is made on any tab, other tabs also get updated even though the grid name and id not the same. The only thing they have in common is that they all have similar columns definitions
How can I isolate the changes made on one tab so that they do not get into grids in other tabs?
I found the problem. The grid id was assigned to a global variable rather than local.
Before ....
$grid = $("#MainGrid" + recordId);<br/>
$grid.jqGrid({<br/>
regional: 'en',<br/>
datatype: "json",<br/>
url: encodeURI('#.........<br/>
After ......
$("#MainGrid" + recordId).jqGrid({<br/>
regional: 'en',<br/>
datatype: "json",<br/>
url: encodeURI('#Ur........<br/>
Changed to local (as in **After** above) and problem now resolved
Related
As explained here:
http://docs.telerik.com/kendo-ui/web/grid/introduction
There are two primary ways to create a Kendo UI Grid:
From an empty div element. In this case all the Grid settings are provided in the initialization script statement.
From an existing HTML table element. In this case some of the Grid settings can be inferred from the table structure and elements' HTML attributes.
Each way have it's pros and cons, in my eyes, having it done via an html table, is much easier, because you write much less java script, and it is much more easier to make changes.
I just pass in a list of strongly type objects to a razor view, create a table and with 5 lines of JS we have a Kendo Grid.
Problem is when i click a line in the grid, i open a jquery dialog to add data to the table, when user submits a valid of form (in the dialog), the DB gets updated but i can not seem to find a way to update the grid. Besides going back to page 1 with the default number of items per page.
I would like to find a way to refresh the grid in the same manner i would if i would create it using a data source. (see commented code below)
$.ajax({
cache: false,
type: "POST",
url: url,
success: function(data) {
$('#dialog').dialog('close');
//TODO - won't work, i have to redirect back to page 1 and default items per page
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').refresh();
window.location.href = $('#link-site-root').val() + "/Administration/DivSegParmMap";
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert('Failed to get response from ValidateJqueryDialog ajax call.');
}
});
});
Any suggestions would be appreciated. Also i have been happily using stackoverflow for many years, learned a lot, and i want to finally help others, i would need to get some vote ups for my question if you think it's a good one. Thanks!
Is there a find replace function within jqGrid?
I'm struggling with implementing my own;
I have an array of data that I bind my grid to like this;
data: GRID.GridData,
On find and replace I go through that array and make the changes which works great. However, when I edit a cell within the grid, the change is not posted to my array. Instead it's in another array that jqGrid uses for some reason. So now SLAPPY is in the cell but not in Grid.GridData and so when I come to save the data back to the server, the cell edits the user made are not reflected.
So, no problem, I then used code like this;
var rowData = $('#fieldJobAddressListGrid').jqGrid('getRowData', "11332601");
rowData.State = "SLAPPY";
$('#fieldJobAddressListGrid').jqGrid('setRowData', "11332601", rowData);
But this sets the column value to be SLAPPY and then it immediately reloads using GRID.GridData and destroys the value in the cell.
How can I allow the user to edit a cell, and programmatically alter the value in a cell and have that all flow back to GRID.GridData?
The grid is setup like this for the data;
grid.jqGrid({
datatype: "local",
data: GRID.GridData,
I have tried adding loadonce to no effect.
When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.
This may be a followup to this question Possible to make jqGrid Search Box Stay on Page? - Or it may be unrelated because clicking the search button manually shows the same behavior.
We have a dynamically generated grid that is created by a) making an ajax request to get the grid columns based on a report id and then b) setting up the grid model and fetching the data. When the page loads initially, we pass in a starting report id, but there is a dropdown box on the page that lets the user change reports.
When the dropdown changes, I unload any existing grid, make the ajax request to get the columns, set up the grid model, and then get the data. The columns change, the data changes, and everything looks correct - except the search columns do not change in the search dropdown.
If I close the search box and reopen it, it still has the old search columns. Likewise, if I click the reset button or reload the entire grid.
I found it after a bit more poking around. I needed to set the recreateFilter option to true
prmSearch = {recreateFilter:true,multipleSearch:true,overlay:false,sopt:['cn','eq','ne','lt','le','gt','ge','in','ni','nc']};
When I open form to edit values:
It doesn't change form values when I navigate with <> buttons
It opens New form with same values as first edited row, and when I click "Submit", it overwrites that row instead of creating a new item
When I click to edit another row, it always shows the form values for the first edited row – i.e. if I click New first and then edit row, it shows empty form.
So, in short, the first time form opens, the values are "stuck" whatever row I open later.
What can cause this? I remember it used to work OK some time ago.
UPDATE:
No with recreateForm I don't have this issue (I use it as temporary workaround).
Hm, I can reproduce this on jqGrid example, but not on Live Manipulation - on New in Version 3.7, Add/edit/delete on local data:
Click any row and edit it (open form)
Close form
Select any other row and click edit - form shows incorrect values (from the row that was opened first)
Click Add new row button in toolbar - form shows same values - which is very convenient, usually new rows are "almost" same - if only it would add new row, not update the existing one!
Of course in live demo Submit doesn't do that (it doesn't seem to work at all) but except for this symptoms are same.
Also <> buttons do not change data in form, though they change selected row - but from what I remember previously it used to update form values also to match selected row.
Probably you should post the description of your bug with "New in Version 3.7", "Add/edit/delete" as a bug in the in trirand forum.
The problem is that the bug exist in very special environment/data/settings. For example I tested my old local edit example modified to jqGrid 3.8.1 or in 3.7.2 and can not reproduce the problem which you describes. So you can use my examples as a template could it helps you.
Moreover in all examples which I use for real projects I use always parameter recreateForm:true. If you don't use it jqGrid not create a form, but try to use an existing with other data. It works in a lot of cases wrong. For example if you use any dataInit functions they will be called only once during creating of the form, which can make very strange affects. If you use edittype: 'custom' the usage of recreateForm:true is really mandatory (see this). So I recommended many times all people to use
jQuery.extend(jQuery.jgrid.edit, {recreateForm: true});
to set recreateForm: true as your default settings. You could save many hours or days of debugging of some strange effects in your edit/add dialogs.