Save Grid Layout Data - asp.net-mvc-3

I have this in grid settings:
var gridLayoutRepository = new GridLayoutRepository();
settings.ClientLayout = (s, e) =>
{
Debug.Write(e.LayoutData);
if (e.LayoutMode == ClientLayoutMode.Loading)
{
e.LayoutData = gridLayoutRepository.Load();
}
else
{
gridLayoutRepository.Save(e.LayoutData);
}
};
I want to have one button for saving gridstate in database and one button for resetting it. Can you help me?

This is possible this way. In grid settings must save grid state:
settings.ClientLayout = (s, e) =>
{
if (e.LayoutMode == ClientLayoutMode.Loading)
{
if (Session["myGridState"] != null)
e.LayoutData = (string)Session["myGridState"];
}
else
Session["myGridState"] = e.LayoutData;
};
Then on button click you should save grid state like this:
<script type="text/javascript">
function SaveLayoutData() {
$.getJSON("#Url.Action("SaveLayoutData", "MyController" })", null,
function (result) {
if(result == 'success') {
alert("Layout save success");
}
});
}
</script>
In Controller:
public JsonResult SaveLayoutData()
{
_gridStateRepository.Save(Session["myGridState"]);
return Json("success", JsonRequestBehavior.AllowGet);
}
When you are loading grid you should load grid state from database and write it in Session["myGridState"]

Related

Slickgrid example5 collapsing is not working

This is my first experience with Slickgrid and I have configured slickgrid treeview example5 in my org. Unfortunately could not make collapsing work. After debugging one thing I noticed is onRowCountChanged event is not called.
Can anyone please help me her. Thanks in advance...
I wired the event on page as --
$(function () {
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.QuoteHandler_c.getQuoteItems}','{!quote.id}',
function(result, event) {
quoteItems = result;
prepateData();
// initialize the model
dataView = new Slick.Data.DataView({ inlineFilters: true });
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(myFilter);
dataView.endUpdate();
// initialize the grid
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.onClick.subscribe(function (e, args) {
if ($(e.target).hasClass("toggle")) {
var item = dataView.getItem(args.row);
if (item) {
if (!item._collapsed) {
item._collapsed = true;
} else {
item._collapsed = false;
}
dataView.updateItem(item.id, item);
}
e.stopImmediatePropagation();
}
});
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
var h_runfilters = null;
// wire up the slider to apply the filter to the model
$("#pcSlider").slider({
"range": "min",
"slide": function (event, ui) {
Slick.GlobalEditorLock.cancelCurrentEdit();
if (percentCompleteThreshold != ui.value) {
window.clearTimeout(h_runfilters);
h_runfilters = window.setTimeout(dataView.refresh, 10);
percentCompleteThreshold = ui.value;
}
}
});
// wire up the search textbox to apply the filter to the model
$("#txtSearch").keyup(function (e) {
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value;
dataView.refresh();
})
}
);
})
Thanks for your help...
I figured it out. The error was with myFilter function. Because of which the number of rows always returned same hence onRowsCountChanged not called.

Durandal dialog Call back Function

