[DavidSimmonsParticipant]

I would really like to see more demos and possibility of database demos. If you are using a ComboBox to edit a cell in the grid, I would think the cell is a Foreign Key. So on the cellvaluechanging I would think the newValue should be the SelectedIndex value not the DisplayValue. But that brings up the next question which is before you edit the cell the grid values should be DisplayValue or the Foreign Key Value. Currently I am not sure if JQWidgets are designed to accomplish this. Maybe this is planed for a later release. But what I am trying to do seems like a very standard design and I would think many users would want the ability. All the current examples are dealing with list of strings or DisplayValues only, which I don’t see anyone using this in a database designed web app. I would love to talk to any using this for heavy database designed applications. I think the demos are a better way to convey JQWidget capabilities before someone understands all of the API.

Currently this is the only area that keeps me lock into JQGrid. I really want to move to JQWidgets completely if I can understand Grid Foreign Key Display and ComboBox Editors….

[DavidSimmonsParticipant]

I s use JSON for my ordersSource as well. How to I deal with the map statement? Will it work with JSON?

{ name: ‘EmployeeID’, map: ‘m\\:properties>d\\:EmployeeID’, text: ‘EmployeeName’, id: ‘EmployeeID’, source: employeesAdapter.records },

[DavidSimmonsParticipant]

Here is what I am trying using your example but trying to move to JSON… The Sales column is the employee’s id from the employee table. I am not sure about the map statement. I would appreciate any help…

EmployeeJSON.php
[{“EmployeeID”:”1″,”0″:”1″,”FirstName”:”John”,”1″:”John”,”LastName”:”Doe”,”2″:”Doe”},
{“EmployeeID”:”2″,”0″:”2″,”FirstName”:”Jane “,”1”:”Jane “,”LastName”:”Doe”,”2″:”Doe”}]

$(document).ready(function () {
var theme = “ui-start”;

var employeesSource = {
datatype: “json”,
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
url: “EmployeeJSON.php”,
async: false
};

var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i d\\:EmployeeID’, text: ‘EmployeeName’, id: ‘EmployeeID’, source: employeesAdapter.records },
{ name: ” }

],
url: “CompanyData.php”,
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
source: dataAdapter,
theme: theme,
sortable: true,
sorttogglestates: 1,
altrows: true,
pageable: true,
pagesize: 30,
enablehover: false,
autoheight: true,
editable: true,
selectionmode: “singlecell”,
filterable: true,
showtoolbar: true,
columns: [
{ text: ‘ID’, dataField: ‘ID’, width: 80, editable: false },
{ text: ‘Company’, dataField: ‘Company’, width: 200, editable: true },
{ text: ‘Address’, dataField: ‘Address’, width: 200, editable: true },
{ text: ‘City’, dataField: ‘City’, width: 200, editable: true },
{ text: ‘State’, dataField: ‘State’, width: 200, editable: true },
{ text: ‘Zip’, dataField: ‘Zip’, width: 100, editable: true },
{ text: ‘Phone’, dataField: ‘Phone’, width: 100, editable: true },
{ text: ‘Fax’, dataField: ‘Fax’, width: 100, editable: true },
{ text: ‘Email’, dataField: ‘Email’, width: 200, editable: true },
{ text: ‘Sales’, dataField: ‘Sales’, width: 100, editable: true},
{ text: ”, dataField: ”, width: 1000, editable: false }
]
});
});

[DavidSimmonsParticipant]

Ok, here is the change with JSON source. Still not getting this to work.
$(document).ready(function () {
var theme = getTheme();

var source =
{
datatype: “json”,
url: “EmployeeJSON.php”,
datafields: [
{ name: ‘ID’ },
{ name: ‘ParentID’ },
{ name: ‘Text’ }
],
id: ‘id’,
async: false
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘ID’, ‘ParentID’, ‘items’, [{ name: ‘Text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’, theme: theme });
});

EmployeeJSON feed
[{“id”:”19″,”0″:”19″,”parentid”:”-1″,”1″:”-1″,”text”:”Alfredo Capuchino”,”2″:”Alfredo Capuchino”},
{“id”:”32″,”0″:”32″,”parentid”:”-1″,”1″:”-1″,”text”:”Jose Capuchino”,”2″:”Jose Capuchino”},
{“id”:”30″,”0″:”30″,”parentid”:”-1″,”1″:”-1″,”text”:”Demar Celaya”,”2″:”Demar Celaya”}]

However it will work like this;
$(document).ready(function () {
var theme = getTheme();
var data = [
{“id”:”19″,”0″:”19″,”parentid”:”-1″,”1″:”-1″,”text”:”Alfredo Capuchino”,”2″:”Alfredo Capuchino”},
{“id”:”32″,”0″:”32″,”parentid”:”-1″,”1″:”-1″,”text”:”Jose Capuchino”,”2″:”Jose Capuchino”},
{“id”:”30″,”0″:”30″,”parentid”:”-1″,”1″:”-1″,”text”:”Demar Celaya”,”2″:”Demar Celaya”}]
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ }
],
id: ‘id’,
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’, theme: theme });
});

[DavidSimmonsParticipant]

No I was wanting to add the jQuery UI icon to the button with or without text.

[DavidSimmonsParticipant]

