I am trying to use js grid for my application. I am trying to populate the grid after ajax request but it do not seem to work as expected.
I am trying with SQL Server as back end and web application is asp.net MVC
This is my code in the html
var table;
var result;
var $j = jQuery.noConflict();
$j(document).ready(function () {
table = $j('#grid').jsGrid({
height: "60%",
width: "50%",
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
controller: {
loadData: function (filter) {
var d = $j.Deferred();
$j.ajax({
type: "POST",
contentType: "application/json",
url: "#Url.Action("LoadData", "User")",
datatype: "json",
data: filter
#*success: function (data) {
result = data.data;
console.log("result", result);
d.resolve(result)
},
error: function (data) {
window.location.href = '#Url.Action("Error", "Audit")';
}*#
}).done(function (data) {
console.log("response", data);
console.log("data.data", data.data);
d.resolve(data)
});
return d.promise();
},
fields: [
{ name: "LastName", type: "text"},
{ name: "FirstName", type: "text"},
{ name: "Email", type: "email"},
{ name: "PhoneNumber", type: "number"},
{ type: "control" }
]
}
});
});
In Controller I return
''return Json(new { data }, JsonRequestBehavior.AllowGet);''
I expect the json data to bind in the div. But it did not ? Thanks
Ok, so I've had this problem recently.
First off, change your "height" to px, auto, or get rid of it entirely. It's not doing what you think it's doing.
Next, since you have paging, you need to return your data in the following format:
{
data: [{your list here}],
itemsCount: {int}
}
It's barely in the documentation, as it's inline and not very obvious. (Bolding mine.)
loadData is a function returning an array of data or jQuery promise that will be resolved with an array of data (when pageLoading is true instead of object the structure { data: [items], itemsCount: [total items count] } should be returned). Accepts filter parameter including current filter options and paging parameters when
http://js-grid.com/docs/#controller
Related
i am trying to do a server side processing which is load on demand , i am using mvc to develop my application
the following is my code on the datatables js class,
var initTrackingTable = function () {
var table = $('#tableCategoryList');
var daterange = $("#daterangepicker").val();
val_CategoryName = $("#SearchTextBox").val();
//val_Daterange = $("#trackingForm").find("[name='daterangepicker']").val();
settingsInitEmpty = {
ajax: ({
url: "/Product/LoadCategoryData?category=" + val_CategoryName,
type: "POST",
datatype: "json"
}),
// ### FOR SERVERSIDE LODING
processing: true,
serverSide: true,
filter: false,
orderMulti: false,
columns: [
{ data: "category_id", name: "category_id", autoWidth: true },
{ data: "category_name", name: "category_name", autoWidth: true, render: function (data, type, row) { return '<span class="">' + data + '</span>' } },
{ data: "sort_order", name: "sort_order", autoWidth: true },
],
initComplete: function (settings, json) {
$("#tableCategoryList").parent().addClass("tableTransactionGridWrapper")
}
};
categoryTable = table.DataTable(settingsInitEmpty);
}
on the category_name there, i wish to put the hyperlink, however the hyperlink i intend to put the category_id as a query string parameter so i am able to edit the category. may i ask is this achievable? if yes, how the code suppose to be?
I have a problem populating a jsgrid from with JSON data and I have scaled down the code to a very minimal implementation but it is still not working.
I can see in the Chrome debugger that the REST call returns data on this format
{data: [{ "Name":"MyAccount"}]}
Anyone who can see what is wrong?
<script>
$(function () {
$("#jsGrid").jsGrid({
height: "auto",
width: "100%",
sorting: true,
paging: false,
autoload: true,
controller: {
loadData: function (filter) {
console.log(filter);
return $.ajax({
type: "GET",
url: "http://localhost:8888/GetListJSGrid",
data: filter,
dataType: "json"
});
}
},
fields: [
{ name: "Name", type: "text", width: 150 }
]
});
});
The format of returned data should be an array of items, not a JSON object with data field.
Note that for loading by page (pageLoading: true) this format is different: { data: [arrayOfItems], totalCount: amountOfItems }.
For the code above you could do the following:
loadData: function (filter) {
console.log(filter);
return $.ajax({
type: "GET",
url: "http://localhost:8888/GetListJSGrid",
data: filter,
dataType: "json"
}).then(function(result) {
return result.data;
});
}
Ok, I solved. It seems that the documentation is not updated for JSGrid or that I have missed something here.
By comparing the response from the link below that is working in JSGrid
ODataTest
I noticed that the following JSON is accepted by JSGrid
{"value": [{ "Name":"MyAccount"}]}
I need to set default values to the select2 option select which is multiple select and ajax.
Here is the code that i have so far
$("#firstList").select2({
placeholder: "Enter Pincode",
allowClear: true,
cache: true,
initSelection : function (element, callback) {
var data = {id: "IN", text: "INDIA"};
callback(data);
},
ajax: {
url: "../getZipList",
type: "POST",
contentType: "application/json; charset=utf-8",
delay: 250,
data: function (params) {
//console.log(params)
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.items
};
//console.log(data.it)
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
})
When i try this
initSelection : function (element, callback) {
var data = {id: "IN", text: "INDIA"};
callback(data);
},
The initial values didn't set...
I also tried
var data = [{
id: 'value',
text: 'Text to display'
}];
var tags = $("#firstList option").each(function () {
data.push($(this).val());
});
But the initial values are not setting.
What is the problem i am doing and how can i fix it. Help pls
I have a Kendo grid that is being generated in an external javascript file as well as having data bound to it, and I been getting
Uncaught TypeError: Cannot read property 'uid' of undefined(anonymous function)
I have no idea where this 'uid' is coming from, I have been stepping through the code and and I think the error is coming in when trying to pass the returned data to the datasource of the grid.
My grid is this (and the grid does appear in the view)
function ShowAdministratorsGrid() {
$("#adminGrid").kendoGrid({
dataSource:[{
data: GetAdministratorsInformation()
}],
columns: [{
field: "AdministratorName",
title: "AdministratorName"
},
{
field: "DateCreated",
title: "DateCreated"
},
{
field: "CreatedBy",
title: "CreatedBy"
}],
Scrollable: true,
Sortable: true,
Pageable: [{
Refresh: true,
PageSizes: true,
ButtonCount: 5
}],
Selectable: true,
Events: function (e) {
e.onRowSelect();
}
})
}
The datasource data is this
function GetAdministratorsInformation() {
$.ajax({
type: "GET",
url: AddURLParam.AddGetAdminInformationURL,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
GetAdministratorData(data);
}
})
}
The GetAdministratorData function is this..
function GetAdministratorData(admindata) {
administratorName = admindata.administratorName,
dateCreated = admindata.dateCreated,
createdBy = admindata.createdBy
}
I am getting the returned data, as you can see in ScreenShot1
If you take a look at ScreenShot2, I am getting an undefined when adding the returned values to the GetAdministratorData, here is the screenshot
So I am thinking that is why I am getting the error on populating the KendoGrid, does anyone see what I am doing wrong or where things are going wrong?
EDIT
I narrowed down where the error is being thrown..
data is an array. so you need to access the item by admindata[0].administratorName.
Or loop through the array, I don't really know what you're trying to do. In any case, data is an array, which (right now) just contains the one object.
Also, on this line
dataSource:[{
data: GetAdministratorsInformation()
}],
GetAdministratorsInformation doesn't really return anything since it's an async operation. If you want to set the data, you'll need to do it on your success callback in GetAdministratorsInformation
And in your columns settings, the field names are pascal case AdministratorName while in the data object they're camel case administratorName
To recap:
function CreateAdministratorsKendoGrid(administratorData) {
$("#adminGrid").kendoGrid({
dataSource:[{
data: administratorData
}],
columns: [{
field: "administratorName",
title: "Administrator name"
},
{
field: "dateCreated",
title: "Date created"
},
{
field: "createdBy",
title: "Created by"
}],
Scrollable: true,
Sortable: true,
Pageable: [{
Refresh: true,
PageSizes: true,
ButtonCount: 5
}],
Selectable: true,
Events: function (e) {
e.onRowSelect();
}
})
}
function InitializeAdministratorsGrid() {
$.ajax({
type: "GET",
url: AddURLParam.AddGetAdminInformationURL,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
CreateAdministratorsKendoGrid(data);
}
})
}
InitializeAdministratorsGrid();
Resolved issue as follow:
var objectDDL = e.container.find("select:eq(0)").data("kendoDropDownList");
var rows = jQuery.makeArray(objectDDL.dataSource.data());
$.each(rows, function (index, value) {
objectDDL.dataSource.remove(rows[index]);
});
I have this code that gets json object from a static url and then renders grid. But I want to use json data retrived as AJAX response and then render grid using this response text. Because for practical deployment I can't use static URL.
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {url: "http://url/returnsjsonobject.php"}
//THIS GETS DATA FROM STATIC URL BUT I WANT TO READ DATA AS AJAX RESPONSE
//like read: somefunctioncall
//or like read: somevariable
},
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
height: 430
columns: [
{field: "id", title: "ID", width: "20px", hidden: "true"},
"name",
});
Thanks in advance for help and if you have any alternative method; I will be happy to try it.
Remember that transport.read.url does not have to be a constant but might be a function:
transport: {
read: {
url: function(options) {
return "somefunctionalcall?id=" + options.id,
},
dataType: "json"
}
or even define transport.read as a function:
transport: {
read: function (options) {
$.ajax({
dataType: "json",
url: "somefunctionalcall",
success: function (d) {
options.success(d);
}
});
}
}