Setting the Editable property of a column in JQXgrid

Setting the Editable property of a column in JQXgrid - javascript

JS: http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
I am trying to learn JQXgrid and this is my JS file. in this whole grid is set to editable: true flag but i want a particular field to be non-editable.
In reference to the forum-post by jqwidget team member http://www.jqwidgets.com/community/topic/making-a-column-non-editable/#post-11055
i tried this:
JS: http://jsfiddle.net/tzHXR/89/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
editable:false; // Editable Property Set to false
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
but after this , it doesn't work at all. all it shows is blank. i tried on my machine too.
why does editable:false for a column makes it worse. how can i apply non-editable property to one exact column.

The reason is that you should remove ";" after editable: false in your jQWidgets Grid's column definition. That is a syntax error.

Related

The parameter Node is not a child of this Node error in IE

I have two tag K and F. Every K tag has some child F tag. I want to remove child F tag from the K tag. Here is my code. My code is working fine in Chrome Showing error in IE
Error : The parameter Node is not a child of this Node.
Here is my Code
if(KTagNode[j].getAttribute('pview') == 198) {
var fTagData = KTagNode[j].getElementsByTagName('F');
for(var k=0; k<fTagData.length;k++){
if(fTagData[k].getAttribute('N') == "USA"){
KTagNode[j].removeChild(fTagData[k]);
k--;
}
}
}
Can anyone help me with this.

I come out with idea of this. Please check.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
var root = {
expanded: true,
children: [{
text: "Configure Application",
expanded: true,
children: [{
text: "Manage Application",
leaf: true
}, {
text: "Scenario",
leaf: true
}]
}, {
text: "User Configuration",
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}, {
text: "Test Configuration",
//leaf: true,
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
};
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'north Region is resizable',
region: 'north', // position for region
xtype: 'panel',
height: 50,
split: true, // enable resizing
margin: '0 5 5 5',
layout: {
type: "hbox",
align: "stretch"
},
items:[
{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 200,
store: states,
},{
xtype: 'combobox',
label: 'Choose State2',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 200,
store: states
}]
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'panel',
width : 200,
margin: '5 0 0 5',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 50,
store: states,
},{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date()
},{
xtype: 'toolbar',
width : 150,
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
}]
},{
xtype: 'treepanel',
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 200,
height: 400,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: root
}),
listeners: {
itemclick: function(s, r) {
alert(r.data.text);
}
}
}]
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
margin: '5 5 0 0',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 150,
width: 400,
},{
xtype: 'toolbar',
width : 150,
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
},{
xtype : 'panel',
width: 175,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
}]
},{
title: 'South Region is resizable',
region: 'south', // position for region
split: true, // enable resizing
margin: '0 5 5 5',
xtype: 'toolbar',
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
}],
renderTo: Ext.getBody()
});

How can i create a user profile in ext.js?

