I have Parent Child kendo ui grids.
The child Grids read looks like this
read: {
url: baseURL + "/GetOrgSchools/OrgID=" + window.SelectedOrg,
// data: { OrgID : window.SelectedOrg }, // pass aditional data
dataType: "json" // <-- The default was "jsonp"
},
I am able to filter the child records on the selection of Parent row using this
window.SelectedOrg = orgID;
$("#gridOrgSchools").data("kendoGrid").dataSource.read({ OrgID: orgID });
$("#gridOrgSchools").css("display", "block");
But now the child grid has paging Filtering and sorting enabled.
so if I click the next page, it is not passing the OrgID and its value, it starts showing all the records.
What do I need to do so that on all the subsequent paging, filtering etc of child grid, i should be able to stick the OrgID in the URL?
Use the data function of the dataSource to constantly send to the server that field need. It will be automatically send with each server request the dataSource does.
I was able to achieve this using the following in transport of kendou ui
parameterMap: function (options, operation) {
if (operation == "read")
{
if (window.SelectedOrg != null)
options.OrgID = window.SelectedOrg;
}
Related
I want to show a custom command button in a telerik grid hierachy depending on the master-row data
Hi, I have a telerik hierarchy grid data, and I want to show a custom command button in the detail row, depending on the master-row data.
in the detail template grid, i call the ShowIfSubmitted() method.
command.Custom("Void").Text("Void").Click("VoidDeal").Visible("ShowIfSubmitted");
In the function:
function ShowIfSubmitted(dataItem) {
}
I only can access to the model data in the detail row.
But I want to access de master-row data, to check if the value of the property in the model meets the criteria to hide the button in the detail row.
My workaround was to extract the parent row instance model in order to get its id, with this field I created and ajax call to the DB to get all the info that I needed. Actually, with the "arguments" object, I could have extracted the id value.
Basically I just did this:
function ShowIfSubmitted(dataItem) {
var deal_status_id = 0;
$.ajax({
async: false,
data: { dealId: dataItem.Deal_Number },
url: '#Url.Action("action", "controller")',
success: function (data) {
deal_status_id = data;
}
})
return deal_status_id == submitted_status;
}
In the controller action is where I call the service.
I have implemented a grid with server side paging, sorting, filtering. Now my user has saved that grid with all the sorting, filtering information. I have generated a query with all these information. That means, when I load that grid again, I am giving the filtered and sorted data to the grid. Even though I have given the sorted, filtered data, now the events hits the DB since I am applying the filtering and sorting properties as below. In this situation, If I have sorted 7 fields in the grid, it hits DB 8 times (7 for applying filter and one for loading the grid for the first time). This makes so many performance issues.
$(openFrom + "#jqxgrid").jqxGrid('sortby', sessionStorage.getItem("GridSortColumn"), sortdirectionvalue);
$(openFrom + "#jqxgrid").jqxGrid('addfilter', currentColumnFilterValue['columnname'], filterGroup);
$(openFrom + "#jqxgrid").jqxGrid('applyfilters');
Here is my source object.
var source =
{
datafields: DataFields,
datatype: "json",
async: false,//If it is true, server side filtering and sorting won't work together
url: '../Widget/GetDataForGrid/',
type: 'POST',
sort: function () {
},
filter: function () {
},
beforeprocessing: function (data) {
}
};
So my requirement is, I just need to show the filter, sort selection in the grid without going to DB. This is applicable only for the first time(When the grid with sorted, filtered information loads first). And when the user click the filter again or user tries to sort another field, it should work as in server side filtering and sorting.
Any help is much appreciated.
I have solved it myself.
I created a variable and initiated it in the document ready as follows.
var isFilterSortGrid = false;
Change sort filter functions in source object as follows.
sort: function () {
if (isFilterSortGrid) {
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
}
},
filter: function () {
if (isFilterSortGrid) {
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
}
}
And finally in filter and clear button click I made that variable true again.
$(document).on('click', '#filterbuttonjqxgrid', function () {
isFilterSortGrid = true;
});
$(document).on('click', '#filterclearbuttonjqxgrid', function () {
isFilterSortGrid = true;
});
I am applying the filter and sorting as normal, so that the filter selection will be there.
I've got a custom popup editor template for my Kendo Grid which contains tabs. One of the tabs is to have a second Kendo Grid of records relating to the record being edited.
I'd like to be able to create a new record and immediately start adding the related records, without having to re-open the newly created record. Obviously, I have to first save the record in order for its ID to be generated.
I've managed to prevent the popup editor closing when new records are saved, but I think the popup window is no longer bound to the model at this point.
Is there a way I can rebind the window to the model so I can carry on editing and adding the related records?
Thanks
Edit: Here's the technique for keeping the editor open:
The grid's edit and save events:
edit: function(e){
var editWindow = this.editable.element.data("kendoWindow");
editWindow.bind("close", onWindowEditClose);
},
save: function(e){
if (e.model.isNew()) {
preventCloseOnSave = true;
} else {
preventCloseOnSave = false;
}
}
The onWindowEditClose:
var onWindowEditClose = function(e) {'
if (preventCloseOnSave) {
e.preventDefault();
preventCloseOnSave = false;
}
};
I ended up using a slightly clunky workaround, but other than a minor UI 'flash' it works okay.
The Grid has a rowTemplate, so I've added the record's ID field to the TR tags so I can find them by ID. I then have a function that runs on the complete event when a new record is created which finds the new row and immediately opens it:
var ds = new kendo.data.DataSource({
// ...
transport: {
create: {
url: '/url/to/create',
dataType: 'json',
type: 'post',
complete: recordCreated
}
});
function recordCreated(e) {
"use strict";
var id = e.responseJSON.data[0].id,
grid = $('#grid').data("kendoGrid"),
row = grid.tbody.find("tr[data-id='" + id + "']");
grid.editRow(row);
}
On a conceptual level, you could intercept the POST action that saves the record to the database and get the saved data on return. Note that your POST action must return the saved object (as is expected). You can hook into this event by using the requestEnd method of the Kendo UI Datasource object that supports your grid and bind the saved record to your edit window (as long as you have a reference to it).
var ds = new kendo.data.DataSource({
// ...
requestEnd: function (e) {
kendo.bind(editWindow, e.response); // bind the returned data to your edit window
}
});
The understanding of the kendo ui structure (which can be tedious at times) is important to getting anything done with it. The closing of the popup that allows inserting is done in the dataBinding event. Therefore, that is the place we need to prevent it from:
$("#yourgrid").kendoGrid({
dataSource: yourDataSource,
columns: [
{ field: "YouColumn", title: "YourTitle", ... },
...
]
.
.
.
editable: "popup",
dataBinding: function(e){
//this is the key to keeping the popup open
e.preventDefault();
},
save: function (e) {
//whatever you need to do here
}
.
.
.
});
Hope this helps someone.
//Houdini
I have a table filled with data that I want to sort and filter.
I implemented an auto-refresh function, which loads data from the server each time, but I want to restore sort and filter options, which I can do.
I use trigger("reloadGrid",[{current:true}]), setting the datatype to json so that the data are retrieved from the server, in the autorefresh function, and the sort and filter options are used in the loadcomplete method with a setTimeout, as explained in other stackoverflow questions.
That works, but each time the grid refreshes, I see during one second the grid with the full data, not sorted nor filtered, and then the data are locally sorted/filtered.
Given that I want an 5 seconds auto-refresh, is there a way I can prevent the reloadGrid method from displaying the full data when there is a server request but wait for the reload in loadComplete to refresh the display?
Reload used in the autorefresh function :
$("#MyGrid").jqGrid("setGridParam",{url:"list.php", datatype:"json"}).trigger("reloadGrid",[{current:true}]);
Model :
jQuery("#MyGrid").jqGrid({
url:'list.php',
datatype: "json",
loadonce:true,
...
loadComplete: function(){
if ($("#MyGrid").jqGrid("getGridParam", "datatype") !== "local") {
setTimeout(function () {
$("#MyGrid").jqGrid("setGridParam",{search:srch,postData:post});
})
};
}
You can use setInterval JavaScript function to do automatic refreshing
var grid = $("#list"),
intervalId = setInterval(
function() {
grid.trigger("reloadGrid",[{current:true}]);
},
60000); // Every 1 min
to stop the grid reload you can use one more JavaScript function:
clearInterval(intervalId);
In the "reloadGrid" I use less known parameter current:true which is described here to preserve the current selection in the grid.
You can see the Reload Jqgrid by given interval
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.