This is the master grid
$(document).ready(function() {
$("#grid").kendoGrid({
height: 800,
sortable: true,
pageable: true,
selectable: "row",
filterable: {
mode: "row"
},
editable: { //disables the deletion functionality
update: false,
destroy: false
},
scrollable: true,
groupable: true,
pageable: {
pageSizes: [10, 25, 50, 100],
refresh: true,
buttonCount: 5
This is the subgrid, when I click the save button, it never make to the POST to the server. Is there a bug I have to make a event for make the POST?
function detailInit(e) {
// get a reference to the current row being initialized
var detailRow = e.detailRow;
detailRow.find(".subgrid").kendoGrid({
dataSource: {
transport: {
read: "./data/getDetails.php",
update: {
url: "./data/getDetails.php",
type: "POST"
}
},
schema: {
data: "data"
},
serverFiltering: true,
filter: {field: "candidate_id", operator: "eq", value: e.data.candidate_id}
},
sortable: true,
pageable: true,
selectable: "row",
height:300,
pageable: {
pageSizes: 5,
refresh: true,
buttonCount: 5
},
//rowTemplate: kendo.template($("#rowTemplate").html()),
columns: [
{title: "Task", field: "ARS",width: "100px",filterable: {
cell: {
showOperators: false
}
}},
{title: "Score", field: "Value",width: "250px"},
{ showOperators: false}
],
detailInit: detailInit,
editable: true,
navigable: true,
toolbar: [ "save", "cancel" ]
});
}
});
The back end is in php for fetech the query, I want to make the update.It arent working.
POSTMAN with POST to the API are working
Related
"tgl_dok":{"date":"2018-07-02 00:00:00.000000","timezone_type":3,"timezone":"Europe\/Berlin"}
jQuery code
$(document).ready(function(){
$('#table').DataTable({
"paging": true,
"lengthChange": true,
"searching": false,
"ordering": true,
"info": false,
"responsive": true,
"autoWidth": false,
"pageLength": 10,
"ajax": {
"url": "../adapter/ArReport/rptPenerimaanHarian/data.php",
type: "POST",
data: ({kd_entitas: kd_entitas,
tglAwal: tglAwal,
tglAkhir: tglAkhir})
},
"columns": [
{
title: 'Date',
data: "tgl_dok",
"type": "date",
},
{
title: 'Receipt. No',
data: "no_dok"
},
]
})
});
How can I show date format like DD/MM/YY in datatables?
UPDATE MyTable SET MyDate = CONVERT(datetime, '2018-07-02 00:00:00.000000', 121)
about convert rules look here
$("#list_records").jqGrid({
url: "getGridData.php",
datatype: "json",
mtype: "GET",
colNames: ["UserId", "Mobile Number"],
colModel: [
{ name: "id",align:"right"},
{ name: "mobilenumber"}
],
pager: "#perpage",
rowNum: 10,
rowList: [10,20],
sortname: "id",
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
// editurl: 'getGridData.php'
caption: ""
});
jQuery("#list_records").jqGrid('navGrid','#perpage',{edit:true,add:true,del:true});
Its work fine,when i click a add button the from will be opened like this.How to add the text box in this form.when I add the edit url the working page will show as blank page..
You should add the property editable: true in all columns of colModel, which you want to allow to edit. For example you can use
colModel: [
{ name: "id", align:"right" },
{ name: "mobilenumber", editable: true }
]
Question: PDF generated by Phantomjs has additional grey bars coming in the Graph.
Set up: My Front end is using highcharts to create graphs for the pages.
I have used phantomjs to create PDF from the HTML page.
Sample: attached image
My Attempts: Followed numerous posts and answers to the same topic and gave the following tries but unsuccessful.
Disable animation and enableMouseTracking for whole chart.
$('#graph').highcharts({
chart: {
type: 'bar',
animation: false,
enableMouseTracking: false
},
Disable animation and enableMouseTracking in PlotOptions:
plotOptions: {
bar: {
animation: false,
enableMouseTracking: false
},
series: {
stacking: 'normal',
animation: false,
enableMouseTracking: false,
shadow:false
Disabling tool tip:
tooltip: {
enabled: false
},
$('#graph').highcharts({
chart: {
type: 'bar',
animation: false,
enableMouseTracking: false
},
title: {
text: 'Online Survey Results'
},
xAxis: {
categories: data
},
yAxis: {
min: 0,
max: maxTotalAnswerWeight,
tickInterval: Math.round(tickInterval),
minorGridLineWidth: 0,
minorTickInterval: Math.round(tickInterval),
minorTickLength: 10,
minorTickWidth: 1,
lineWidth: 1,
title: {
text: 'Progress'
},
labels: {
enabled: true,
align: 'right',
rotation: -45,
formatter: function() {
//console.log(this.value)
var tickMarkNumber = this.value/Math.round(tickInterval);
return seriesData[tickMarkNumber]
},
style: {
fontSize: '14px',
fontFamily: 'proxima-nova,helvetica,arial,sans-seri',
/*whiteSpace: 'nowrap',
paddingLeft: 50,
paddingRight: '100px',
marginLeft: "50px",
padding: 10,
paddingBottom: '10px'*/
}
}
},
legend: {
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
animation: false,
enableMouseTracking: false
},
series: {
stacking: 'normal',
animation: false,
enableMouseTracking: false,
shadow:false
/*dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}*/
}
},
colors: ['green','gray'],
series: [{
index: 1,
name: 'Progress made',
data: achievedData
}, {
index: 0,
name: 'Progress yet to be made',
data: yetToAchievedData
}]
});
},
Is there anything very fundamental I am missing here?
Hi everyone i am working on small data update section using direct grid example the problem is i am not able to update the data using the cell plugin ,i am able to do add and delete and it has direct update to db but when i edit the existing field it does not shows any error and updates on the screen and i did not see any POST response on network area or console of chrome i don't why its not happening
here are the codes please help
Ext.onReady(function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
//added model inside onready
Ext.define('PersonalInfo', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'address', 'state','st_one','st_two','st_three','st_for']
});
//separated store into unique var for guaranteeRange
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'PersonalInfo',
autoLoad: true,
proxy: {
type: 'direct',
api: {
create:QueryDatabase.createRecord,
read:QueryDatabase.getResults,
update:QueryDatabase.updateRecords,
destroy:QueryDatabase.destroyRecord
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var alphaSpaceTest = /^[-\sa-zA-Z]+$/;
Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
alphaSpace: function(val, field) {
return alphaSpaceTest.test(val);
},
// vtype Text property: The error text to display when the validation function returns false
alphaSpaceText: 'Not a valid state. Must not contain numbers.',
// vtype Mask property: The keystroke filter mask
alphaSpaceMask: /^[-\sa-zA-Z]+$/
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
//height: 550,
//width: 800,
cls: 'grid',
title: 'Production Planning Control',
store: store,
columns: [{
dataIndex: 'id',
width: 50,
text: 'ID'
}, {
dataIndex: 'name',
flex: 0.5,
text: 'ClientName',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
}, {
dataIndex: 'address',
flex: 0.5,
text: 'Product Name',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
}, {
dataIndex: 'state',
flex: 0.8,
text: 'No Of QtyRequired',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false,
//vtype: 'alphaSpace'
}
},{
dataIndex: 'st_one',
flex: 0.7,
text: 'Station 1',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
},
{
dataIndex: 'st_two',
flex: 0.7,
text: 'Station 2',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
},{
dataIndex: 'st_three',
flex: 0.7,
text: 'Station 3',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
},
{
dataIndex: 'st_for',
flex: 0.7,
text: 'Station 4',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
}
],
renderTo: Ext.getBody(),
//pt 2
plugins: [
rowEditing
],
dockedItems: [{
xtype: 'toolbar',
store: store,
dock: 'bottom',
//creating, add items
items: [{
iconCls: 'add',
text: 'Add',
handler: function() {
rowEditing.cancelEdit();
// create a record
var newRecord = Ext.create('PersonalInfo');
store.insert(0, newRecord);
rowEditing.startEdit(0, 0);
// write about this section in tutorial
var sm = grid.getSelectionModel();
grid.on('edit', function() {
var record = sm.getSelection();
store.record.commit();
//store.sync();
//e.record.commit();
//store.commitChanges();
store.remove(record);
store.load();
store.sync();
alert ('dome');
});
}
}, {
iconCls: 'delete',
text: 'Delete',
handler: function() {
rowEditing.cancelEdit();
var sm = grid.getSelectionModel();
Ext.Msg.show({
title:'Delete Record?',
msg: 'You are deleting a record permanently, this cannot be undone. Proceed?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if(btn === 'yes') {
store.remove(sm.getSelection());
store.sync();
}
}
});
}
},
{
xtype: 'button',
iconCls:'refresh',
text: 'Refresh Grid',
// action: 'refresh',
handler:function(){
//var reload=this.getGridPanel().getStore();
store.load();
}
}]
}]
});
});
You can just use autoSync:true store config to have it post automatically.
I have a paginated grid with data in it, so here's my code
var pagesize = 5;
Ext.onReady(function(){
var invoice = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'classes/invoices.php',
//method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'results',
fields: ['InvoiceID','InvoiceNumber','UserID','CompanyID','Date','InvoiceTo',
'AddressLine1','Addressline2','AddressLine3','AddressLine4','AddressLine5',
'AddressLine6','Country','ZipCode','Description'],
}),
remoteSort: false
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Invoices',
height: 200,
width: 1135,
store: invoice,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
columns: [
{header: "Invoice ID", dataIndex: 'InvoiceID' },
{header: "Invoice Number", dataIndex:'InvoiceNumber'},
//{header: "User ID", dataIndex: 'UserID'},
//{header: "Company ID", dataIndex: 'CompanyID'},
{header: "Date", dataIndex: 'Date'},
{header: "Invoice To", dataIndex: 'InvoiceTo'},
{header: "AddressLine1", dataIndex: 'AddressLine1'},
{header: "AddressLine2", dataIndex: 'AddressLine2'},
{header: "AddressLine3", dataIndex: 'AddressLine3'},
{header: "AddressLine4", dataIndex: 'AddressLine4'},
{header: "AddressLine5", dataIndex: 'AddressLine5'},
{header: "AddressLine6", dataIndex: 'AddressLine6'},
{header: "Country", dataIndex: 'Country'}
]
}),
bbar: new Ext.PagingToolbar({
store: invoice,
displayInfo: true,
pageSize: pagesize,
prependButtons: true,
items:[
'test'
]
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record){
Ext.Msg.alert('You Selected',record.get('InvoiceNumber'));
}
}
})
});
invoice.load({
params: {
start: 0,
limit: pagesize,
}
});
});
What I want to happen now is, if I click one of the rows in the Grid, a grid will pop out that has the data related to the clicked row, so how to do that , what code to insert? , any how's the coding in PHP?, any samples or direct code help is much appreciated, thanks
Check Sencha documentation for the itemclick event for the grid - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Table-event-itemclick