I'm working on creating a user profile view in my ext.js (and sencha touch) application. I have my routes set up and I have my data model in my data.js. I also created a form to show the data in. However, I'm having issues getting the user data to render on the front end.
index.js code:
// User Profile
var userProfileToolbar = {
xtype: 'toolbar',
id: 'userProfileToolbar',
title: 'UserProfile',
style: settings_sz2,
ui: 'light',
docked: 'top',
items: gen_top_buttons
};
var userprofile_tabbar = {
xtype: 'tabbar',
id: 'userprofile_tabbar',
style: dark_tabbar_sz,
ui: 'light',
docked: 'top',
items: all_discover_buttons
};
var profileForm = {
items: [
{
xtype: 'textfield',
name : 'email',
label: 'Email',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'location',
label: 'Location',
labelWidth: '35%'
},
{
xtype: 'selectfield',
name : 'defaultCollection',
label: 'Default Collection',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},
{
xtype: 'selectfield',
name : 'relationshipStatus',
label: 'Relationship Status',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'Single', value: 'single'},
{text: 'In a Relationship', value: 'inARelationship'},
{text: 'Married', value: 'married'}
]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Gender',
style: settings_sz,
hidden: false,
margin: '0',
id: 'male_female_gender',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'male_female_gender',
label: 'Male',
value: 0,
}, {
name: 'male_female_gender',
label: 'Female',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Sexual Orientation',
style: settings_sz,
hidden: false,
margin: '0',
id: 'sexual_orientation',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'sexual_orientation',
label: 'Straight',
value: 0,
}, {
name: 'sexual_orientation',
label: 'Gay',
value: 1,
},{
name: 'sexual_orientation',
label: 'Bi',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Subscription',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_email_subscription',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_email_subscription',
label: 'Enabled',
value: 0,
}, {
name: 'enable_disable_email_subscription',
label: 'Disabled',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Default Access',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_default_access',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_default_access',
label: 'Public',
value: 0,
}, {
name: 'enable_disable_default_access',
label: 'Private',
value: 1,
}, {
name: 'enable_disable_default_access',
label: 'Adult',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Safe Browsing',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_safe_browsing',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_safe_browsing',
label: 'On',
value: 0,
}, {
name: 'enable_disable_safe_browsing',
label: 'Off',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Visibility',
style: settings_sz,
hidden: false,
margin: '0',
id: 'everyone_loggedin_visibility',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'everyone_loggedin_visibility',
label: 'Everyone',
value: 0,
}, {
name: 'everyone_loggedin_visibility',
label: 'Logged In',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Notification',
style: settings_sz,
hidden: false,
margin: '0',
id: 'new_share_emailnotification',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'new_share_emailnotification',
label: 'New Connection',
value: 0,
}, {
name: 'new_share_emailnotification',
label: 'Video Sharing',
value: 1,
}]
},
{
xtype: 'button',
ui: 'plain',
style: 'background-color: green; width: 90%; color: white; margin-left: 5%; margin-bottom: 15px; margin-top: 15px',
id: 'save',
text: 'Save Changes'
},
{
xtype: 'button',
style: 'width: 90%; margin-left: 5%; margin-bottom: 15px;',
id: 'cancel',
text: 'Cancel',
},
],
listeners: {
itemtap: {
fn: function(view, index, target, record, event) {
var user_id = record.get('user_id');
setTimeout(function() {
Ext.getCmp('userprofile_recommendations_var').deselectAll();
}, 500);
}
}
}
};
Ext.define('myVidster.view.UserProfile', {
extend: 'Ext.Panel',
id: 'UserProfile',
fields: [
'email',
{name: 'disp_name', type: 'string', value: 'account.get("disp_name")'},
],
alias: 'widget.UserProfile',
config: {
scrollable: {
direction: 'vertical',
directionLock: true,
},
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [userProfileToolbar, profileForm,]
},
listeners: {
load: function(users) {
var profileForm = Ext.getCmp('UserProfile');
profileForm.loadRecord(this.data.first());
}
}
});
Data.js:
//User Profile Data
Ext.define('userprofile_model', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'user_id',
type: 'string'
}, {
name: 'disp_name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'phone_number',
type: 'string'
}, {
name: 'pw',
type: 'string'
}, {
name: 'family_filter',
type: 'string'
}, {
name: 'v_orientation_chk',
type: 'string'
}, {
name: 'anc1',
type: 'int'
}, {
name: 'current_video',
type: 'int'
}, {
name: 'current_video_type',
type: 'string'
}, {
name: 'video_history',
type: 'auto'
}, {
name: 'video_history_chk',
type: 'string'
}, {
name: 'HTML5_only',
type: 'string'
}, {
name: 'filter_by',
type: 'string'
}, {
name: 'unlock',
type: 'int'
}],
proxy: {
type: 'localstorage',
id: 'UserProfile'
}
}
});
var userprofile_obj = Ext.create("Ext.data.Store", {
model: 'userprofile_model',
pageSize: 9,
proxy: {
type: 'jsonp',
url: "http://api.example.com/mobile_json2.php",
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
},
extraParams: {
last_id: '0'
},
},
autoLoad: false,
listeners: {
load: function(store) {
var tmp = store.first();
var tmp2 = store.getData();
Ext.getCmp('userprofile_recommendations_var').setItemTpl(discover_recommendations_listTpl)
}
}
});
The issue comes when I try to pre populate the field with data.
For instance:
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
value: account.get('disp_name'),
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
Does not return the display name.

$.jqx.dataAdapter is not a constructor

