I want to show a JSON data at my table as like here: example
I used that CSS imports:
<link rel="stylesheet" href="/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="/css/ui.multiselect.css"/>
<link rel="stylesheet" href="/css/jquery-ui-1.8.1.custom.css"/>
That JS imports:
<script type=text/javascript src="/js/jquery.js"></script>
<script type=text/javascript src="/js/jquery_ui_1.8.1.js"></script>
<script type=text/javascript src="/js/jquery.layout.js"></script>
<script type=text/javascript src="/js/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="/js/ui.multiselect.js"></script>
<script type=text/javascript src="/js/jgrid_4.1.js"></script>
<script type="text/javascript" src="/js/jquery.tablednd.js"></script>
<script type="text/javascript" src="/js/jquery.contextmenu.js"></script>
(Some files has different name but they are OK)
I am getting a JSON data from an URL and when I check it it comes correctly at Firebug.
That's my HTML data:
<table id="confTable"></table>
<div id="pconfTable"></div>
That's my script to populate data:
jQuery("#confTable").jqGrid({ ajaxGridOptions : {type:"GET"}, serializeGridData : function(postdata) {
postdata.page = 1;
return postdata;
}, url:'/ui/webapp/conf', datatype: 'json', colNames:['Value','Type', 'Target Module', 'Configuration Group', 'Name', 'Description', 'Identity', 'Version', 'System Id', 'Active'],
colModel:[
{name:'value',index:'value', width:55},
{name:'type',index:'type', width:55},
{name:'targetModule',index:'targetModule', width:150},
{name:'configurationGroup',index:'configurationGroup', width:180},
{name:'name',index:'name asc', width:90},
{name:'description',index:'description', width:90},
{name:'identity',index:'identity', width:90},
{name:'version',index:'version', width:90},
{name:'systemId',index:'systemId', width:100},
{name:'active',index:'active', width:100}
], rowNum:10, width:980, rowList:[10,20,30], pager: '#pconfTable', sortname: 'name', viewrecords: true, sortorder: "desc", caption:"Configuration Information" });
jQuery("#pconfTable").jqGrid('navGrid', '#pconfTable', {edit:false,add:false,del:false});
That's JSON data that I get:
[{
"value":"10",
"type":"Tip 1",
"targetModule":"Target 1",
"configurationGroup":null,
"name":"Configuration Deneme 1",
"description":null,
"identity":"Configuration Deneme 1",
"version":0,
"systemId":0,
"active":true
},
{
"value":"50",
"type":"Tip 2",
"targetModule":"Target 2",
"configurationGroup":null,
"name":"Configuration Deneme 2",
"description":null,
"identity":"Configuration Deneme 2",
"version":0,
"systemId":0,
"active":true
},
{
"value":"100",
"type":"Tip 3",
"targetModule":"Target 3",
"configurationGroup":null,
"name":"Configuration Deneme 3",
"description":null,
"identity":"Configuration Deneme 3",
"version":0,
"systemId":0,
"active":true
}
]
I have formatted indentation to be read easiliy.
However I don't get any error from Firebug and don't have any can't imported files I still have an empty table.
Any ideas?
PS: Is there anything wrong with my JSON data, should I send a data starts as like => total: xxx, page: yyy, records: zzz, rows: or not a must?
To see the grid filled you should use the following jsonReader as additional jqGrid parameter
jsonReader: {
repeatitems: false,
id: "value",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
I suppose, that the values from the 'value' column are unique, so I used id: "value" in the jsonReader above.
By the way the ajaxGridOptions : {type:"GET"} do nothing. The default mtype: 'GET' do the same. In the call of navGrid method you should use jQuery("#confTable") instead of jQuery("#pconfTable").
After the described changed you will have the following demo. In the demo I added height: 'auto' to have less empty space in the grid.
Related
I've already implemented a dropdown in a grid column according to this demo: https://demos.telerik.com/kendo-ui/grid/editing-custom
I already did a test with this custom dropdown: https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem
I am wondering if it's possible to add this custom dropdown in a column of the grid to add a new category if the category is not found in the dropdown.
The column doesn't show in the column Comment.
I tried the following code without success, some tips of how to solve this?
EDIT 1: I tried the abinesh solution, and I think it is very close to solving this issue(http://dojo.telerik.com/OZIXOlUM). Still, the addNew function expects the widgetID. In the onclick of the add new button, the widgetID is passing nothing (see print screen). How did I get this ID? The script "noDataTemplate" is trying to get the id this way '#:instance.element[0].id#', but as I said, nothing returns.
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
</div>
<br/>
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
</script>
<script>
$(document).ready(function(){
var dataSource = new kendo.data.DataSource({
data: categories
});
var gridDataSource = new kendo.data.DataSource({
data : [ {
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "Some Comment",
"Confirmed": 1,
"Stat": 1
}]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "Stat",
title: "Status"
}, {
field: "Confirmed",
title: "Confirmed",
template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
}, {
field: "Commen",
title: "Comment",
editor: commentCategoryEditor,
template: "#=Commen#",
//template: "<input id='Commen'>",
width: 450,
nullable : true
}]
});
});
var categories = [{
"CategoryName": "-"
},{
"CategoryName": "Category 1"
}, {
"CategoryName": "Category 2"
}];
function commentCategoryEditor(container, options){
$('<input name="Commen">')
.kendoDropDownList({
filter: "startswith",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: dataSource,
noDataTemplate: $("#noDataTemplate").html()
});
}
function addNew(widgetId, value) {
var widget = $("#" + widgetId).getKendoDropDownList();
var dataSource = widget.dataSource;
if (confirm("Are you sure?")) {
dataSource.add({
CategoryID: 0,
CategoryName: value
});
dataSource.one("sync", function() {
widget.select(dataSource.view().length - 1);
});
dataSource.sync();
}
};
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vat Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="grid"></div>
</div>
</body>
</html>
Thanks in advance
I have created a sample demo project that will help you add the category drop down:
Dojo Telerik Link
Sample Output of drop down list with add new category:
Hope this helps you out!
I want to load a json file into my Tabulator table.
The programs.json is in the same directory as the html file.
My html code is rendering the table but i couldnt manage to load the local stored .json file.
There is a lot of documentation here http://tabulator.info/docs/4.9/data and http://tabulator.info/docs/3.5#set-data
The content of programs.json is following:
[{
"name": "Stomachache",
"freq": "10000,5000,880,3000,95",
"db": "XTR",
"info": "Bauchschmerzen"
}, {
"name": "Headache",
"freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
"db": "CAF",
"info": "Kopfschmerzen"
}, {
"name": "Toothache",
"freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
"db": "XTR",
"info": "Zahnschmerzen"
}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="programs"></div>
<script type="text/javascript">
var table = new Tabulator("#programs", {
ajaxURL:"./programs.json", // http://tabulator.info/docs/4.9/data
//ajaxContentType:"json",
height: 326,
layout: "fitColumns",
pagination: "local",
paginationSize: 10,
tooltips: true,
index: "name",
columns: [{
title: "Name",
field: "name",
sorter: "string",
headerFilter: "input"
},
{
title: "Frequencies",
field: "freq",
sorter: "string",
headerFilter: "input"
},
{
title: "Database",
field: "db",
sorter: "string",
editor: "select",
width: 90,
headerFilter: true,
},
{
title: "Programm Info",
field: "info",
sorter: "string",
headerFilter: "input"
},
],
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
return response.data; //pass the data array into Tabulator
},
});
</script>
</body>
</html>
fetch() doesnt support local file access. But the browser will through the tag, so if you make your programs.json be proper JS ...
programs.json :
let setData = [ { .... } ];
programs.html :
<html>
<head>
...
<script type="text/javascript" src="programs.json"></script>
</head>
<body>
...
<script>
new Tabulator("#programs",{
data:setData,
...
});
</script>
</body>
</html>
When i upload the html and json file to a webserver it gives following error -> "Error: 'setData' is undefined". Same error as when you press the "Run Code Snippet" button
Interestingly if you open this html locally on the PC it works fine.
Any suggestions why running on a webserver doesnt work?
programs.json:
let setData = [
{
"name": "Stomachache",
"freq": "10000,5000,880,3000,95",
"db": "XTR",
"info": "Bauchschmerzen"
}, {
"name": "Headache",
"freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
"db": "CAF",
"info": "Kopfschmerzen"
}, {
"name": "Toothache",
"freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
"db": "XTR",
"info": "Zahnschmerzen"
}];
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="programs.json"></script>
</head>
<body>
<div id="programs"></div>
<script>
var table = new Tabulator("#programs", {
data:setData,
height: 326,
layout: "fitColumns",
pagination: "local",
paginationSize: 10,
tooltips: true,
index: "name",
columns: [{
title: "Name",
field: "name",
sorter: "string",
headerFilter: "input"
},
{
title: "Frequencies",
field: "freq",
sorter: "string",
headerFilter: "input"
},
{
title: "Database",
field: "db",
sorter: "string",
editor: "select",
width: 90,
headerFilter: true,
},
{
title: "Programm Info",
field: "info",
sorter: "string",
headerFilter: "input"
},
],
});
</script>
</body>
</html>
I'm creating a "Rally Custom HTML" board using this grouped grid example.
https://help.rallydev.com/apps/2.1/doc/#!/example/groupable-grid
I'm having trouble adding a filter for a specific Milestone. I can get the code below to return user stories without a problem. It has a generic filter on name.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Name',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
When I try to change the filter to use "Milestones" it doesn't return any results. I'm able to access the Milestones property display it as a column.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Milestones',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
If you know the ObjectId of the milestone you're trying to filter by you can make a filter like this:
{
property : 'Milestones',
operator : 'contains',
value : '/milestone/12345'
}
Or, you can search by name as well:
{
property : 'Milestones.Name',
operator : 'contains',
value : 'A Milestone'
}
You can also just paste the url into your browser to test until you get the query right:
https://rally1.rallydev.com/slm/webservice/v2.0/hierarchicalrequirement?query=(Milestones contains /milestone/12345)
In my MVC project I have implemented JQuery datatables to retrieve data.I am using 1.9.4 jquery.dataTables.js. I have three filters to restrict the output in the table. Two of which works perfectly. However on the third option which suppose to show all records I receive "Undefined" pop up alert. I tried both in IE and Google chrome.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Call log";
}
<link rel="stylesheet" href="~/Scripts/datatables/css/jquery.dataTables.css" />
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.dataTables.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/json2.js"></script>
<script src="~/Scripts/json2.min.js"></script>
<script type="text/javascript">
$(function () {
GetUsers(1);
$('#select-filter').change(function () {
GetUsers($(this).val());
});
});
function GetUsers(filter) {
$.ajax({
url: '/home/GetAllUsers',
type: "POST",
cache: false,
data: JSON.stringify({ filter: filter }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (idata) {
DisplayDataTables(idata.aaData);
return;
},
error: function (idata) {
alert(idata.msg);
}
});
}
function DisplayDataTables(aDataSet) {
$('#divBRUsers').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl-users"></table>');
$('#tbl-users').DataTable({
"sPaginationType": "full_numbers",
"aaData": aDataSet,
"aoColumns": [
{
"sTitle": "Customer ID",
"sClass": "center",
"sName": "Employee ID",
"fnRender": function (oObj) {
return '' + oObj.aData[0] + '';
}
},
{ "sTitle": "Customer Name", "sClass": "left" },
{ "sTitle": "Customer Address", "sClass": "left" },
{ "sTitle": "Customer City", "sClass": "left" },
{ "sTitle": "Contacted Before", "sClass": "left" }
//{ "sTitle": "Campaign Name", "sClass": "center" }
]
});
}
</script>
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="div-add-campaign-form">
Filter <select class="dtSearch" id="select-filter">
<option value="1">Assigned to me</option>
<option value="2">Associated with my branch</option>
<option value="3">View all</option>
</select>
</div>
<div id="divBRUsers">
Please wait, loading data...
</div>
</div>
All right, consider the following object for your jquery dataTable instantiation:
var conf = {
columnDefs : [ { className : '...' }, targets : { 3, 6, 7} ],
columns: [
[ title : 'product id' ],
[ title : 'product name' ]
],
data : [
[ 23, "Cellular" ] // nested array, pay attention to the number of values added, 2 values, by order: productId, productName
],
order: [[0,'desc']], // first column set to desc, add a new value in the array to apply multi-order, values order matters!!
destroy : !0,
pageLength : 10,
paging : !0, // full number pagination is set as default
responsive : !0,
bSort : !0,
bSortable : !0,
bFilter : !1,
autoWidth : !1
};
As you can see, simply the object defines a table for apparently 2 columns 'productId', 'productName'; Adjust that to fit your case where it's gonna be a matter of adding values to the columns array, any extra config you wanna add to the columns you will have to add it to the columnDefs (short for columnDefinitions).
Remember, you will keep receiving errors similar to the one reported if the set of data doesn't match the columns. Make sure each nested array in the data array have the same number of values as for the columns, read the comments for more details. if for any reason, your data doesn't match that order, you gonna have to change that order manually, force empty values with '-' or 'n/a' values so all nested arrays have the same logic of values.
I hope this helps.
Good luck.
Really think this is a simple fix, but after trying other solutions posted on SO I haven't had any luck.
I'm getting an undefined function every time I select or double click on a row and each of those functions fires in the jqGrid. Code and html header below. Error is in onSelectRow and ondblClickRow when events fire.
Error output:
Header load order:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
JS code for jqGrid:
var lastSel;
editParams = {
"successfunc": null,
"url": '/submit/adjustments',
"extraparam": {
UserAdj: function() {
var sel_id = $('#rowed1').jqGrid('getGridParam', 'selrow');
var value = $('#rowed1').jqGrid('getCell', sel_id, 'user_adj_order');
return 'test';
},
arg1 : 'test_it_out'
},
"aftersavefunc": null,
"errorfunc": null,
"afterrestorefunc": null,
"mtype" : "POST"
}
jQuery("#rowed1").jqGrid({
url: base_url + 'get/101/items',
datatype: "json",
jsonReader: {
root: function (obj) { return obj.items; },
id: 'id',
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.items.length; },
},
loadonce: true,
colNames:['Vendor', 'Name', 'Price', 'Last Cost', 'Qty OH', 'Qty OO', 'Wks Selling', 'Str Velocity', 'Fleet Velocity', 'Reccomended Buy', 'User Adjustment'],
colModel:[
{name: 'vendor_name'},
{name: 'name'},
{name: 'price'},
{name: 'cost'},
{name: 'qty_OH', sorttype:'int'},
{name: 'qty_OO', sorttype:'int'},
{name: 'str_wks_selling', sorttype:'int'},
{name: 'velocity', sorttype:'int'},
{name: 'flt_five_wk_vel', sorttype: 'int'},
{name: 'rec_buy', sorttype: 'int'},
{name: 'user_adj_order', editable: true}
],
onSelectRow: function(id){
if(id && id!==lastSel){
$('#rowed1').jqGrid('saveRow', lastSel, editParams);
lastSel=id;
}
},
ondblClickRow: function(id) {
$('#rowed1').jqGrid('editRow', id, true, editParams);
},
rowNum:10,
rowList:[10,20,30],
pager: '#prowed1',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
autowidth: true,
height: '100%',
gridView: true,
'cellSubmit': 'remote',
editurl: '/submit/adjustments',
cellurl: '/submit/adjustments'
});
Have you tried clearing cache? If yes and it is still not working, can you please post your full html code as well. Assuming the JS code is in a separate JS file.