I receive data from io.socket and I would like to put the data in an array of object so this can be displayed in the slickgrid. For some reason the data pushed in the info is empty. Could somebody help me with this?
Thanks!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid</title>
<link rel="stylesheet" href="/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="/examples/examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configurations</li>
</ul>
<h2>View Source:</h2>
<ul>
<li> View the source for this example on Github</li>
</ul>
</td>
</tr>
</table>
<script src="/lib/jquery-1.7.min.js"></script>
<script src="/lib/jquery.event.drag-2.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/slick.core.js"></script>
<script src="./slick.grid.js"></script>
<script>
var grid;
var info;
var info= [];
var columns = [
{id: "completed", name: "completed", field: "completed"},
{id: "createdAt", name: "createdAt", field: "createdAt"},
{id: "id", name: "id", field: "id"},
{id: "title", name: "title", field: "title"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
jQuery(function($){
var socket = io.connect();
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
})
});
grid = new Slick.Grid("#myGrid", info, columns, options);
</script>
</body>
</html>
When you update the data behind slickgrid you need to tell the grid to redraw with the new data:
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
grid.invalidate(); // not 100% sure this is needed....
grid.render();
})
Related
I am using Kendo UI for JQuery and need to create a data-bound Kendo menu. By data bound, I mean that the items need to be data bound to an array property of a Kendo observable. The issue is that it appears that MVVM binding messes up formatting and functionality of the items. Here is my code (based on the example found in Kendo's documentation) :
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Select an item</h4>
<ul data-role="menu"
data-bind="events: { select: onSelect },
visible: isVisible"
style="width: 100%;">
<li>
Products
<ul data-template="menu-item-template" data-bind="source: items">
</ul>
</li>
</ul>
</div>
</div>
<script id="menu-item-template" type="text/x-kendo-template">
<li data-bind="text: text"></li>
</script>
<script>
var viewModel = kendo.observable({
isVisible: true,
items: ["Product1", "Product2", "Product3"],
onSelect: function (e) {
var text = $(e.item).children(".k-link").text();
kendoConsole.log("event :: select(" + text + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.demo-section .box-col li {
margin-bottom: 0;
}
</style>
The result of executing this code looks like this:
Notice how the formatting of the items is messed up (no margins, etc.).
Do you know what's the proper way to combine data binding and Kendo menu?
Thank you!
Personally, I don't care for the MVVM style. It is too much boilerplate in my opinion.
Here is an example of setting up the menu by passing an object representing the various configuration values. Doing it like this, I do not get the same formatting issues that you get:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<title>user1044169 Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-ocean-blue.min.css" />
</head>
<body>
<ul id="menu"></ul>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: 'Products',
items: [
{ text: 'Product1' },
{ text: 'Product2' },
{ text: 'Product3' }
]
}
],
select: function(e) {
var text = $(e.item).children(".k-link").text();
console.log(text);
}
});
});
</script>
</body>
</html>
this is my code and csv file.
The c3js chart is not displaying properly when I have a date field in a CSV file. I have set the x axis as type timeseries. There are only two columns in CSV file. "Data" and "count",
html>
<head>
<link rel="stylesheet" type="text/css" href="c3.css">
</head>
<body>
<div id="chart"></div>
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
data: {
url: 'dates.csv'
}
});
</script>
</body>
</html>
data,count
120,80
140,50
170,100
150,70
180,120
<html>
<head>
<link rel="stylesheet" type="text/css" href="c3.css">
</head>
<body>
<div id="chart"></div>
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'Date',
x_Format: '%Y-%m-%d',
url: 'dates.csv',
},
axis: {
x: {
type: 'timeseries',
}
}
});
</script>
</body>
</html>
this code is working now..
I've got this problem when i try to get data from clients table in the database
DataTables warning: table id=example - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
This is my Controller in Codeigniter
class Clients extends CI_Controller {
function header()
{
$data['hms'] = $this->config->item('page_title');
$this->load->view('header3',$data);
}
public function index()
{
//$this->datatables->select('*');
//$this->datatables->from('bookitguests');
//$data['clients'] = $this->datatables->generate();
$data = "";
$this->header();
$this->load->view('all_guests',$data);
}
public function TableClients()
{
$this->datatables->select('name, surname, email')->from('bookitguests');
echo $this->datatables->generate();
}
}
This is my view in Codeigniter (ps, im not adding the header file, its too long)
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function() {
$('#example').DataTable( {
"bProcessing": false,
"bServerSide": false,
"sAjaxSource": "<?php base_url(); ?>clients/TableClients",
"sServerMethod": "POST"
} );
} );
</script>
<div id="container">
<h1>All Clients</h1>
<div id="body">
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>
You need to specify the columns explicitly when using an array of objects instead of a two dimensional array.
"columns": [
{ "data": "id" },
{ "data": "name" }
]
You can find more info here
In my ASP.Net MVC3 Razor project.I have to implement Jqgrid to list my employee details. So from the tutorial Using jQuery Grid With ASP.NET MVC i have created action for my Employee Class.Now the problem is that,my View page is not rendering the jqgrid Script file.Form the chrome browser file it is found that the error is
uncaught typeerror object has no method jqgrid
I am attaching my browser output.
My Controller Code
[HttpGet]
public ActionResult ViewEmployeeData()
{
return View();
}
[HttpPost]
public ActionResult ViewEmployeeData(string Eord, string Empid, int page, int rows)
{
ElixirERPContext empdata = new ElixirERPContext();
var query = from emp in empdata.EmpData
select emp;
var count = query.Count();
var resultquery = new
{
tottal = 1,
page = page,
records = count,
rows = query.Select(x => new { x.EmpId, x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining, x.Department, x.Position }).ToList()
.Select(x => new { id = x.EmpId,Date=x.DateOfJoining, cell = new string[] { x.EmpId.ToString(), x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining.ToString(), x.Department, x.Position } }).ToArray(),
};
return Json(resultquery, JsonRequestBehavior.AllowGet);
//return View();
}
When i am using debugger it not entering ito the script section.ie,just rendering only the view page.
Layout Page
<!DOCTYPE html>
<html>
<head>
<META Http-Equiv="Cache-Control" Content="no-cache">
<META Http-Equiv="Pragma" Content="no-cache">
<META Http-Equiv="Expires" Content="0">
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/daterangepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/font-alpona.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/prettify.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/styles.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/bootstrap-reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/ico/favicon.ico")" rel="SHORTCUT ICON" type="image/ico" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-144-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-114-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-72-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-57-precomposed.png")" rel="apple-touch-icon-precomposed" type="image/png" />
<script src="#Url.Content("~/Scripts/jquery-1.5.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.js")" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/js/jbootstrap.min.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/js/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/prettify.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.nicescroll.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.cookie.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.hoverIntent.minified.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.dcjqaccordion.2.7.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.sparkline.min.js")" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/common-script.js")" type="text/javascript"></script>
</head>
<body>
<div class="main-wrapper">
<div class="scroll-top">
<i class="icon-arrow-up"></i>
</div>
#*Top Bar*#
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<i class="icon-menu-2 "></i>
<!-- LOGO -->
<div class="branding">
<a href="#">
<img src="#Url.Content("~/Content/images/alpona-logo.png")" alt="Alpona Logo"></a>
</div>
</div>
<div class="col-sm-4 col-md-4 responsive-notification-mnu">
<!---Edited Content Folder Id Top bar Notice-->
</div>
<div class="col-sm-4 col-md-4 clearfix responsive-log-mnu">
<!-- ADMIN DRODOWN MENU -->
<div class="loged-nav pull-right">
<ul class="clearfix">
<li class="log-nav dropdown pull-right"><a class="dropdown-toggle clearfix" data-toggle="dropdown">
<span class="pull-left loged-user-name">Admin</span><span class="logged-user-thumb pull-right"><img class="img-circle" src="#Url.Content("~/Content/images//admin-avatar.jpg")" alt="Admin"></span></a>
<div class="dropdown-menu">
<ul class="pull-right">
<li>kjamanebr#gmail.com</li>
<li>Edit Profile</li>
<li>Inbox</li>
<li class="divider"></li>
<li><i class="icon-lock-3"></i>#Html.ActionLink("Logout", "Logout", "Home", new {#class="logout-link" })</li>
</ul>
</div>
#*<li><i class="icon-user"></i>#Html.TextBoxFor(Model => Model.UserName, new { #class = "login-user-input", autocomplete = "off",placeholder="User Name" })</li>*#
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
#*Left-Nav-Menu*#
<div class="left-bar merge-left">
<div class="left-nav">
#RenderSection("leftnav",required:false)
</div>
</div>
<div class="main-container">
<div class="container">
#RenderBody()
</div>
</div>
</div>
</body>
</html>
Employee Data Vew Page
#{
ViewBag.Title = "ViewEmployeeData";
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
#* Script For Jqgrid*#
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/ViewEmployeeData',
datatype: 'json',
mtype: 'GET',
colNames: ['EmpId', 'FirstName', 'MiddleName', 'LastName', 'Address', 'DateOfJoining', 'Department', 'Position'],
colModel: [
{ name: 'EmpId', index: 'EmpId', width: 40, align: 'left' },
{ name: 'FirstName', index: 'FirstName', width: 40, align: 'left' },
{ name: 'MiddleName', index: 'MiddleName', width: 200, align: 'left'},
{ name: 'LastName', index: 'LastName', width: 200, align: 'left'},
{ name: 'Address', index: 'Address', width: 200, align: 'left'},
{ name: 'DateOfJoining', index: 'DateOfJoining', width: 200, align: 'left'},
{ name: 'Department', index: 'Department', width: 200, align: 'left'},
{ name: 'Position', index: 'Position', width: 200, align: 'left'}],
pager: jQuery('#pager'),
width: 660,
height: 'auto',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'EmpId',
sortorder: "desc",
viewrecords: true,
caption: 'Employee Information'
});
});
</script>
<h2>ViewEmployeeData</h2>
<table id="list" ></table>
<div id="pager"></div>
Well from you sources i can see that you have referenced multiple jquery versions, try to simplify all of that include jquery script, then jqGrid.
my json file looks like
{"items":[
{"date":"2012-03-12","scoreMin":"9","scoreMax":"25","scoreAverage":"20.39","scoreSTD":"3.86","scoreCount":"133","count20":"73","count25":"46"},
{"date":"2012-03-13","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-14","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-15","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-09-15","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-16","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-17","scoreMin":"5","scoreMax":"24","scoreAverage":"18.59","scoreSTD":"5.67","scoreCount":"99","count20":"45","count25":"0"},
{"date":"2012-09-18","scoreMin":"5","scoreMax":"24","scoreAverage":"18.64","scoreSTD":"5.67","scoreCount":"100","count20":"46","count25":"0"}
]}
and my script is
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
alert('Document ready');
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData[i] =("['" + data.date + "'," + data.scoreAverage + "]");
});
alert( 'Fetched ' + objArrayData.length + ' items!');
console.log('object Data ' + objArrayData);
objArray = ("[" + objArrayData + "]");
console.log('object Array' + objArray);
var plot = $.jqplot('chartCanvas', [objArray], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%#m/%y'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
I am getting uncaught exception- No data error
Before plotting the chart, I am printing the array and there are all the values that I need.
What is missing? Where am I doing wrong?
Thanks for your help.
I don't understand why you are feeding data to the objArrayData array in the way you are doing here. The data doesn't become an array just because there are square brackets surrounding them (it will only appear pretty and satisfying and confusing in the cosole.log).
Use array.push() instead of the way you are doing it here.
And also make sure you make the data.scoreAverage a number before parsing it to the array.
You can do it using parseFloat() function.
So finally you can feed the data to the array like this.
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
Here's the modified working code.
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="../jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
});
console.log('object Data ' + objArrayData);
var plot = $.jqplot('chartCanvas', [objArrayData], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%Y-%m-%d'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
Hope this helps.
PS: Make sure you learn about arrays a little more.