The data is not being displayed. I tried debugging the cide in the degugger. I get an error $.jqx.dataAdapter is not a constructor The data is successfully populated in the aDataSet. Please tell me what could possible be wrong.
$(document).ready(function(){
var aDataSet = [
//loading data --successful
];
var source =
{
localdata: aDataSet,
datatype: "array",
dataFields:
[
{ name: 'empcode', type: 'string' },
{ name: 'srno', type:'number'},
{ name: 'projectcode', type: 'string' },
{ name: 'projectname', type: 'string' },
{ name: 'startdate', type: 'date' },
{ name: 'enddate', type: 'date' },
{ name: 'clientname', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'modify', type: 'string' },
{ name: 'delete', type: 'string' },
{ name: 'view', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter( this.source ,{
loadComplete: function (aDataSet) { },
loadError: function (xhr, status, error) { }
});
// create jqxDataTable.
$("#tableid").jqxDataTable(
{
source: dataAdapter,
pageable: true,
altRows: true,
filterable: true,
height: 400,
filterMode: 'advanced',
width: 850,
columns: [
{ text: 'Sr No', cellsAlign: 'center', align: 'center', dataField: 'srno', width: 200 },
{ text: 'Emp Code', cellsAlign: 'center', align: 'center', dataField: 'empcode', width: 200 },
{ text: 'Project Code', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
{ text: 'Project Name', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
{ text: 'Start Date', cellsAlign: 'center', align: 'center', dataField: 'startdate', width: 100 },
{ text: 'End Date', cellsAlign: 'center', align: 'center', dataField: 'enddate',width: 100 },
{ text: 'Client Name', cellsAlign: 'center', align: 'center', dataField: 'enddate',width: 100 },
{ text: 'Status', cellsAlign: 'center', align: 'center', dataField: 'status',width: 100 },
{ text: 'Modify', cellsAlign: 'center', align: 'center', dataField: 'modify',width: 100 },
{ text: 'Delete', cellsAlign: 'center', align: 'center', dataField: 'delete',width: 100 },
{ text: 'View', cellsAlign: 'center', align: 'center', dataField: 'view',width: 100 }
]
});
});

It will be better if you show your HTML, not only your JS, so we can see if you had the same problem or not. I had the same problem and the solution was to add the reference to jqxdata, as it is explained here:
https://www.jqwidgets.com/community/topic/b-jqx-dataadapter-is-not-a-constructor/
For example, i was trying to add a jqx-data-table into a website. Originally I had this in my references (Jquery and other references are in other place):
<script src="~/js/jqwidgets/jqxbuttons.js"></script>
<script src="~/js/jqwidgets/jqxscrollbar.js"></script>
<script src="~/js/jqwidgets/jqxdatatable.js"></script>
<script src="~/js/jqwidgets/jqxmenu.js"></script>
<script src="~/js/jqwidgets/jqxlistbox.js"></script>
<script src="~/js/jqwidgets/jqxdropdownlist.js"></script>
So i just added, at the beggining, this one:
<script src="~/js/jqwidgets/jqxdata.js"></script>
Result:
<script src="~/js/jqwidgets/jqxdata.js"></script>
<script src="~/js/jqwidgets/jqxbuttons.js"></script>
<script src="~/js/jqwidgets/jqxscrollbar.js"></script>
<script src="~/js/jqwidgets/jqxdatatable.js"></script>
<script src="~/js/jqwidgets/jqxmenu.js"></script>
<script src="~/js/jqwidgets/jqxlistbox.js"></script>
<script src="~/js/jqwidgets/jqxdropdownlist.js"></script>

Provide a publicly accessible link for debugger. That would attract more people...

JQX Grid Not working in chrome

I used JQX grid widget.And through a javascript i'm populating cell values.This works good for Firefox.But not working in Chrome.Here is the code i have used.
var objCredit = jQuery.parseJSON(returnText);
document.getElementById('txtCustNumber').value = objCredit.CustomerId;
$('[id$=txtCustNumber]').text(objCredit.CustomerId);
getCustomerDetails();
document.getElementById('cmbDocType').value = '3';
***documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', objCredit.Amount);***
Here is my Grid Definition.
var source1 = { totalrecords: 5, unboundmode: true, datatype: "json",
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
],
localdata: data
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{ text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{ text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setAmountEditable() },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{ text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
Thanks in advance

Your initialization is incorrect. datatype: "json" in unbound mode does not make sense. You should remove that. Below is a working sample:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source1 = {
totalrecords: 5, unboundmode: true,
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
]
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
var documentGridContainer = $("#jqxgrid");
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
ready: function()
{
documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', 50);
},
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{
text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{
text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
//showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{
text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{
text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{
text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
</div>
</body>
</html>

ExtJS 4.1 Infinite Grid Scrolling doesnt work

I want to get an infinite scrolling grid with extjs4 and a c# backend... i am setting the proxy api in my controller..
My Model:
Ext.define('SCT.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
My Grid:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'SCT.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'totalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
setting proxy in controoler:
view.grid.getStore().setProxy({
type: 'direct',
model: 'SCT.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'totalCount'
},
simpleSortMode: true
});
additional information about my view:
Ext.define('SCT.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller', 'Ext.ux.grid.FiltersFeature'],
My grid is still loading all data at once (about 8000 rows...) ...
i've searched for solutions and worked through tutorials.. i still dont get it.
please help me out... i dont get it at all...
UPDATE
this is my srv request:
and the response got 3MB (about 8k datasets... ) ..??

Your request dump shows that Ext effectively sends the limit param, so that's your server that is not handling it...
Just a piece of advice, but you should consider upgrading to last version of Ext, since buffered grid seems to have been simplified, and that will avoid you having to rework it if you eventually upgrade.

We Keep Coding

JavaScript is the programming language of the Web.

Setting the Editable property of a column in JQXgrid - javascript

The reason is that you should remove ";" after editable: false in your jQWidgets Grid's column definition. That is a syntax error.

Related

The parameter Node is not a child of this Node error in IE

How can i create a user profile in ext.js?

$.jqx.dataAdapter is not a constructor

JQX Grid Not working in chrome

ExtJS 4.1 Infinite Grid Scrolling doesnt work

Categories

Resources