I need to setup grid virtual mode, but data url should be prepared dynamically. More precisely I need to read the value from some input on the page and paste its value into data url. Unfortunately, there is only an example of grid virtual mode with static url (i.e. url itself is not formed dynamically).
It seems that it is possible to reassign data url like this:
$("#grid-id").jqGrid('setGridParam', { url: <new_url_here> }).trigger('reloadGrid');
Thanks to Oleg I found more elegant solution. When initializing grid I need to specify postData parameter like this:
$("#grid").jqGrid({
url: <url_without_parameters>,
postData: {
fileName: function() { return $("#input").val(); }
},
...
});
And to refresh grid I need to make the following call:
$("#grid").trigger("reloadGrid");
Related
Im trying to work form editing with autocomplete .. its source is different every time user opens edit form
when opening edit form :
beforeShowForm: function(frm) {
var id = grid.jqGrid('getGridParam','selrow');
if (id) {
var ret = grid.jqGrid('getRowData',id);
AccCode = ret.szAccCode;
};
$.post("url_getchildren", { szAccCode: AccCode}).
done(function(data) {
lschildcode=data;
});
},
i have managed result from server,
but i cant send it to grid.
colModel :
{name:'szAccParentCode',index:'szAccParentCode', editable:true, edittype:'text',
editoptions : {
dataInit: function(elem){
$(elem).focus(function(){
this.select();
}),
$(elem).autocomplete({
source:lschildcode
})
}
}
},
why i cant pass lschildcode to autocomplete's source? and autocomplete kept sending term to server every time i type in the box.
TIA
I think that dataInit (and so autocomplete) will be called before done of the $.post will be executed.
To fix the problem you can for example call $("#szAccParentCode").autocomplete({source:lschildcode}) inside of done.
Another way: one can use URL as the value of source. The URL can contains some additional parameters. If you need use HTTP POST you can declare source as function and call response parameter (callback function) inside of success or done of your source implementation. Just look at the implementation of source in the remote with caching example and examine the code (click on "view source") or examine the source code of jQuery UI Autocomplete near $.ajax usage (see here).
Can someone please help me i want to update a database record by using the dropdownlistbox,
so when i select an option from the dropdown the database is updated with that value for that record, without having to click a submit button using codeigniter.
I know the best way to go about this is with AJAX
Yeah AJAX can make it work, and doing it with jQuery can make it a lot easier. You can add an event listener to your dropdown list, listening to a change in its value:
$("#the-dropdown-list").change(function() {
var value = $(this).attr("value");
$.ajax({
url: "path/to/controller/action/",
type: "POST",
data: {value: value},
success: function() {
// whatever you want to do after
}
});
});
This will detect a change in the dropdown list value, and then send it to the controller action given in url in $.ajax object. After that you can just update the database record like you would usually do. In the controller, the new value can be obtained using $_POST['value'], since we defined type to be POST and the different values to be passed to controller action are in the data.
I need to display a number of "dynamic" grids using jqGrid. By dynamic I mean that both definition and data of the grid are retrieved from a database. There are many grids on the page, so I am trying to minimize the number of server trips, and there is a lot of data, so server-side paging is a must.
My workflow is
On initialization of each grid, retrieve grid definition and first
page of data in one server call.
If a user sorts/pages, then retrieve a page of data from the server
Because I want to retrieve the grid definition and first page of data in one call, I cannot use datatype: 'json', url: '###' approach; instead I do:
grid.jqGrid({
mtype: 'post',
...
datatype: function (postdata) {
if (!init.data) {
var request = {
screenId: settings.screenId,
pageNumber: postdata.page,
pageSize: postdata.rows,
sortColumn: postdata.sidx,
sortDirection: postdata.sortd,
date: settings.date
};
site.callWs("/MyService", request, function (pageResponse) {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
});
} else {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
init.data = null;
}
}
});
My data object (pageResponse or init.data) looks like this
I am not sure what method to call on jqGrid once a page of data is returned. I considered addJSONData, but it seems so inefficient to convert JSON back to string, then use EVAL(). Also, considered addRowData or setting the data property, but I am confused how to instruct jqGrid that I am doing server-side paging -- if I set the data property to one page of records, what do I need to do to tell jqGrid that there is a total of 50 records and this is page 1 out of 10.
Thanks for your help.
It was a user error (mine :). I had some show/hide logic in loadComplete of jqGrid, but this event does not fire when addJSONData is called.
addJSONData works just fine when provided with a properly-structured JavaScript object.
In inline editing mode, clicking on "Save" is throwing an error.
var rowSave = function(id){
jQuery("#myjqgrid").jqGrid('saveRow',id,{
"succesfunc": function(response) {
return true;
},
"url": myjqgrid.json
"mtype": "GET"
});
}
Is it because the url is set to json?
Basically, I get JSON response when the grid is loaded the first time. After I edit the row in inline editing mode, the edited data should be sent to the server. When the data is saved on the server, it should return the updated JSON and the grid row data should be updated with the updated JSON response.
Looking at this doc page:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow
in the section for saveRow it says:
url: if defined, this parameter replaces the editurl parameter from the options array. If set to 'clientArray', the data is not posted to the server but rather is saved only to the grid (presumably for later manual saving).
and a bit below:
Except when url (or editurl) is 'clientArray', when this method is called, the data from the particular row is POSTED to the server in format name: value, where the name is a name from colModel and the value is the new value.
so it seems you need to supply the server URL that will accept data here. In some of the examples on the same page you can see something like this:
...
editurl: "server.php",
...
I have a Generic list in my Model class. I want to have a textbox with autocomplete in my view which fills data from the generic list. How can I do this?.
For this you will need
Function on server side which will return list of matching data and will accept string entered by the user.
Something like this
public JsonResult AutoComplete(string input)
{
//Your code goes here
}
In the View, for the text box you need to bind KeyDown event. You can take help of jQuery for this. On key down handler you will make an Ajax call to the function you have defined in the Controller. Some thing like this:
$.ajax({
url: '#Url.Action("AutoComplete", "ControllerName")',
data: 'input=' + sampleInput,
success: function (data) {
//Show the UL drop down
},
error: function (data) {
// Show Error
}
});
In response you will get list of strings, which you will need to bind to some html element like "UI". Once done, display this UI with proper CSS below the text box. Using jQuery, you can retrieve the pixel location of text box too.
You can not use Asp.Net Auto Complete box in your project as you are developing app in MVC (no viewstate). I hope you get the idea.
You can use JQuery Autocomplate.
To fill the list, you can populate the data from you object.
I can't remember the exact Razor syntax, but you can refer to this:
//data is your Model object of type List<String>
var listString = [#foreach(x in data) { '#x',}];
$( "#dataList" ).autocomplete({
source: listString
});
<input id="dataList">
JQuery Autocomplte
http://jqueryui.com/demos/autocomplete/
This is client side auto complete, I can provide server side if you need.