In my view model I have a grid, if user click on Edit button on the row it will popup a dialog with row values, if user click on Edit button will close the dialog then I need to reload the grid. My model look like below, I my case
I am not able to call load function after dialog call back (** getting Error - self is undefined**). it is possible to pass this to dialog?
var ctor = function () {
var self = this;
self.load = function () {
Load grid Functions
}
self.editRow = function (row) {
dialog.show(new editWindow(), row).then(function (response) {
if (response == null) {
return;
}
self.load();
});
}
Return ctor;
got answer by adding self with call back
var ctor = function () {
var self = this;
self.load = function () {
Load grid Functions
}
self.editRow = function (row) {
dialog.show(new editWindow(), row).then(function (response) {
if (response == null) {
return;
}
self.load();
},self);
}
Return ctor;

Prevent Kendo grid popup edit from closing on Error

I am trying to handle the server error when creating/updating/deleting item from kendo grid. But when a error is thrown, the kendo grid closes no matter what.
function kendo_error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
showErrorMessages(key, message);
});
//this does not work
var grid = this;
gird.one("dataBinding", function (e) {
e.preventDefault();
});
}
}
Does anybody have any other solution? e.preventDefault() doesn't work either.
This worked for me. Just in case anybody needs this.
function kendo_error_handler(gridName) {
return function (e) {
if (e.errors) {
var grid = $('#'+gridName).data("kendoGrid");
grid.one("dataBinding", function (ev) {
ev.preventDefault();
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
showErrorMessages(key, message);
});
});
}
else {
$("#errorContainer").text("");
}
}
}
is it cause it says " gird.one(" instead of "grid.one("

How do I retain filters in JqGrid whilst still getting remote data?

I'm using this demo to display text and dropdown list filters in the columns of a JqGrid. The grid has a remote data source and with each sort, filter, or page view etc, it grabs the data from the remote source.
The problem I am having is that when the new data arrives, the grid is refreshed, and the filters revert to default. I've looked at a few examples by Dr Oleg but I can't get it to work with remote data and persistence. Any setting of datatype to "local" or loadonce to true breaks the remote datasource.
Does anyone have any ideas of how to get this to work?
I've tried the following, but as I said, this stops the JqGrid from making API requests:
loadComplete: function () {
var $this = $(this);
var postfilt = $this.jqGrid('getGridParam', 'postData').filters;
var postsord = $this.jqGrid('getGridParam', 'postData').sord;
var postsort = $this.jqGrid('getGridParam', 'postData').sidx;
var postpage = $this.jqGrid('getGridParam', 'postData').page;
console.log(postfilt);
console.log(postsord);
console.log(postsort);
console.log(postsort);*/
if ($this.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$this.jqGrid("setGridParam", {
datatype: "local",
postData: { filters: postfilt, sord: postsord, sidx: postsort },
search: true
});
$this.trigger("reloadGrid", [{ page: postpage}]);
}, 25);
}
}
I think the issue has something to do with the select2 dropdown menus. Here you can see it destroys the filter menu and recreates it.
var options = colModelOptions, p, needRecreateSearchingToolbar = false;
if (options != null) {
for (p in options) {
if (options.hasOwnProperty(p)) {
if (options[p].edittype === "select") {
options[p].editoptions.dataInit = initSelect2;
}
if (options[p].stype === "select") {
options[p].searchoptions.dataInit = initSelect2;
}
$grid.jqGrid("setColProp", p, options[p]);
if (this.ftoolbar) { // filter toolbar exist
needRecreateSearchingToolbar = true;
}
}
}
if (needRecreateSearchingToolbar) {
$grid.jqGrid("destroyFilterToolbar");
$grid.jqGrid("filterToolbar", filterToolbarOptions);
}
}
If there was a way this could be done just once per JqGrid load rather than per every request, then that may be a step in the right direction.
The answer to this was quite simple, it just didn't present itself to me until the next morning. I simply wrapped the code that built the search bar in a boolean check, so that it only loaded once.
// somewhere in the class
var gridLoaded = false;
// and in the JqGrid initialization
loadComplete: function (response) {
if (!gridLoaded) {
var options = colModelOptions, p, needRecreateSearchingToolbar = false;
if (options != null) {
for (p in options) {
console.log(p);
if (options.hasOwnProperty(p)) {
if (options[p].edittype === "select") {
options[p].editoptions.dataInit = initSelect2;
}
if (options[p].stype === "select") {
options[p].searchoptions.dataInit = initSelect2;
}
$(this).jqGrid("setColProp", p, options[p]);
if (this.ftoolbar) { // filter toolbar exist
needRecreateSearchingToolbar = true;
}
}
}
if (needRecreateSearchingToolbar) {
$(this).jqGrid("destroyFilterToolbar");
$(this).jqGrid("filterToolbar", filterToolbarOptions);
}
}
gridLoaded = true;
}
}
Thanks again to Dr Oleg for the help.

