columns data type as string for alpanumeric values

[jqdevMember]

Hi,

One thing I noticed in my grid is that if first cell value of a column is integer like 12356, it shows “LESS THAN” operator for that column in filter and if first cell value consist of alphanumeric like ABCD34 then it shows “CONTAIN” operator in filter.

My column contains alphanumeric values and I want to have “CONTAINS” operator in filter. I tried by giving type string for this alphanumeric column but didn’t work.

Looking forward for any response.

Thanks,
jqdev

[Peter StoevKeymaster]

Hi jqdev,

Did you set the “type” field when you define the datafields array in the source object?

Example:

// prepare the data
var source =
{
    datatype: "xml",
    datafields: [
        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url,
    sortcolumn: 'ShipName',
    sortdirection: 'asc'
};

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqdevMember]

Hi,

Yes I have tried by defining datatype to data field.

var source =
{
datatype: “json”,
datafields: [
{ name: ‘checkAll’ },
{ name: ‘numeroCompte’, type:’string’ },
{ name: ‘intituleCompte’ },
{ name: ‘current’, type:’int’ },
{ name: ‘previous’, type:’int’ },
{ name: ‘variation’, type:’int’ },
{ name: ‘variation_perc’ }
],
id: ‘id’,
url: url,
root: ‘data’
};

[Peter StoevKeymaster]

If you use the latest version, the column’s filter conditions depend only on the ‘type’ field in the datafields array definition and they work fine on our side. If you however, have an issue with that functionality, please send us a sample to support@jqwidgets.com. The sample should use the latest version of jQWidgets and we’ll debug it to find out what’s wrong.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqdevMember]

Hello,

Please check below code in which I have changed company name as numeric for first 3 rows. because of which it shows ‘LESS THAN’ operator. If first row is alphabetic it shows ‘CONTAINS’ operator.

I am using 2.2 version and also checked for 2.4.2 version but problem is same.

Also added the type as string for company name.

This example shows how to create a Grid from JSON string.

$(document).ready(function () {
var theme = ”;

var data = [{ “CompanyName”: “132456000”, “ContactName”: “Maria Anders”, “ContactTitle”: “Sales Representative”, “Address”: “Obere Str. 57”, “City”: “Berlin”, “Country”: “Germany” }, { “CompanyName”: “4651300”, “ContactName”: “Ana Trujillo”, “ContactTitle”: “Owner”, “Address”: “Avda. de la Constitucin 2222”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “123789000”, “ContactName”: “Antonio Moreno”, “ContactTitle”: “Owner”, “Address”: “Mataderos 2312”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “Around the Horn”, “ContactName”: “Thomas Hardy”, “ContactTitle”: “Sales Representative”, “Address”: “120 Hanover Sq.”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Berglunds snabbkp”, “ContactName”: “Christina Berglund”, “ContactTitle”: “Order Administrator”, “Address”: “Berguvsvgen 8”, “City”: “Lule”, “Country”: “Sweden” }, { “CompanyName”: “Blauer See Delikatessen”, “ContactName”: “Hanna Moos”, “ContactTitle”: “Sales Representative”, “Address”: “Forsterstr. 57”, “City”: “Mannheim”, “Country”: “Germany” }, { “CompanyName”: “Blondesddsl pre et fils”, “ContactName”: “Frdrique Citeaux”, “ContactTitle”: “Marketing Manager”, “Address”: “24, place Klber”, “City”: “Strasbourg”, “Country”: “France” }, { “CompanyName”: “Blido Comidas preparadas”, “ContactName”: “Martn Sommer”, “ContactTitle”: “Owner”, “Address”: “C\/ Araquil, 67”, “City”: “Madrid”, “Country”: “Spain” }, { “CompanyName”: “Bon app'”, “ContactName”: “Laurence Lebihan”, “ContactTitle”: “Owner”, “Address”: “12, rue des Bouchers”, “City”: “Marseille”, “Country”: “France” }, { “CompanyName”: “Bottom-Dollar Markets”, “ContactName”: “Elizabeth Lincoln”, “ContactTitle”: “Accounting Manager”, “Address”: “23 Tsawassen Blvd.”, “City”: “Tsawassen”, “Country”: “Canada” }, { “CompanyName”: “B’s Beverages”, “ContactName”: “Victoria Ashworth”, “ContactTitle”: “Sales Representative”, “Address”: “Fauntleroy Circus”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Cactus Comidas para llevar”, “ContactName”: “Patricio Simpson”, “ContactTitle”: “Sales Agent”, “Address”: “Cerrito 333”, “City”: “Buenos Aires”, “Country”: “Argentina” }, { “CompanyName”: “Centro comercial Moctezuma”, “ContactName”: “Francisco Chang”, “ContactTitle”: “Marketing Manager”, “Address”: “Sierras de Granada 9993”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “Chop-suey Chinese”, “ContactName”: “Yang Wang”, “ContactTitle”: “Owner”, “Address”: “Hauptstr. 29”, “City”: “Bern”, “Country”: “Switzerland” }, { “CompanyName”: “Comrcio Mineiro”, “ContactName”: “Pedro Afonso”, “ContactTitle”: “Sales Associate”, “Address”: “Av. dos Lusadas, 23”, “City”: “Sao Paulo”, “Country”: “Brazil” }, { “CompanyName”: “Consolidated Holdings”, “ContactName”: “Elizabeth Brown”, “ContactTitle”: “Sales Representative”, “Address”: “Berkeley Gardens 12 Brewery”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Drachenblut Delikatessen”, “ContactName”: “Sven Ottlieb”, “ContactTitle”: “Order Administrator”, “Address”: “Walserweg 21”, “City”: “Aachen”, “Country”: “Germany” }, { “CompanyName”: “Du monde entier”, “ContactName”: “Janine Labrune”, “ContactTitle”: “Owner”, “Address”: “67, rue des Cinquante Otages”, “City”: “Nantes”, “Country”: “France” }, { “CompanyName”: “Eastern Connection”, “ContactName”: “Ann Devon”, “ContactTitle”: “Sales Agent”, “Address”: “35 King George”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Ernst Handel”, “ContactName”: “Roland Mendel”, “ContactTitle”: “Sales Manager”, “Address”: “Kirchgasse 6”, “City”: “Graz”, “Country”: “Austria”}];

// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’ , type: ‘String’ },
{ name: ‘ContactName’ },
{ name: ‘ContactTitle’ },
{ name: ‘Address’ },
{ name: ‘City’ },
{ name: ‘Country’ }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
columnsresize: true,
filterable:true,
columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 120 },
{ text: ‘Country’, datafield: ‘Country’, width: 120 }
]
});
});

