how can i do to not lose a filter in a jqxGrid when a change the next page? i'm using the filters from my dataAdapter - jqxgrid

i have a problem, i use this control is a jqxGrid, this is:
function initGridUsuarios() {
// campos y adaptador
var fields = [
{ name: "NoEmpleado", type: "int" },
{ name: "Nombre", type: "string" },
{ name: "Departamento", type: "string" }
],
dataAdapter = utils.generateGridAdapter(gridEmpleados, "GestionPaqueteInfo", "ObtenerGridUsuarios", fields, getGridFilters);
gridEmpleados.jqxGrid({
width: 900,
height: 400,
theme: tema,
columnsresize: true,
pageable: true,
altrows: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},
localization: utils.getIdiomaGrid(),
source: dataAdapter,
columns: [
{ text: "Id", dataField: "Id", columngroup: "Titulo", width: 100, hidden: true },
{ text: "Número de Empleado", dataField: "NoEmpleado", columngroup: "Titulo", width: 150 },
{ text: "Nombre", dataField: "Nombre", columngroup: "Titulo", width: 250 },
{ text: "Departamento", dataField: "Departamento", columngroup: "Titulo", width: 350 },
{
text: "Crear paquete info", datafield: "Crear", columngroup: "Titulo", columntype: "button", width: 150, cellsrenderer: function () {
return "Crear";
}, buttonclick: function (clickRow) {
crear();
}
},
],
columngroups: [
{ text: "Busqueda de Empleados para creación de paquete inventario informática", align: "center", name: "Titulo" }
]
});
}
actually it loose the filter, when i change the page, what can i do to not lose the filter?
:$ sorry my english is not really good :$:$

Related

How to add cumulative distribution function in canvasjs?

