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>

Kendo Grid not sorting data

I have made grid as below:
$("#gvObservationScore").kendoGrid({
dataSource: Data,
columns: [{
title: "Code",
width: 4,
template: "#= getCodeForScoreGrid(TitleCode,componentCode)#"
}, {
field: "CorrelatedTo",
title: "CorrelatedTo",
width: 30,
template: "#= getCorrelationTextForScoreGrid(correlatedTo,CorrScoreID)#"
}
, {
field: "Score",
title: "Score",
width: 5,
template: "#= getScoreTextForScoreGrid(correlationScore,correlatedTo,CorrScoreID)#"
}
, {
field: "NS",
title: "NS",
width: 3,
template: "#= getNSRadioButtonForScoreGrid(correlationScore,correlatedTo,CorrScoreID,CorrID,componentCode)#"
}
, {
field: "1",
title: "1",
width: 3,
template: "#= getOneScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "2",
title: "2",
width: 3,
template: "#= getTwoScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "3",
title: "3",
width: 3,
template: "#= getThreeScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "4",
title: "4",
width: 3,
template: "#= getFourScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "AddComment",
title: "Add Comment",
width: 10,
template: "#= getAddCommentButtonForScoreGrid(componentCode,CorrScoreID,CorrID,commentCount) #"
}
//getThreeScoreRadioButtonForScoreGrid
],
sortable: true
});
It looks as follows:
But grid is not getting sorted.
I have already kept sortable:true in my code.
Also tried with :
sortable: {
mode: "single",
allowUnsort: false
}
Then also not getting sorted.
Please help me.

Try this...
$("#gvObservationScore").kendoGrid({
dataSource: Data,
sortable: true,
columns: [{
title: "Code",
width: 4,
sortable: true,
template: "#= getCodeForScoreGrid(TitleCode,componentCode)#"
}, {
field: "CorrelatedTo",
title: "CorrelatedTo",
width: 30,
template: "#= getCorrelationTextForScoreGrid(correlatedTo,CorrScoreID)#"
}
................
I have added sortable to the grid, and a column as an example
EDIT:
Since all are templates, you might be missing the escape characters before the # tags i.e.
template: "//#= getCodeForScoreGrid(TitleCode,componentCode)//#"

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>

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!