[Peter StoevKeymaster]

Hi jqdev,

In your code, you didn’t set the type correctly.

The correct is:

{ name: 'CompanyName' , type: 'string' },

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqdevMember]

Thanks for reply but still no difference.

Regards,
jqdev

[Peter StoevKeymaster]

Here’s a working sample built with jQWidgets 2.4.2.

<!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.1.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
             var data = [{ "CompanyName": "132456000", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "4651300", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "123789000", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B's Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}];
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName' , type: 'string' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                filterable:true,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country', width: 120 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
      <div id="jqxgrid">
        </div>
</body>
</html>

The result is below:

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqdevMember]

Hi,

Thanks. above code is working for 2.4.2 version.

Is it possible for 2.2 version?

This example shows how to create a Grid from JSON string.

$(document).ready(function () {
var theme = ”;

var data = [{ “CompanyName”: “132456000”, “ContactName”: “Maria Anders”, “ContactTitle”: “Sales Representative”, “Address”: “Obere Str. 57”, “City”: “Berlin”, “Country”: “Germany” }, { “CompanyName”: “4651300”, “ContactName”: “Ana Trujillo”, “ContactTitle”: “Owner”, “Address”: “Avda. de la Constitucin 2222”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “123789000”, “ContactName”: “Antonio Moreno”, “ContactTitle”: “Owner”, “Address”: “Mataderos 2312”, “City”: “Mxico D.F.”, “Country”: “Mexico” }, { “CompanyName”: “Around the Horn”, “ContactName”: “Thomas Hardy”, “ContactTitle”: “Sales Representative”, “Address”: “120 Hanover Sq.”, “City”: “London”, “Country”: “UK” }, { “CompanyName”: “Berglunds snabbkp”, “ContactName”: “Christina Berglund”, “ContactTitle”: “Order Administrator”, “Address”: “Berguvsvgen 8”, “City”: “Lule”, “Country”: “Sweden” }];

// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’, type: ‘string’ },
{ name: ‘ContactName’ },
{ name: ‘ContactTitle’ },
{ name: ‘Address’ },
{ name: ‘City’ },
{ name: ‘Country’ }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
columnsresize: true,
filterable:true,
columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 120 },
{ text: ‘Country’, datafield: ‘Country’, width: 120 }
]
});
});

[Peter StoevKeymaster]

I cannot suggest you a work around for version 2.2. The issue was reported by our users and resolved in a later release.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqdevMember]

below are included files.

[jqdevMember]

Ok thanks, I’ll use 2.4 version.

Regards,
jqdev

[Moizuddin KhajaParticipant]

Just to add.
Our Problem : We have data as “Site 1” in one of the column. Though we provided “string” as type for the column we have got filters for numeric column i.e ‘Less Than’etc.
Our Observation is that when we changed data to “Site1″,”Site2” i.e removed space then we are getting filters for string column type.

Any suggestions for the data “Site 1”, “Site 2”.
PS : We are using version 4.1.2
Thanks in advance.
Moizuddin Khaja

[adminKeymaster]

Update the datafields definitions. Each datafield should have the “type” set. If it is “number” set it to “number”. Filters and datafield types are bound.

[Author]

Posts