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.
Related
I'm developing an app using the amazing angularslickgrid.
Till now, i haven't got any problem, buy I found out an strange behaviour on it.
In the ngOnInit I wrote the following code:
ngOnInit(){
this.defineGridHeaders();
this.defineGridOptions();
this.obtainData();
}
Till this moment everything works well and the grid load correctly the data including the RowSelection column.
The problem is when I try to change the columndefinition, and perfrom a reset() like this:
this.defineGridHeaders();
this.angularGrid.gridService.resetGrid();
The new colums have been loaded correctly but i lose the rowSelection column.. :(
I've tried to include the defineGridOptions() function in the middle of the defineGridHeaders() and resetGrid() but the result is the same.
In the this.defineGridHeaders() I just perfom the following:
this.columnDefinitions = [];
[...FIELDS CREATION...]
const col = {
id,
name,
field,
sortable,
filterable,
type,
editor,
formatter,
filter,
outputType,
params,
minWidth: minwidth,
width: width,
header: header,
excludeFromExport,
excludeFromGridMenu,
excludeFromQuery,
excludeFromHeaderMenu
};
this.columnDefinitions.push(col);
Could someone help me on this?
Many Thanks!
Please note that I'm the author of Angular-Slickgrid and you opened an issue with the same question on GitHub, I'll simply reply with the same answer here
a reset is a reset, so it won't keep that. But I added the Row Selection in the Grid State not that long ago, so you could get it from there (just check the Grid State/Presets - Wiki. Dynamically adding a new column can be seen in this Example 3, you should look at the code on how to make it show up correctly (you can't just add it, you need to manually trigger a dirty change call, look at the example code for that)
Also to add a bit more to this, SlickGrid Row Selection is by row index, it's not by row data. Meaning that if your data changes when you refresh or something and you keep the row selection it will not synched anymore... all that to say, just remember, it's a row index, so pay attention when you want to keep or want to reapply a row selection.
If it's just to row selection that you lose, just save it before adding a column and put back the selection after adding the column. It's simple, get the row selection (with getSelectedRows) before you change the column definitions, add your new column and then put back the selection (with setSelectedRows).
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!
I have a grid, to which I'm making a delRowData(rowId) call to, whenever the grid gets reloaded using .trigger('reloadGrid') the deleted row returns, I can access the grid data and delete it from there, but I'd prefer not to, if I can avoid it.
To note, I need to reload the grid as I have custom subgrid tabs that get out of alignment when the row is deleted. The row also returns when I change pages on jqgrid's pagination.
Any suggestions?
.delRowData() function only deletes the row from clientslide if you don't use datatype: "local", once you trigger grid reload, it will get the data again from the server to fill your grid. So you can first delete the row on your server side, then in the jquery.ajax callback function you can invoke .delRowData() or some other function like this.
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.
in my web application i am already using jqgrid since version 3.5.
at my application such as search window, page is comming with no date. after user entering seach parameter when clicking search buton i have done request, grid data and other variable that i needed has come with this ajax request.
so i populate grid with addJSONData metod such as ;
var data = {"page":"1″,"total":0,"records":0,"rows":[{"id":"1","cell":["1-480","1884","BASYAYLA"]},{"id":"2″,"cell":["2-481","1983","SARIVELILER"]}]};
// data variable has return from ajax request.
var mygrid = jQuery("#mygrid")[0];
mygrid.addJSONData(data);
Grid populating is problem when you working with big data set. Yesterday i seen new properties called scroll and loadonce at demo page.
I understand that when i use datatype except than json.
i try to use these metod but i am not able to success.
How could i use addJSONData, scroll and loadonce at same time.
i find solution myself
when you are using loadonce metod it will turn datatype to local so addJSONData metod dont work because datatype is not json.
by following these steps, problem has solved.
i set datatype local to grid dont make first call
$.extend($.jgrid.defaults,{
datatype: "local"
});
for loading data to grid. i follow these commands;
$("#"+objeId).setGridParam({datatype:'json', loadonce:true});
mygrid.addJSONData(myjsongrid);
$("#"+objeId).setGridParam({datatype:'local'});
every thing work fine for me.