We Keep Coding

Invalid JSON primitive: Date

I keep getting the following error: "Invalid JSON primitive: Date". I am not sure how to correct as I have changes to the front/back-end of the project. Everything seems to be working other than when I de-bug the JavaScript. My front-end code is as follows (I only included some HTML, where a date is used):
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent"
runat="server">
<script>
$("#Grid").kendoGrid({
"dataSource": {
"transport": {
"read": {
"url": "CreateReq.aspx/PopulateMessages",//page then function
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "json",
"data": {
requestID: document.getElementById("lblRequestID").textContent
}
},
create: {
url: "CreateReq.aspx/CreateMessage",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
"data": {
}
},
"prefix": ""
},
"schema": {
data: function (response) {
return response.d;
},
model: {
fields: {
Date: { type: "date",editable: false, format: "{0: MM/dd/yyyy}", encoded: true, /*defaultValue: Date.now*/ },
Author: { type: "string", editable: true},
Message: { type: "string" },
}
}
},
},
//pageable: true,
height: 225,
toolbar: ["create"],
columns: [
{ field: "Date", title: "Date", width: "75px", /*template: '#= kendo.toString((Date), "MM/dd/yyyy")#'*/ format: "{0: MM/dd/yyyy}", encoded: true},
{ field: "Author", title: "Author", width: "75px" },
{ field: "Message", title: "Message", width: "300px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
</script>
<h1 style="text-align: center">Academic Code Request</h1>
<div class="TopPageButtons" style="text-align: center">
<br />
</div>
<div class="TrackingBox">
<div class="TrBoxContent">
<div>
<label><b>ID</b></label><br />
<asp:Label ID="lblRequestID" Text="" runat="server" ClientIDMode="Static"/>
</div>
<div>
<label><b>Form View Date</b></label><br />
<asp:TextBox ID="RequestDate" runat="server" ClientIDMode="Static" style="text-align:center"/>
<script>
document.getElementById("RequestDate").value = new Date().toString();
</script>
</div>

How to filter whole datasource on a kendo grid with virtualized remote data

At work, we are having performances issues with a kendo grid that has a lot of row. We are thinking about using virtualization of remote data as a solution like you can see on the link below.
https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
The problem we have with that solution is that we allow filters on a lots of our columns and only the rows that are defined in the pagesize of the grid are displayed.
In the link below, you can easily see what I mean by that. I added the filterable attribute to the grid in the telerik demo and only the rendered row are displayed if I try to add a filter.
https://dojo.telerik.com/ayaKidet
The question was previously asked here but without an answer :(
Kendo Grid Virtualization of Lots of Data with Filters?
If anyone know of a way to apply the filter to the whole datasource it would be awesome.
Thank you very much

As well as you have set serverSorting to true in your datasource (the following code is from the dojo link):
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [
{field: "OrderID", title: "Order ID", width: 110},
{field: "CustomerID", title: "Customer ID", width: 130},
{field: "ShipName", title: "Ship Name", width: 280},
{field: "ShipAddress", title: "Ship Address"},
{field: "ShipCity", title: "Ship City", width: 160},
{field: "ShipCountry", title: "Ship Country", width: 160}
]
});
you should set serverFiltering to true. The question is that, by default, filtering is applied to the data that is in memory but, of course, not all records that meet the condition have already been transferred and, of course, you don't want to transfer all data before start filtering.
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true, // Add this to your code
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [{
field: "OrderID",
title: "Order ID",
width: 110
},
{
field: "CustomerID",
title: "Customer ID",
width: 130
},
{
field: "ShipName",
title: "Ship Name",
width: 280
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipCity",
title: "Ship City",
width: 160
},
{
field: "ShipCountry",
title: "Ship Country",
width: 160
}
]
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>

How to search grid by textbox ID?

I am Using jqgrid in mvc 4. I want to show grid data only those data which match with OrderNo. Grid is showing but data is not showing. Here is Controller where i am writing my sql search method for filtering data. please suggest me the better way to search data in grid view?
public ActionResult getItemsByOrder(string OrdNo)
{
try
{
List<OrderDtl> itm = db.Fetch<OrderDtl>("select * from OrderDtls where OrderNo=" + OrdNo).ToList();
return Json(itm, JsonRequestBehavior.AllowGet);
}
catch
{
return Json(null, JsonRequestBehavior.AllowGet);
}
}
Here is my script. I think my problem is in url: line or in controller. Please Help me to solve my solution.
</script>
<link rel="stylesheet" type="text/css" href="/scripts/css/ui.jqgrid.css" title="coffee" media="screen" />
<script src="~/Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="~/Scripts/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
var ord = $('#OrderNo').val();
jQuery("#list").jqGrid({
url: '/NewOrder/getItemsByOrder/' + ord,
datatype: 'json',
mtype: 'GET',
colNames: ['ItemId', 'ItemName', 'Quantity', 'Rate', 'Amount', 'Action'],
colModel: [
{ name: 'ItemId', index: 'Id', width: 100, align: 'left' },
{ name: 'ItemName', index: 'ItemName', width: 100, align: 'left' },
{ name: 'Quantity', index: 'Quantity', width: 200, align: 'left' },
{ name: 'Rate', index: 'Rate', width: 200, align: 'left' },
{ name: 'Amount', index: 'Amount', width: 200, align: 'left' },
{ name: 'Action', index: 'Action', width: 100, align: 'left' }
],
cellEdit: true,
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'ItemId',
sortorder: "desc",
viewrecords: true,
width: 950,
imgpath: '/scripts/themes/coffee/images',
caption: 'Order Details Grid'
});
});
</script>

Align Grid JQuery

I need an help to align this table. I don't know work with design. How I can align and adapt size to each column, and the table in full size in my window?
I want all auto align. Width and Height (Full size).
My code:
$(document).ready(function () {
source =
{
datatype: "xml",
datafields: [
{ name: 'User', type: 'string' },
{ name: 'AccessGroup', type: 'string' },
{ name: 'FolderAccess', type: 'string' },
{ name: 'RequestDate', type: 'Date' },
{ name: 'SituationDesc', type: 'string' },
{ name: 'Approver', type: 'string' },
{ name: 'ApprovalDate', type: 'Date' },
{ name: 'BusinessJustification', type: 'string' },
{ name: 'AllBusinessJustification', type: 'string' },
{ name: 'UserRequestor', type: 'string' }
],
async: false,
record: 'Table',
url: 'Tickets.aspx/GetTickets',
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8'}
);
$("#jqxgrid").jqxGrid(
{
width: 3000,
source: dataAdapter,
theme: 'classic',
autoheight: true,
columns: [
{ text: 'User', datafield: 'User', widht: 'auto' },
{ text: 'Access Group', datafield: 'AccessGroup', widht: 'auto' },
{ text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto' },
{ text: 'Request Date', datafield: 'RequestDate', widht: 'auto' },
{ text: 'Situation', datafield: 'SituationDesc', widht: 'auto' },
{ text: 'Approver', datafield: 'Approver', widht: 'auto' },
{ text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto' },
{ text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto' },
{ text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto' },
{ text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' },
]
});
});
<body>
<form id="form1" runat="server">
<div>
<div align="center" style="width: 100%; height: 100%;">
<img src="image/NdriveBanner.png" align="center" />
</div>
<br />
<br />
<div id="jqxgrid">
</div>
<br />
<br />
<div align="center" style="width: 100%; height: 100%;">
<asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/image/home_back_48.png"
NavigateUrl="~/home.aspx">homepage</asp:HyperLink>
</div>
</div>
</form>

Here's a sample code which shows how to set the Grid's size in percentages so it will be auto-resized.
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this sample, the Grid's size is set in percentages. When you resize the browser's window, the Grid's Width and Height will be automatically adjusted. The "width" and "height" properties of jqxGrid in this sample are set to "50%"</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var theme = getDemoTheme();
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{ name: 'name', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'date', type: 'date'},
{ name: 'quantity', type: 'number' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '50%',
height: '50%',
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' },
{
text: 'Product', datafield: 'productname', width: '35%'
},
{ text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
{ text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid">
</div>
</body>
</html>

jqgrid is providing the align property to each columns, to align header you need to change in the jqgrid css to the respective call for the headers.
for the align in columns you can add like this
$("#jqxgrid").jqxGrid(
{
width: 3000,
source: dataAdapter,
theme: 'classic',
autoheight: true,
columns: [
{ text: 'User', datafield: 'User', widht: 'auto',align="center" },
{ text: 'Access Group', datafield: 'AccessGroup', widht: 'auto',align="center" },
{ text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto',align="center" },
{ text: 'Request Date', datafield: 'RequestDate', widht: 'auto',align="center" },
{ text: 'Situation', datafield: 'SituationDesc', widht: 'auto',align="center" },
{ text: 'Approver', datafield: 'Approver', widht: 'auto' ,align="center"},
{ text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto',align="center" },
{ text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto',align="center" },
{ text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto',align="center" },
{ text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' ,align="center"},
]
});

jqGrid subGridRowExpanded function is not working properly

I am a beginner in the jQgrid, Last days i try to learn jQgrid and create a sample
Mvc application. refer on jQgrid Website. http://www.trirand.com/blog/jqgrid/jqgrid.html
I try to make a Grid as Subgrid in jQGrid. I want Add, Edit, Delete functions in all
child grid is possible.
and i am facing a problem when i expand a row in the jQgrid, parent row is not showing
the collapse icon. Please see my image below.
please see the Red box. It's not showing the minus icon. Please see my code below.
<table id="listsg11">
</table>
<div id="pagersg11">
</div>
<script type="text/javascript">
jQuery("#listsg11").jqGrid({
url: '/Home/DynamicGridData/',
datatype: "json",
mtype: 'POST',
height: 190,
width: 600,
colNames: ['Id', 'Votes', 'Title'],
colModel:
[
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Votes', index: 'Votes', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 400, align: 'left' }
],
rowNum: 8,
rowList: [8, 10, 20, 30],
pager: '#pagersg11',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
caption: "Grid as Subgrid"
,
subGridRowExpanded: function (subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created whitin a table data
// the id of this elemenet is a combination of the "sg_" + id of the row
// the row_id is the id of the row
// If we wan to pass additinal parameters to the url we can use
// a method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the flowing
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_table_id).jqGrid({
url: "/Home/DynamicGridData1/",
datatype: "json",
mtype: 'POST',
colNames: ['Id', 'Votes', 'Title'],
colModel:
[
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Votes', index: 'Votes', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 400, align: 'left' }
],
rowNum: 20,
rowList: [8, 10, 20, 30],
pager: pager_id,
sortname: 'Id',
sortorder: "asc",
height: 180,
width: 500,
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: true, add: true, del: true })
}
//,
// subGridRowColapsed: function (subgrid_id, row_id) {
// alert(row_id);
// // this function is called before removing the data
// //var subgrid_table_id;
// //subgrid_table_id = subgrid_id+"_t";
// //jQuery("#"+subgrid_table_id).remove();
// }
});
jQuery("#listsg11").jqGrid('navGrid', '#pagersg11', { add: true, edit: true, del: true });
</script>
Please help.

Why you don't try put the javascript inside of
$(function(){
//here go the script
});
Because one of the reasons are that the jqgrid are not correctly downloaded yet.
So try this!
Good Luck!