$("#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 }
]
Related
I am trying to upgrade from Extjs 3.4 to Extjs 4.0
initComponent: function() {
this.items = [{
xtype: 'fieldset',
width: 600,
bodyPadding: 40,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
format: 'm d Y',
value: '02 04 1978'
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
format: 'm d Y',
altFormats: 'm,d,Y|m.d.Y',
value: '02.04.1978'
},{
xtype: 'combobox',
hiddenName: 'status',
fieldLabel: 'Status',
store: autoCompleteStore,
queryMode: 'remote',
forceSelection:'true',
triggerAction:'all',
displayField:'displayField',
fireEventOnSetValue: false,
valueField:'valueField',
emptyText:'Select one'
}]
}]
}
Ext.define("test.Tickler",{
extend: 'Ext.data.Model',
fields: [
{name: 'f_uid', type: 'string'},
{name: 'f_description', type: 'string'},
{name: 'f_value', type: 'string'},
{name: 'f_visible', type: 'string'},
{name: 'f_order', type: 'string'},
{name: 'f_default', type: 'string'},
]
});
var autoCompleteStore = new Ext.data.JsonStore({
model: "test.Tickler",
proxy:{
type: 'ajax',
url: '../medit_2_public/fc.php?_C_A=TicklerReport.getListOfTicklerReasons',
reader: new Ext.data.JsonReader({
type: 'json',
root: 'results.rows',
metaProperty: 'metaData'
})
}
}
});
Here is my output from metadata:
[,…]
0: {f_uid: "1", f_description: "Needs Form", f_value: "1", f_visible: "Y", f_order: "1", f_default: "N"}
1: {f_uid: "3", f_description: "Call Client", f_value: "2", f_visible: "Y", f_order: "2", f_default: "N"}
When my screen renders I do see Select One in the value of the drop down for Status. When I select the Drop down I do see the loading warning and I see couple blanks after it loads.
In you combobox definition you have to set which fields from your data should be used in the combobox as value and display field. Currently you have set field names that do not exist in your model. For example setup like this:
valueField: 'f_value',
displayField: 'f_description'
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
is there anyway to search the columns only second col without using filter?
i've tried using:
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [ 1 ] }]
"searchCols":[null, {"search":""}, null]
here is my complete script:
$(document).ready(function(){
oTable = $("#roles").dataTable({
"processing":"true",
"serverSide": "true",
"ajax": "roles",
"columns":[
{data: 'id', name:'id'},
{data: 'name', name:'name'},
{data: 'link', name:'link'}
{data: 'actions', name:'actions'}
],
"oClasses": {
"sFilter": "pull-right",
"sFilterInput": "form-control input-rounded ml-sm"
},
"Dom": "<'row'<'col-md-6 hidden-xs'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_",
"sInfo": "Showing <strong>_START_ to _END_</strong> of _TOTAL_ entries"
},
"searchCols":[null, {"search":""}, null]
});
});
is there anyway so i can only filter name column without using footer filter?
because if i not specific a column to be filter, when i tried to search it will get an error because there is actions column.
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