I have this column that I am trying to create a editor. The value of PriceType is a int and In my standalone test this works fine, I alert the index and value. When I am working in the grid the drop down does not display the value, but only the index. Here is my test code…

{ text: ‘PriceType’, datafield: ‘PriceType’, columntype: ‘dropdownlist’, width: 200, editable: true,
createeditor: function (row, cellvalue, editor) {
var source = {
datatype: “json”,
datafields: [
{ name: ‘Index’ },
{ name: ‘Value’ }
],
id: ‘id’,
url: ‘CompanyPriceTypeJSON.php’,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
editor.jqxComboBox({ selectedIndex: cellvalue, source: dataAdapter, displayMember: “Value”, valueMember: “Index”, width: 200, height: 25, theme: theme });
editor.bind(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
return item.value;
}
}
});

}
},

[DavidSimmonsParticipant]

So can the dataSource be a JSON, id, value list

{ text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 177,
createeditor: function (row, cellvalue, editor) {
var dataSource = JSON;
editor.jqxDropDownList({source: dataSource });
}
}

[DavidSimmonsParticipant]

I understand the statusbar.htm example, but I am not seeing how I might get my buttons on the paging bar. I would really rather not have the statusbar and the paging bar if possible.

[DavidSimmonsParticipant]

Got it, thanks…

[DavidSimmonsParticipant]

Also, is the paging buttons on a addressable component like statusbar? I would like to add some buttons, Add, Delete, and Refresh on the same bar.

[DavidSimmonsParticipant]

What I was trying to do is find a way to get to create the dataFields and columns from a php and sql file based on the sql statement dynamically.
I was not sure if dataFields and columns can except JSON input.

$(document).ready(function () {
var theme = getTheme();
var url = “gridData.php”;
var source =
{
datatype: “json”,
datafields: ‘datafieldsJSON.php’,
id: ‘id’,
url: url,
root: ‘data’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
columnsresize: true,
columns: ‘columnsJSON.php’
});
});

[DavidSimmonsParticipant]

Is there a working example using the cellvaluechanged I can look at?

[DavidSimmonsParticipant]

just tried this test using your tab default example with on modification in the first tab. The included javascript fires twice… Is there anyway around this?

file insert.php

$(document).ready(function () {
alert(“ok”);
});

file tab.php

The jqxTabs is breaking the content into multiple sections.
You can populate it from ‘UL’ for the tab titles and ‘DIV’ for it’s contents.

$(document).ready(function () {
var theme = getTheme();
// Create jqxTabs.
$(‘#jqxTabs’).jqxTabs({ width: 580, height: 200, position: ‘top’, theme: theme });
$(‘#settings div’).css(‘margin-top’, ’10px’);
$(‘#animation’).jqxCheckBox({ theme: theme });
$(‘#contentAnimation’).jqxCheckBox({ theme: theme });
$(‘#animation’).bind(‘change’, function (event) {
var checked = event.args.checked;
$(‘#jqxTabs’).jqxTabs({ selectionTracker: checked });
});

$(‘#contentAnimation’).bind(‘change’, function (event) {
var checked = event.args.checked;
if (checked) {
$(‘#jqxTabs’).jqxTabs({ animationType: ‘fade’ });
}
else {
$(‘#jqxTabs’).jqxTabs({ animationType: ‘none’ });
}
});
});

Node.js
JavaServer Pages
Active Server Pages
Python
Perl

JavaServer Pages (JSP) is a Java technology that helps software developers serve
dynamically generated web pages based on HTML, XML, or other document types. Released
in 1999 as Sun’s answer to ASP and PHP,[citation needed] JSP was designed to address
the perception that the Java programming environment didn’t provide developers with
enough support for the Web. To deploy and run, a compatible web server with servlet
container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
from Sun Microsystems and the JCP (Java Community Process) must both be met by the
container.

ASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft’s Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.

Python is a general-purpose, high-level programming language[5] whose design philosophy
emphasizes code readability. Python claims to “[combine] remarkable power with very
clear syntax”,[7] and its standard library is large and comprehensive. Its use of
indentation for block delimiters is unique among popular programming languages.
Python supports multiple programming paradigms, primarily but not limited to object-oriented,
imperative and, to a lesser extent, functional programming styles. It features a
fully dynamic type system and automatic memory management, similar to that of Scheme,
Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
language, but is also used in a wide range of non-scripting contexts.

Perl is a high-level, general-purpose, interpreted, dynamic programming language.
Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
language to make report processing easier. Since then, it has undergone many changes
and revisions and become widely popular amongst programmers. Larry Wall continues
to oversee development of the core language, and its upcoming version, Perl 6. Perl
borrows features from other programming languages including C, shell scripting (sh),
AWK, and sed.[5] The language provides powerful text processing facilities without
the arbitrary data length limits of many contemporary Unix tools, facilitating easy
manipulation of text files.

Enable Select Animation

Enable Content Animation

[DavidSimmonsParticipant]

I would be more interested with an Ajax example. I am interested in loading html page snippets. Is that possible?

[DavidSimmonsParticipant]

Do you support now or in the future jQuery themes. I am building many of my application using jQuery themes and like to uses them on JQWidgets within my current development.

[Author]

Posts