jqGrid is not showing json data fetched from MVC controller, it also has a emptyrecords label which is also not visible in this case. Here is my jQuery code-
$(function () {
$("#JQGrid1").jqGrid({
url: "/CertificateDetails/GetCertificateDetails",
datatype: 'json',
mtype: 'Get',
colNames: ['Name', 'Issuer', 'Location', 'Private Key[Yes/No]'],
//data: dataArray,
colModel: [
{
key: false,
name: 'Name',
index: 'Name',
editable: false
},
{
key: false,
name: 'Issuer',
index: 'Issuer',
editable: false
},
{
key: false,
name: 'Location',
index: 'Location',
editable: false
},
{
key: false,
name: 'HasPrivateKey',
index: 'HasPrivateKey',
editable: false
}
],
height: '100%',
viewrecords: true,
caption: "Certificate Details",
emptyrecords: "No record to display!!"
});
});
Controller code:
CertDetails cd = new CertDetails();
public ActionResult Index()
{
return View();
}
//
// GET: /CertificateDetails/
public ActionResult GetCertificateDetails()
{
var stores = new Dictionary<StoreName, string>()
{
{StoreName.My, "Personal"},
{StoreName.Root, "Trusted roots"},
{StoreName.TrustedPublisher, "Trusted publishers"},
{StoreName.AddressBook, "Address Book"},
{StoreName.AuthRoot, "Auth Root"},
{StoreName.CertificateAuthority, "Certificate authority"},
{StoreName.Disallowed, "Disallowed"},
{StoreName.TrustedPeople, "Trusted people"}
// and so on
}.Select(s => new { store = new X509Store(s.Key, StoreLocation.LocalMachine), location = s.Value }).ToArray();
foreach (var store in stores)
store.store.Open(OpenFlags.ReadOnly); // open each store
var list = stores.SelectMany(s => s.store.Certificates.Cast<X509Certificate2>()
.Select(mCert => new CertDetails
{
HasPrivateKey = mCert.HasPrivateKey ? "Yes" : "No",
Name = mCert.FriendlyName != "" ? mCert.FriendlyName : "Unavailable",
Location = s.location,
Issuer = mCert.Issuer
})).ToList();
return Json(list,JsonRequestBehavior.AllowGet);
}
Here is the data returned from controller action method-
[{"Name":"Unavailable","HasPrivateKey":"Yes","Location":"Personal","Issuer":"CN=Dell Issuing Certificate Authority 302, OU=MS PKI, O=Dell Inc."},{"Name":"IIS Express Development Certificate","HasPrivateKey":"Yes","Location":"Personal","Issuer":"CN=localhost"}]
I'm getting the data in JSON format from the controller but neither jqGrid shows any data nor it shows empty records label. Any idea how to solve this issue?
You can try jQuery DataTable plugin instead, like below:
$(document).ready(function () {
$("#myGrid").dataTable({
"ajax": {
"url": "/CertificateDetails/GetCertificateDetails",
"dataSrc": ""
},
"columns": [{
"data": "Name"
}, {
"data": "Location"
}, {
"data": "Issuer"
}, {
"data": "HasPrivateKey"
}]
});
});
<table id="myGrid">
<thead>
<tr style="text-align:left;">
<th>Name</th>
<th>Location</th>
<th>Issuer</th>
<th>HasPrivateKey?</th>
</tr>
</thead>
</table>
Don't forget to add the references-
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
Related
I am new in MVC. I have tested my site in debug mode. So far there is no problem. But when i deploy it to my localhost i am having an issues "POST http://localhost/Home/GetEnumerationList 404 (Not Found)". It looks like it failed to call the action in controller. When i look at the address it shows like this "http://localhost/mymvcsite" instead of like this "http://localhost". I have also test using Postman, when i run post as this "http://localhost/mymvcsite/Home/GetEnumerationList" only then i will get the result.
Is there a way i can set up my iis to remove "mymvcsite" from "http://localhost/mymvcsite"?
Here is the JQuery to call the Action in Controller.
<script>
var popup, dataTable;
$(document).ready(function () {
dataTable = $("#batchTable").DataTable({
"ajax": {
"url": "/Home/GetEnumerationList",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "EnumType", "name":"EnumType" },
{ "data": "EnumValue", "name": "EnumValue" },
{ "data": "EnumText", "name": "EnumText" },
{ "data": "IsDeleted", "name": "IsDeleted" },
{
"data": "EnumId", "render": function (data) {
return "<a class='btn btn-default btn-sm' onclick=PopupForm('#Url.Action("AddOrEdit","Home")/" + data +"')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm' style='margin-left: 5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>";
},
"orderable": false,
"searchable": false,
"width": "150px"
},
],
"processing": "true",
"serverSide": "true",
"order": [0, "asc"]
});
});
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: "Add Enum",
height: 470,
width: 300,
close: function () {
popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
success: function (data) {
if (data.success) {
popup.dialog('close');
dataTable.ajax.reload();
$.notify(data.message, {
globalPosition: "top center",
className: "success"
})
}
}
});
}
return false;
}
function Delete(id) {
if (confirm("Are you sure you want to delete this data?")) {
$.ajax({
type: "POST",
url: '#Url.Action("DeleteEnum", "Home")/' + id,
success: function (data) {
if (data.success) {
dataTable.ajax.reload();
$.notify(data.message, {
globalPosition: "top center",
className: "success"
})
}
}
}
)
}
}
</script>
Hopefully someone can please guide me on this.
You might need to set the default route mapped to your mymvcsite at your backend.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "mymvcsite", action = "Index", id = UrlParameter.Optional }
);
Instead of add the site as virtual directory of "Default Web Site", i add new website and point it to my webroot physical path. I hope this helps anyone in the future.
I have an asp.net application in which I am using multiple kendo charts. My requirement is to show the remote data using aspx web methods. But I am not getting any data in kendo charts.
Here is my code,
var dataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: {
type: "POST",
url: "Commercial.aspx/FetchCounts",
contentType: 'application/json; charset=utf-8',
datatype: "json"
}, //read
parameterMap: function (options) {
return $.parseJSON(options);
}
},
serverFiltering: false,
serverSorting: false,
schema: {
data: "d",
model: {
fields: {
current: { type: "string" },
target: { type: "string" }
}
}
}
});
function createSparklines() {
$("#chart-CurrentWeekCount").kendoChart({
legend: {
visible: false
},
dataSource : dataSource,
series: [{
type: "bullet",
currentField: "current",
targetField: "target",
target: {
color: "#e13c02"
},
}],
categoryAxis: {
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: [{
plotBands: [{
from: 0, to: 8000, color: "#ccc", opacity: .3
}],
majorGridLines: {
visible: false
},
min: 0,
max: 8000,
majorUnit: 2000,
minorTicks: {
visible: true
}
}],
tooltip: {
visible: false,
template: "Goal: #= value.target # <br /> Current: #= value.current #"
}
});
}
$(document).ready(createSparklines);
$(document).bind("kendo:skinChange", createSparklines);
The method "FetchCounts" returns the following data :
[{"current":5000,"target":7500}]
Please let me know what I am missing. Any ideas will be appreciated.
Thanks.
Im trying to keep option "All" for showing all the data in grid by using following code.
but when the code reaches grid.pager.element its showing error as "pager" undefined.
at first when i click on search with group "TBU" there is no option for All.When i click again "All" appears as how many times i have clicked.
$.ajax({
type: "POST",
url: "Report_Services/Report.asmx/BindKendoAvailableList",
data: "{'groupId':" + $('#cboGroupName option:selected').val() + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
data = result.d;
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(data);
}
},
schema: {
type: "xml",
data: "/NewDataSet/myTable",
model: {
// configure the fields of the object
fields: {
AssetCode: "AssetCode/text()",
AssetName: "AssetName/text()"
AssetStatusName: "AssetStatusName/text()"
}
}
},
pageSize: 10
},
sortable: true,
filterable: true,
reorderable: true,
navigatable: true,
selectable: "multiple",
columnMenu: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 8
},
columns:
[{
field: "AssetCode",
title: "Asset Id"
}, {
field: "AssetName",
title: "Asset Name"
},{
field: "AssetStatusName",
title: "Status"
}]
});
}
});
debugger;
var grid = $("#grid").data("kendoGrid");
var dropdown = grid.pager.element
.find(".k-pager-sizes [data-role=dropdownlist]")
.data("kendoDropDownList");
var item = {};
item[dropdown.options.dataTextField] = "All";
item[dropdown.options.dataValueField] = 1000000;
dropdown.dataSource.add(item);
dropdown.bind("change", function (e) {
if (this.text() == "All") {
grid.one("dataBound", function () {
setTimeout(function () {
dropdown.span.text("All");
});
});
}
});
In your case it sounds like the grid variable is undefined not the pager. Make sure that you execute this code after the Grid is actually initialized and also make sure the selector is right.
Currently I have this:
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: {
transport: {
read: {
url: "#Html.Raw(
Url.Action(
"Filter_Rooms",
"Room",
new {
pFilter = false,
pCapacity = 25,
pBeamer = true,
pTelevision = false
}))",
dataType: "json"
},
}
}
}
]
These parameters pFilter = false, pCapacity = 25, pBeamer = true, pTelevision = false, for the filter are now hard coded but actually I want them from:
HTML
<div class="checkbox">
<label>
<input id="chkBeamer" type="checkbox"> Beamer available
</label>
</div>
Filter rooms
Javascript
$(document).ready(function () {
$("#btnFilter").click(function () {
var pFilter = document.getElementById("chkBeamer").checked;
});
});
Can I get the javascript to use the pFilter parameter instead of the hard-coded ones?
HTMLHidden
<div class="checkbox">
<label>
#Html.Hidden("pBeamer", true);
<input id="chkBeamer" type="checkbox"> Beamer available
</label>
</div>
Javascript Resources
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: {
transport: {
read: {
url: "#Html.Raw(
Url.Action(
"Filter_Rooms",
"Room",
new {
pBeamer = ("#pBeamer")???
}))",
dataType: "json"
},
}
}
}
]
There are two ways in which you can do this:-
1) You can have hidden fields for each of these four fields which you can fill in your Javascript function on click of btnFilter. Access those hidden fields while using resources.
#Html.Hidden("pFilter","<value>");
You can access these hidden fields in your code below.
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: {
transport: {
read: {
url: "#Html.Raw(
Url.Action(
"Filter_Rooms",
"Room",
new {
pFilter = <get value from hidden field>,
pCapacity = <get value from hidden field>,
pBeamer = <get value from hidden field>,
pTelevision = <get value from hidden field>
}))",
dataType: "json"
},
}
}
}
]
2) You can have global variables to which you assign values on btnFilter click and use it in resources as you are doing currently.
I would suggest you to follow the first solution.
i am trying to bind JSON data to jqgrid. But, i am not getting any data.
here, is my code:
$(function () {
$("#list").jqGrid({
url:'<%:Url.Action("LoadData","Home")%>',
datatype: "JSON",
mtype: "GET",
colNames: ["sid","sname"],
colModel: [
{ name: "sid", width: 55,align:"center"},
{ name: "sname", width: 90,align:"center"},
],
jsonReader: {
repeatitems: false
},
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My first grid"
});
});
I am using it in Asp.net MVC Application.
I am able to hit the controller and get the JSON data..but i was unsucessful in displaying data to grid.
I am getting proper json o/p from controller.
My Controller is:
public JsonResult LoadData()
{
var Data= new DataTable();
Data= DataModel.LoadData();
var JsonData = JsonConvert.SerializeObject(Packages, Formatting.Indented);
return Json(new
{
JsonData
}, JsonRequestBehavior.AllowGet);
}
I think there is error in my JQgrid jquery code. Firtly, i want to implement the jqgrid with minimal configuration.
The JSON response i am getting is:
[
{
"sid": 2,
"sname": "ABC"
},
{
"sid": 3,
"sname": "XYZ"
},
{
"sid": 4,
"sname": "CBA"
},
{
"sid": 5,
"sname": "IIT"
},
{
"sid": 6,
"sname": "NIT"
}
]
This is my HTML Structure:
<table id="list">
</table>
<div id="pager"></div>
I removed the duplicates from the data i am fetching..
The JSON result, i have checked in Text Visualizer of Visual Studio.Its fine..
Please help..
I suppose that the reason of your problem is the usage of JsonConvert.SerializeObject. You should return object instead of string. Try to use
return Json(Packages, JsonRequestBehavior.AllowGet);
directly.
Not sure you have js code in .js file on in .aspx file.
Anyway try this and check the request/response with Firefox/Chrome console
$(function () {
$("#list").jqGrid({
url:/Home/LoadData/,
datatype: "json",
mtype: "GET",
colNames: ["sid","sname"],
colModel: [
{ name: "sid", width: 55,align:"center"},
{ name: "sname", width: 90,align:"center"},
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
caption: "My first grid"
});
});
HTML
<table id="list"></table>
<div id="pager"></div>