My aim is to add select box in my grid system, and I get success to add select box following the below code.
But after adding select box my other data is not showing up, when I do search from my dropdown filter it is showing data.
$("#jsGrid").jsGrid({
height: 480,
width: "100%",
filtering: true,
editing: false,
sorting: true,
paging: true,
autoload: true,
clearFilterButton: true,
pageSize: 10,
pageButtonCount: 10,
controller: {
loadData: function(filter) {
criteria = filter;
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "myURL",
dataType: "json"
}).done(function(response) {
var res = [];
if (criteria.component !== "") {
response.forEach(function(element) {
if (element.component.indexOf(criteria.component) > -1) {
res.push(element);
response = res;
}
}, this);
} else res = response;
if (criteria.titleLong !== "") {
res = [];
response.forEach(function(element) {
if (element.titleLong.indexOf(criteria.titleLong) > -1)
res.push(element);
}, this);
} else res = response;
data.resolve(res);
});
return data.promise();
}
},
fields: [{
name: "component",
type: "textarea",
width: 150
}, {
name: "Id",
type: "text",
width: 50
}, {
name: "titleLong",
type: "select",
align: "center", // center text alignment
autosearch: true, // triggers searching when the user changes the selected item in the filter
items: ["", "A", "B", "C"], // an array of items for select
valueField: "", // name of property of item to be used as value
textField: "", // name of property of item to be used as displaying value
selectedIndex: -1, // index of selected item by default
valueType: "string", // the data type of the value
readOnly: false, // a boolean defines whether select is readonly (added in v1.4)
}, {
name: "unit",
type: "textarea",
width: 150
}, {
name: "descr",
type: "textarea",
width: 150
}]
});
So My aim is to display all the data on Page load and if someone perform search using select filter show it related data of the performed search.
Possibly, removing "," from "readOnly: false," in third field definition can help.
Related
I'm using this code to create a simple CRUD using Jsgrid and php, but the page isn't loading when i change the type field to date. I watched almost the entire youtube and I didn't find anything about.
I dont even know what to do
Can somebody help me?
index.php:
<body>
<div class="container">
<br />
<div class="table-responsive">
<h3 align="center">Inline Table Insert Update Delete in PHP using jsGrid</h3><br />
<div id="grid_table"></div>
</div>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
js.js
var db = {
loadData: function(filter){
return $.ajax({
type: "GET",
url: "fetch_data.php",
data: filter
});
},
insertItem: function(item){
return $.ajax({
type: "POST",
url: "fetch_data.php",
data: item
});
},
updateItem: function(item){
return $.ajax({
type: "PUT",
url: "fetch_data.php",
data: item
});
},
deleteItem: function(item){
return $.ajax({
type: "DELETE",
url: "fetch_data.php",
data: item
});
}
};
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
sorter: function (date1, date2) {
return new Date(date1) - new Date(date2);
},
itemTemplate: function (value) {
return new Date(value).toDateString();
},
insertTemplate: function (value) {
return this._insertPicker = $("<input class='date-picker'>").datetimepicker();
},
editTemplate: function (value) {
return this._editPicker = $("<input class='date-picker'>").datetimepicker();
},
insertValue: function () {
return this._insertPicker.data("DateTimePicker").useCurrent();
},
editValue: function () {
return this._editPicker.data("DateTimePicker").useCurrent();
}
});
jsGrid.fields.date = MyDateField;
$('#grid_table').jsGrid({
width: "100%",
height: "600px",
filtering: true,
inserting:true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 9,
deleteConfirm: "Do you really want to delete data?",
controller: db,
fields: [
{
name: "id",
type: "hidden",
css: 'hide'
},
{
title:"Load Number",
name: "loadnumber",
type: "text",
width: 150,
validate: "required"
},
{
title:"Broker MC",
name: "brokermc",
type: "text",
width: 150,
validate: "required"
},
{
title:"Broker",
name: "brok3r",
type: "text",
width: 50,
validate: function(value)
{
if(value > 0)
{
return true;
}
}
},
{
title:"Driver",
name: "driver",
type: "text",
width: 150,
validate: "required"
},
{
title:"Load Date",
name: "loaddate",
type: "date"
},
{
type: "control"
}
]
});
i tried to rename to "MyDateField", the page loads but the item field disappears, how can i fix it?
I have the following error with this highcharts chart library.
I need to update the date to the current one and that the date of the corresponding day appears in the index.
just change from Highcharts.chart to Highcharts.stockChart. (Attached image)
enter image description here
enter image description here
from here the data and graph are brought
function datagrafico(base_url){
$.ajax({
url: base_url + "index.php/Admin/getDataDias",
type:"POST",
dataType:"json",
success:function(data){
var dias = new Array();
var montos = new Array();
$.each(data,function(key, value){
dias.push(value.fecha_actualizacion);
valor = Number(value.monto);
montos.push(valor);
});
graficar(dias,montos);
}
});
}
function graficar(dias, montos){
Highcharts.stockChart('grafico', {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Monto acumulado por ventas diarias'
},
subtitle: {
text: ''
},
xAxis: {
categories: dias,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Monto Acumulado (Colombiano)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">Monto: </td>' +
'<td style="padding:0"><b>{point.y} Colombiano</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series:{
dataLabels:{
enabled:true,
formatter:function(){
return Highcharts.numberFormat(this.y)
}
}
}
},
rangeSelector: {
inputPosition: {
align: 'right',
x: 0,
y: 0
},
},
series: [{
name: 'dias',
data: montos
}]
});
controller:
public function getDataDias(){
$resultados = $this->model_venta->montos();
echo json_encode($resultados);
}
and model:
public function montos(){
$this->db->select("fecha_actualizacion, SUM(total) as monto");
$this->db->from("venta");
$this->db->where("pago_id","2");
$this->db->where("estado","1");
$this->db->group_by('DATE(fecha_actualizacion)');
$this->db->order_by('DATE(fecha_actualizacion)');
$resultados = $this->db->get();
return $resultados->result();
}
In your example you change Highcharts to Higcharts Stock, they are similar but building charts from other API. Please have a look at the Stock documentation they, do not have categories options inside xAxis.
The millisecond format of data is standard in the Highcharts Stock axis, you need to change data format to put it in the chart.
series: [{
type: 'column',
data: [
[1592314200000, 165428800],
[1592400600000, 114406400],
[1592487000000, 96820400],
[1592573400000, 264476000],
[1592832600000, 135445200],
[1592919000000, 212155600]
],
}]
Under are Highchart and Higcharts Stock examples to compare of building.
Highchart Demo: https://jsfiddle.net/BlackLabel/sw3qr5p9/
Highchart Stock Demo: https://jsfiddle.net/BlackLabel/drnup1tx/
UPDATED
I have added a dropdown to my chart which allows the user to select among the available operator names.
I need your help so that when selecting an available operator name, the graphic is updated showing only the information of the selected operator.
From all my JSON response, for this example it should only show the information in a red box:
As you can see in the image, if I select the Luis operator, this graph should update and show me only the Luis operator (he has 2 work orders in finished state).
Below my report.js file which I use to make the graph.
getChartData () method:
I use ajax, basically I'm getting the data and loading my select with the names of the available operators.
renderChart () method:
I am passing it as a parameter "label and data" with these parameters I can make my graph also I am configuring some available options.
select.on ('change', function ():
here I do not understand how to tell my chart to update depending on the option selected, then I would have to call the renderChart method again to graph again with the selected data but it does not work, I do not know how to solve it, it is what I am trying.
report.js
function getChartData(user) {
$.ajax({
url: '/admin/reports/getChart/' + user,
type: 'GET',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
dataType: 'json',
success: function (response) {
console.log(response);
var data = [];
var labels = [];
for (var i in response.orders) {
data.push(response.orders[i].orders_by_user);
labels.push(response.orders[i].name);
$("#operator").append('<option value='+response.orders[i].id+'>'+response.orders[i].name+'</option>');
}
renderChart(data, labels);
},
error: function (response) {
console.log(response);
}
});
}
function renderChart(data, labels) {
var ctx = document.getElementById("orders").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Terminadas',
data: data,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: "#229954",
borderWidth: 1,
yAxisID: 'Ordenes',
xAxisID: 'Operarios',
}]
},
options: {
scales: {
yAxes: [{
id: "Ordenes",
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Ordenes'
}
}],
xAxes: [{
id: "Operarios",
scaleLabel: {
display: true,
labelString: 'Operarios'
}
}],
},
title: {
display: true,
text: "Ordenes en estado terminado"
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: "#17202A",
}
},
}
});
function updateChart() {
myChart.destroy();
myChart = new Chart(ctx, {
type: document.getElementById("operator").value,
data: data
});
};
}
getChartData();
$('#operator').select2({
placeholder: 'Selecciona un operario',
tags: false
});
var select = $('#operator');
var pElem = document.getElementById('p')
select.on('change', function() {
var item = $(this).val();
pElem.innerHTML = 'selectedValue: ' + item;
var data = {
labels: labels,
datasets: data
}
var ctx = document.getElementById("orders").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data
});
});
My select:
<select class="form-control" name="operator" id="operator">
<option></option>
</select>
I get lost trying to link the selected option and the information to show (update the graph). Could you please tell me how to solve this?
UPDATED 1
My select:
<select class="form-control" name="operator" id="operator">
<option></option>
</select>
Through ajax I load my select options:
for (var i in response.orders) {
order.push(response.orders[i].orders_by_user);
user.push(response.orders[i].name);
$("#operator").append('<option value='+response.orders[i].id+'>'+response.orders[i].name+'</option>');
}
renderChart(order, user);
With the answer you have given me, modify my report.js file exactly my function renderChart(order, user) and it is as follows:
function renderChart(order, user) {
var ctx = document.getElementById("orders").getContext('2d');
var myChart = new Chart(ctx, {
//code...
});
//my select
var selectOption = $('#operator');
selectOption.on('change', function() {
var option = $("#operator").val();
myChart.data.labels = option;
if (option == 'All') {
myChart.data.labels = user,
myChart.data.datasets[0].data = order;
} else {
myChart.data.labels = option;
myChart.data.datasets[0].data = order;
}
myChart.update();
});
}
The graph is updated incorrectly an error occurs you can see it in the image:
Obviously if I select the "All" option, it shows and graphs correctly, now if I select "jose" the following happens:
The graph does not respect the scale, I know that Jose has only 1 work order, and up to 2 on the scale.
On the x axis instead of showing me the name in this case "Jose" is showing me the selection id which in this case is 6.
The same happens with the option "Miguel".
Please help me correct this section:
var selectOption = $('#operator');
selectOption.on('change', function() {
var option = $("#operator").val();
myChart.data.labels = option;
if (option == 'All') {
myChart.data.labels = user,
myChart.data.datasets[0].data = order;
} else {
myChart.data.labels = option;
myChart.data.datasets[0].data = order;
}
myChart.update();
});
When the selected options changes, you must not destroy the chart. All you need to do is performing the following steps.
Change the data.labels
Change the data of the unique dataset
Update the chart itself
This is basically done as follows.
myChart.data.labels = <new labels>;
myChart.data.datasets[0].data = <new values>;
myChart.update();
The following example illustrates how this can be done in JavaScript.
orders = [
{ name: 'Luis', orders_by_user: '2' },
{ name: 'Jose', orders_by_user: '1' },
{ name: 'Miguel', orders_by_user: '3' }
];
const myChart = new Chart(document.getElementById('orders'), {
type: 'bar',
data: {
labels: orders.map(o => o.name),
datasets: [{
label: 'Terminadas',
data: orders.map(o => o.orders_by_user),
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: "#229954",
borderWidth: 1,
yAxisID: 'Ordenes',
xAxisID: 'Operarios',
}]
},
options: {
scales: {
yAxes: [{
id: "Ordenes",
ticks: {
beginAtZero: true,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Ordenes'
}
}],
xAxes: [{
id: "Operarios",
scaleLabel: {
display: true,
labelString: 'Operarios'
}
}],
},
title: {
display: true,
text: "Ordenes en estado terminado"
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: "#17202A",
}
},
}
});
orders.forEach(o => {
const opt = document.createElement('option');
opt.value = o.name;
opt.appendChild(document.createTextNode(o.name));
document.getElementById('operator').appendChild(opt);
});
function refreshChart(name) {
myChart.data.labels = [name];
if (name == 'All') {
myChart.data.labels = orders.map(o => o.name),
myChart.data.datasets[0].data = orders.map(o => o.orders_by_user);
} else {
myChart.data.labels = [name];
myChart.data.datasets[0].data = orders.find(o => o.name == name).orders_by_user;
}
myChart.update();
}
Operarios:
<select id="operator" onchange="refreshChart(this.value)">
<option>All</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="orders" height="90"></canvas>
I'm having a little bit trouble about sending a database data to a client side table. I'am using fancy grid.
Client Side
$.ajax({
url:'function.php?what=listofbookings',
type:'post',
data:{user:user},
success: function(data) {
var clients = data;
}
});
});
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "people", type: "text", width: 150, validate: "required" },
{ name: "email", type: "number", width: 50 }
]
});
And here is the PHP Code
if(isset($_GET['what'])){
if($_GET['what'] === 'listofbookings'){
$selit = "SELECT * FROM dbdbdb_booking";
$queryit = mysqli_query($conn,$selit);
$arr = array();
while($row = mysqli_fetch_assoc($queryit)){
$arr[] = $row;
}
echo json_encode($arr);
}
}
For some reason the var client is not defined and the data is not passing to clients.
Any thoughts ?
You need to initialize jsGrid inside your AJAX's success :
$.ajax({
url:'function.php?what=listofbookings',
type:'post',
data:{user:user},
success: function(data) {
var clients = data;
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "people", type: "text", width: 150, validate: "required" },
{ name: "email", type: "number", width: 50 }
]
});
}
});
I want to display Text for my ForigenKey columns instead of numeric values. There are a lot of examples to retrieve TextMember by comparing ID but they are not working in my case. I just started to use Kendo ui so dont know much about it
Here is the code :
$(document).ready(function () {
dataSource1 = new kendo.data.DataSource({
transport: {
read: {
url: "Data/AttendanceCode/GridSelect.php",
dataType: "json",
},
update: {
url: "Data/AttendanceCode/GridUpdate.php",
dataType: "json",
type:"GET"
},
destroy: {
url: "Data/AttendanceCode/GridDelete.php",
dataType: "json",
type:"POST"
},
create: {
url: "Data/AttendanceCode/GridInsert.php",
dataType: "json",
type:"POST"
},
},
schema: {
data: "data",
model: {
id: "AttendenceID",
fields: {
AttendenceID : { editable: false, nullable: true },
TeacherID: { field: "TeacherID", defaultValue: "EIIT0002" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource1,
pageSize: 10,
pageable: {
refresh: true,
pageSizes: true
},
editable:{ mode : "popup" },
height: 400,
filterable: true,
columnMenu: true,
sortable: true,
reorderable: true,
resizable: true,
toolbar: ["create"],
columns: [
{ field:"AttendenceID", title: "Attendence ID", width:"130px" },
{ field: "TeacherID", title:"Teacher", width: "100px" , editor: TeacherDropDownEditor, template: "#=getTeacherName(TeacherID)#" },
{ command: ["edit", "destroy"], title: "Action", width: "210px" }],
});
});
Teacher DropDown DataSource
teacher = new kendo.data.DataSource({
transport: {
read: {
url : "Data/Teacher.php",
dataType: "json" }
},
schema: {
data : "Teacher"
}
});
// Teacher Editor
function TeacherDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "TeacherName",
dataValueField: "Service_NO",
dataSource: teacher
});
}
Different approaches i found and tried to Get Teacher Name
1 -
function getTeacherName(value) {
var text = "";
$.each(teacher, function () {
if (this.Service_NO == value) {
text = this.Name;
return false;
}
});
return text;
}
2 -
function getTeacherName(teacherID) {
for (var idx = 0, length = teacher.length; idx < length; idx++)
{
if (teacher[idx].Service_NO === teacherID)
{t = teacher[idx].Name;}
}
return t;
}
3 -
function getTeacherName(teacherID) {
$.each(teacher, function(key, val) {
if(val.Service_NO == tID){
t = val.Name;
}
});
return t;
}
It seems like dataSource (teacher) is not having any value.
PHP code is working perfectly.
Please Help if you have any idea whats wrong with my code.
Thanks !!
You are right, teacher DataSource does not have any data because you are defining how to get the data (that's what you do with the DataSource) but you are not reading it.
Add:
teacher.read();
for manually forcing the data read.
NOTE: This is something that happens magically when you have a Grid, ListView,... because these widget do it for you but this time, for displaying your grid you need to read it in advance since it is invoked from a JavaScript function (KendoUI grid code doesn't know anything about what you have in the function getTeacherName other than the name).
you should config your field:
{ field: "nu_status", title: 'Status', values: [ { text: "Active", value: 1 }, { text: "Inactive", value: 0 }]},