I am working in an company as a trainee front end developer. I have been asked to research on how to gather or collect some datapoints on a particular spot in Google Maps and visualize them nicely on a graph.
Actually he liked one of my ideas. But he wants me to do this graph by cumulative distribution function.
Please see the codes below:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "dark1",
title:{
text: "Network Technology on a Particular Spot"
},
axisY: {
title: "Movement Category(Avg.)",
suffix: "%"
},
legend: {
cursor:"pointer",
itemclick : toggleDataSeries
},
toolTip: {
shared: true,
content: toolTipFormatter,
suffix: "%"
},
data: [{
type: "bar",
showInLegend: true,
name: "2G",
color: "blue",
dataPoints: [
{ y: 23, label: "STANDSTILL" },
{ y: 36, label: "ON FOOT" },
{ y: 43, label: "ON VEHICLE" },
{isCumulativeSum : true}
]
},
{
type: "bar",
showInLegend: true,
name: "3G",
color: "yellow",
dataPoints: [
{ y: 12, label: "STANDSTILL" },
{ y: 86, label: "ON FOOT" },
{ y: 72, label: "ON VEHICLE" },
{isCumulativeSum : true}
]
},
{
type: "bar",
showInLegend: true,
name: "4G",
color: "red",
dataPoints: [
{ y: 22, label: "STANDSTILL" },
{ y: 16, label: "ON FOOT" },
{ y: 22, label: "ON VEHICLE" },
{isCumulativeSum : true}
]
},
{
type: "bar",
showInLegend: true,
name: "LTE",
color: "green",
dataPoints: [
{ y: 36, label: "STANDSTILL" },
{ y: 12, label: "ON FOOT" },
{ y: 39, label: "ON VEHICLE" },
{isCumulativeSum : true}
]
}]
});
chart.render();
function toolTipFormatter(e) {
var str = "";
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 500px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

How to innest 2 grids properly in a same view with Gijgo Grid?

I have a problem with gijco grid in this case.
I have 2 grids in a same View (ASP.NET MVC).
If I have a pager in the first grid and not in second, the second grid doesn't load tha data... if I uncomment the pager on second grid (with the same condition) the data are loaded properly (see code).
Source
$(document).ready(function () {
datasourceiniziale = #Html.Raw(Json.Encode(Model.PSA));
dsIstruttori = #Html.Raw(Json.Encode(Model.Istruttori));
$("#hdatasource").val(JSON.stringify(#Html.Raw(Json.Encode(Model.PSA))));
grid = $("#gridPSA").grid({
pager: { enable: true, limit: 10, sizes: [10, 20, 50, 100] },
dataSource: datasourceiniziale,
selectionMethod: 'checkbox',
selectionType: 'multiple',
detailTemplate: '<div class="panel-footer"><div class="alert alert-warning small"><span class="glyphicon glyphicon-info-sign"></span><br /><b>idPSAAzienda:</b>{idPSAAzienda}<br /><b>idToken:</b>{idToken}<br /><b>Compilatore;</b>{Compilatore}<br /><ul><li><b>CompilatoreContatti:</b>{CompilatoreContatti}</li></div></div>',
dataKey: "Id",
uiLibrary: "bootstrap",
columns:
[
{ field: "Id", sortable: false, hidden: true },
{ field: "idPSAAzienda", sortable: false, hidden: true },
{ field: "idToken", sortable: false, hidden: true },
{ field: "Compilatore", sortable: false, hidden: true },
{ field: "CompilatoreContatti", sortable: false, hidden: true },
{ field: "RagioneSociale", sortable: false, title: "Ragione Sociale" },
{ field: "Comune", sortable: false, title: "Comune" }
//,
//{ width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Modifica", events: { "click": Edit } },
//{ width: 34, type: "icon", icon: "glyphicon-remove", tooltip: "Elimina", events: { "click": Delete } }
]
});
gridIstruttori = $("#gridIstruttori").grid({
dataSource: dsIstruttori,
//pager: { enable: false, limit: 10, sizes: [10, 20, 50, 100] },
selectionMethod: 'checkbox',
selectionType: 'multiple',
detailTemplate: '<div class="panel-footer"><div class="alert alert-warning small"><span class="glyphicon glyphicon-info-sign"></span><br /><b>IdUtente:</b>{IdUtente}<br /><b>UserName:</b>{UserName}<br /></div></div>',
dataKey: "Id",
uiLibrary: "bootstrap",
columns:
[
{ field: "IdUtente", sortable: false, hidden: true },
{ field: "Cognome", sortable: false},
{ field: "Nome", sortable: false },
{ field: "UserName", sortable: false, title: "Username", hidden: true }
]
});
});
Where is the error?
Exist a workaround for this situation?
Thanks.
This is a bug in version 0.6.
This is an example with workaround for this issue.
<table id="grid1"></table>
<table id="grid2"></table>
<script>
var data1 = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
var data2 = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
$('#grid1').grid({
dataSource: data1,
uiLibrary: 'bootstrap',
columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
gj.grid.methods.getRecordsForRendering = function ($grid) {
return $grid.data('records');
};
$('#grid2').grid({
dataSource: data2,
uiLibrary: 'bootstrap',
columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
This is already fixed in version 1.0 and above I would recommend you to upgrade to new version from http://gijgo.com

jqgrid not showing any results when count exceeds ~9000

I am using jqgrid version 4.1.2 with MVC4, using loadonce option. When the search result's count exceeds approximately 9000 records, no data is shown up on the grid.
What might be the issue?
Here is the JS code: Update 1
function showCompletedGrid() {
// Set up the jquery grid
$("#jqTableCompleted").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
loadonce: true,
loadtext: 'Loading Data please wait ...',
postData: { strUserName: function () { return $('#ddlUserName :selected').val(); },
strFunctionName: function () { return $('#ddlOPMSFunction :selected').text(); },
strProcName: function () { return $('#ddlOPMSProcess :selected').text(); },
strCategory: function () { return $('#ddlSearchCategory :selected').text(); },
strWorkType: function () { return $('#ddlSearchWorkType :selected').text(); },
strRequestNumber: function () { return $('#txtRequestNo').val(); },
strStatus: function () { return $('#ddlSearchStatus :selected').text(); },
strFromDate: function () { return $('#txtFromDate').val().toString(); }, //datepicker('getDate'),
strToDate: function () { return $('#txtToDate').val().toString(); }, //datepicker('getDate'),
strAction: "Closed"
},
autowidth: true,
shrinkToFit: true,
// Specify the column names
colNames: ["S.No.", "User Name", "Category", "Work Type", "Request Number", "Status", "Time Spent", "RE", "GUID", "Marked for Correction", "Correction Complete", "Reason", "Task Type", "acf2id", "Created Date", "Action", "IsTeam"],
// Configure the columns
colModel: [
{ name: "SNo", index: "SNo", sorttype: 'int', width: 100, align: "left", hidden: true, sortable: true, search: true, searchoptions: { sopt: ['eq']} },
{ name: "UserName", index: "UserName", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Category", index: "Category", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "WorkType", index: "WorkType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "RequestNumber", index: "RequestNumber", width: 200, align: "left", sortable: true, search: true, searchoptions: { sopt: ['cn']} },
{ name: "Status", index: "Status", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TimeSpent", index: "TimeSpent", width: 200, align: "left", sortable: true, search: true },
{ name: "RE", index: "RE", width: 200, align: "left", sortable: true, search: true },
{ name: "GUID", index: "GUID", sortable: false, search: false, width: 200, align: "left", hidden: true },
{ name: "MarkCorrection", index: "MarkCorrection", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CorrectionComplete", index: "CorrectionComplete", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Reason", index: "Reason", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TaskType", index: "TaskType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "acf2id", index: "acf2id", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CreatedDate", index: "CreatedDate", width: 200, align: "left", hidden: false, search: false },
{ name: 'Actions', sortable: false, search: false, fixed: true, align: 'center', formatter: returnHyperLinkCompleted },
{ name: 'IsTeam', sortable: false, hidden: true, search: false, fixed: true, align: 'center' }
],
ignoreCase: true,
//width: 1250,
height: 150,
// Paging
toppager: true,
pager: $("#jqTableCompletedPager"),
//rowTotal: 200,
rowNum: 20,
rowList: [20, 15, 10, 5],
viewrecords: true,
emptyrecords: "",
hiddengrid: true,
// Default sorting
sortname: "SNo",
sortorder: "asc",
// Grid caption
caption: "Closed",
loadComplete: function (data) {
var RE;
var TimeSpent;
var rowIDs = jQuery("#jqTableCompleted").jqGrid('getDataIDs');
for (var i = 0; i < rowIDs.length; i++) {
var rowID = rowIDs[i];
var row = jQuery('#jqTableCompleted').jqGrid('getRowData', rowID);
RE = hmsToSecondsOnly(row.RE);
RE = (0.2 * RE) + RE;
TimeSpent = hmsToSecondsOnly(row.TimeSpent);
if (TimeSpent > RE && RE > 0) {
$(row).removeClass('ui-widget-content');
$(row).removeClass('ui-state-highlight');
$("#jqTableCompleted tr[id='" + rowID + "']").addClass('myColor');
}
}
}
}).navGrid("#jqTableCompletedPager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]}
);
$("#jqTableCompleted").jqGrid('navGrid', '#jqTableCompletedPager', { del: false, add: false, edit: false, search: false });
$("#jqTableCompleted").jqGrid('filterToolbar', { searchOnEnter: false, searchOperators: true });
$("#jqTableCompleted").jqGrid('navButtonAdd', '#jqTableCompletedPager',
{ caption: "Export to Excel", buttonicon: "ui-icon-extlink", title: "Export", id: "btnExport",
onClickButton: function (evt) {
var UserName = $('#ddlUserName option:selected').val();
var RequestNumber = $('#txtRequestNo').val();
var FunctionName = encodeURIComponent($('#ddlOPMSFunction option:selected').text());
var ProcessName = encodeURIComponent($('#ddlOPMSProcess option:selected').text());
var Category = $('#ddlSearchCategory option:selected').text();
var WorkTypeName = $('#ddlSearchWorkType option:selected').text();
var SearchStatus = $('#ddlSearchStatus option:selected').text();
var TransactionStartTS = $('#txtFromDate').val().toString();
var TransactionEndTS = $('#txtToDate').val().toString();
window.open("../Search/Export?UserName=" + UserName + "&RequestNumber=" + RequestNumber + "&FunctionName=" + FunctionName + "&ProcessName=" + ProcessName + "&Category=" + Category + "&WorkTypeName=" + WorkTypeName + "&SearchStatus=" + SearchStatus + "&TransactionStartTS=" + TransactionStartTS + "&TransactionEndTS=" + TransactionEndTS + "&ActionName=" + "Closed");
}
});
}
Although the data is being returned and in the correct format, from the controller, as follows, the grid does not show any result.
var jsonData = new
{
page = page,
rows = data
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Also is there any limit on number of records or dependency on the browser when returning all the data from server using the loadonce option?
Any help would be much appreciated. Thanks.
Finally I found the solution for the above problem by tracing the request in Fiddler, in the response title following error was shown:
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
Upon searching for the above error, I found a workaround:
Here
Basically the problem area was not the jqGrid, but was MaxJsonLength property of JavaScriptSerializer which defaults to 2097152 characters ~ 4 MB of data. Source: MaxJsonLength
To get it working, I replaced the following code in my Action method:
return Json(jsonData, JsonRequestBehavior.AllowGet);
with:
var jsonResult = Json(jsonData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Thanks.

issue in showing pager after reloading the jqxgrid data on click event

I am trying to reload the grid on click event. Here is my code for grid
var source = {
datatype: "json",
datafields: [
{ name: 'sno' },
{ name: 'bid' },
{ name: 'city' },
{ name: 'booking_date' },
{ name: 'amount' },
{ name: 'customer_contact' },
{ name: 'user_name' },
{ name: 'trip_type' },
{ name: 'comments' },
{ name: 'action' },
],
cache: false,
url: 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param,
data: {
pagesize:50
},
root: 'Rows',
//sortcolumn: 'area',
// sortdirection: 'asc',
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 1100,
source: dataadapter,
theme: 'classic',
autoheight: true,
pageable: true,
pagesize:50,
enablebrowserselection: true,
selectionmode: 'singlecell',
//sortable:true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns:
[
{ text: 'No', datafield: 'sno', width: 30 },
{ text: 'Booking Id', datafield: 'bid', width: 90, align: 'center',cellsAlign: 'center' },
{ text: 'City', datafield: 'city', width: 170 },
{ text: 'Car Book Date', datafield: 'booking_date', width: 100, align: 'center',cellsAlign: 'center' },
{ text: 'Amount', datafield: 'amount', width: 60, align: 'right',cellsAlign: 'right' },
{ text: 'Customer Contact', datafield: 'customer_contact', width: 205 },
{ text: 'User Name', datafield: 'user_name', width: 125 },
{ text: 'Trip Type', datafield: 'trip_type', width: 160},
{ text: 'Comments', datafield: 'comments', width: 80, align: 'center',cellsAlign: 'center'},
{ text: 'Action', datafield: 'action', width: 80, align: 'center',cellsAlign: 'center'},
]
});
// event handling on select of date range and click on button show
$("#btn_show").on("click", function (e) {
e.preventDefault();
var start_date_param = $("#start_date").val();
var end_date_param = $("#end_date").val();
source.url = 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param;
dataadapter.dataBind();
});
On click of button "btn_show", I could get the data from page 0, but if I am on page 4, then after click event, my grid pager is remains on page 4 only and data is display for page 0.If I click on next page, then it jumps from page 0 to next page i.e page 5.
Why jqxgrid is not resetting its recordedstartindex and recordedendindex values on dataadapter.dataBind() call after click event?
Do I need to use any other function to reload my complete grid??
I think that the following:
$("#jqxgrid").jqxGrid('gotopage', 0);
should replace
dataadapter.dataBind();
In your code.

Using the kendo ui web grid, how do i make a cell in my grid a link to my ActionResult in my controller?

In the example below I want to be able to click on the ProductName in the grid so that it takes me to my actionresult in my controller. Any ideas?
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: '#Url.Action("GetCars", "Home")' }
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: [ { name: "create", text: "Add a new car" }],
height: 550,
sortable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 150 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
});
</script>

Resources