ajax add_endRequest never fires, on iPad only

I have some asp code in which I have a set of Telerik grids on separate jQueryUI tabs, and I am lazy-loading the grid data so that the grids only bind to live data if you actually view the tab that contains them. The rebind causes an ajax postback, and I have added an endRequest handler to re-apply the jQueryUI formatting once the request returns. This is working in Firefox, Chrome, Safari, and IE. But on the iPad the endRequest handler never fires. Any suggestions on how to troubleshoot this?
My code is as follows:
<script language="javascript" type="text/javascript">
(function ($, Sys) {
function setUpEmsDashboard() {
$('#emsDashboard').dnnTabs().dnnPanels();
$('#dInvoiceLink').click(function () {
lazyLoadOutstandingInvoicesGrid();
});
if ($('#dInvoice').is(':visible')) {
lazyLoadOutstandingInvoicesGrid();
}
$('#dCountsForStaffLink').click(function () {
lazyLoadCountsForStaffGrids();
});
if ($('#dCountsForStaff').is(':visible')) {
lazyLoadCountsForStaffGrids();
}
}
$(document).ready(function () {
setUpEmsDashboard();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
setUpEmsDashboard();
});
});
} (jQuery, window.Sys));
</script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script language="javascript" type="text/javascript">
function lazyLoadOutstandingInvoicesGrid() {
var grid = $find("<%=OutstandingInvoicesGrid.ClientID%>");
var masterTableView = grid.get_masterTableView();
var name = masterTableView.get_name();
if (name == 'Temp Data') {
masterTableView.rebind();
}
return true;
}
function lazyLoadCountsForStaffGrids() {
var countsBySalesRegionGrid = $find("<%=CountsBySalesRegionGrid.ClientID%>");
var cbsrMasterTableView = countsBySalesRegionGrid.get_masterTableView();
var cbsrName = cbsrMasterTableView.get_name();
if (cbsrName == 'Temp Data') {
cbsrMasterTableView.rebind();
return true;
}
var countsBySupplierTypeGrid = $find("<%=CountsBySupplierTypeGrid.ClientID%>");
var cbstMasterTableView = countsBySupplierTypeGrid.get_masterTableView();
var cbstName = cbstMasterTableView.get_name();
if (cbstName == 'Temp Data') {
cbstMasterTableView.rebind();
return true;
}
var countsByCategoryGrid = $find("<%=CountsByCategoryGrid.ClientID%>");
var cbcMasterTableView = countsByCategoryGrid.get_masterTableView();
var cbcName = cbcMasterTableView.get_name();
if (cbcName == 'Temp Data') {
cbcMasterTableView.rebind();
}
return true;
}
</script>
</telerik:RadCodeBlock>
Never mind, I found the issue. What I had was a race condition where for some browsers in some circumstances, the grid objects were null.
I changed:
function lazyLoadOutstandingInvoicesGrid() {
var grid = $find("<%=OutstandingInvoicesGrid.ClientID%>");
var masterTableView = grid.get_masterTableView();
var name = masterTableView.get_name();
if (name == 'Temp Data') {
masterTableView.rebind();
}
return true;
}
to:
function lazyLoadOutstandingInvoicesGrid() {
var grid = $find("<%=OutstandingInvoicesGrid.ClientID%>");
if (typeof (grid) !== 'undefined' && grid != null) {
var masterTableView = grid.get_masterTableView();
var name = masterTableView.get_name();
if (name == 'Temp Data') {
masterTableView.rebind();
}
return true;
}
}
...and made similar changes to the other function. That prevented the object reference error that had been silently causing the rest of the main function to fail. Now it works consistently.

Resources