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.
Related
I have a view where there is a dropdown and datatable.
At initial load, I am loading the values to be loaded in the datatable based on the first select of dropdown and on change of dropdown, I want to fetch data based on that condition and populate those data on the datatable.
Please anyone suggest a way to do this!
I am trying a way using get request but it is reloading the page and hence I am unable to make the data persist in the datatable.
I followed exactly this https://laracasts.com/discuss/channels/laravel/filtering-data-using-drop-down-onchange-event
Data is coming and populates to the datatable but just after a second, it reloads and comes to old data in datatable.
Please either correct my or suggest some new way to do it!
After debugging, I found that in one of the js file included, there were a code
$(document).ajaxStop(function() {
window.location.reload();
});
Since, this code was making it to reload on every ajax call completes, I faced this issue.
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.
My jqgrid contains several pages. When I sort any column the page resets to first.
(That's right also for filterToolbar i.e. after calling $("#my-grid")[0].triggerToolbar();)
Is there any way to keep my current page after sorting/filtering ?
EDIT:
Actually my problem is a little more complicated.
I save jqgrid preferences(rowNum, page, filters etc..) to the cookie.
When I load the page first time I load the prefs.
I use the technique from Mark B's answer (see jqGrid Filter Toolbar initial default value) to populate my filter default values.
The problem: in that case page always sets to the first.(because of triggerToolbar calling) i.e. it doesn't save state.
I don't quite understand your requirement. If the user has seen some rows on the second page for example and then the user has clicked on the column header to sort the column the the grid will be sorted. The data which the user have seen before can be on any page. So I don't understand why you want hold the current page which will show absolutely another data as it showed before.
If you do need to hold the page you can do this in the following way. Inside of the loadComplete you can save the value of page parameter. Inside of onSortCol event handler the value will be already changed to 1, but you can correct it to the value which you saved before. I didn't tested this, but I think it should work.
UPDATED: Now I think I understand your original problem. I think you should choose another way described here or here. What you needs is just to save in the cookie the postData value and to set search:true parameter of jqGrid if the filters is not empty (or other filter parameter depend on the options which you use). In the way you should be able to restore not only the filter, but additionally the page value. The final solution can a little depend from jqGrid parameters and the parameters of filterToolbar which you use. So it you will have implementation problem you should include more code which you use.
I'm using mvc with jqgrid and this solition work for me:
$("#GridTable").jqGrid({
...
onSortCol:
function () {
var postpage = jQuery("#GridTable").getGridParam('postData');
jQuery("#GridTable").setGridParam({ page: postpage.page });
},
...
});
Telerik Experts, I need your help guys!
In my grid, data gets bound on the client, through .ClientEvents .OnDataBinding.
I just call grid.dataBind(customData). Data gets displayed, but grouping, filtering, sorting don't work. Is it possible to group or filter stuff after grid.dataBind call?
Right now it just moves my columns around and doesn't do any grouping. Sorting and filtering fails also.
Can you show me a simple example of grouping without any server calls please?
You may want to consider using the Operation Mode feature, which was released in the recent Q2 2011 release.
Client operation mode - This new mode allows operations like sorting,
paging, filtering or grouping to be performed purely on the client, by
making a single initial call to the server to retrieve all data.
Client Mode Implementation:
Html.Telerik().Grid(Model)
.Name("YourGrid")
.DataBinding(dataBinding => dataBinding
.Ajax()
.OperationMode(GridOperationMode.Client) // Set to Client
.Select("Select", "Home")
)
Otherwise, to manually group using javascript, as follows:
<script type='text/javascript'>
function yourGrid_onDataBinding(e){
//Grabs your Grid
var yourGrid = $("#yourGrid").data("tGrid");
//Removes any existing groupings
yourGrid.groups = [];
//Ensure the column you wish to group by is EXACTLY as it appears in the Grid
yourGrid.group("yourColumnName");
}
</script>
Here are a few useful threads from the Telerik MVC forum that might help you solve your issue if this isn't a viable solution for you:
Client-Side Grouping | Has a great deal of code for client-side grouping operations
Client-Side dataBinding | More client-side code, talks about ClientSideGroupHeaderTemplates
Grouping with OperationMode.Client | If you have any issues with OperationMode.Client
As I know you couldn't do it without any hit to the server again.
But you can do it by Ajax throw JavaScript.
All you need to do is and these methods will rebind your grid :
// For filtering
grid.filter("propName~eq~youValue");
// For grouping
grid.group("column Title");
And take care this is column title not property name so if your property is "CustomerName" and your column title is "Customer Name" the you should pass the column title.
Anyway this will make an Ajax call to the controller to rebind Grid again.
Update:
Your grid should set .EnableCustomBinding(true) and you should decorate controller method that get your Ajax grid with [GridAction(EnableCustomBinding = true)] Attribute.
Hope this helped
I'm doing the exact same thing in my grid. I'm using 2011.2.629, jQuery 1.6.2. I'm actually doing this for external filtering--so I don't use the built in filtering--but grouping and sorting both work for me.
We need some code, man.
As someone else mentioned, make sure you have the following set:
dataBinding.Ajax().OperationMode(GridOperationMode.Client)
Is your grid bound at runtime? If not, bind it to an empty viewModel that's the same as the one you're using in the dataBind(). Also, how are you binding to the new list? It could be something in your onDataBinding().