jQWidgets Forums

Tagged: grid checkbox column, jqxgrid

This topic contains 10 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Checkbox column in Grid Posts
November 6, 2012 at 6:17 am Checkbox column in Grid #10565
dpdragnev
Member
Hi,

I have a grid which has one boolean column. However, when I run the code, the grid hangs on the loading gif and I get the “TypeError: t.toLowerCase is not a function” error. Here is my code:
```
//set up the data source
    var source = {
        datatype: "json",
        datafields: [
            { name: 'EmployeeId' },
            { name: 'FirstName' },
            { name: 'LastName' },
            { name: 'Email' },
            { name: 'CellPhone' },
            { name: 'Notes' },
            { name: 'Active', type: 'boolean' }
        ],
        id: 'EmployeeId',
        url: "GetEmployeesJson"
    };

    //initialize the grid
    $("#jqxgrid").jqxGrid({
        width: 950,
        height: 350,
        source: source,
        theme: theme,
        columns: [
            { text: 'ID', datafield: 'EmployeeId', width: 50 },
            { text: 'First Name', datafield: 'FirstName', width: 100 },
            { text: 'Last Name', datafield: 'LastName', width: 100 },
            { text: 'E-Mail', datafield: 'Email', width: 200 },
            { text: 'Cell Phone', datafield: 'CellPhone', width: 140 },
            { text: 'Notes', datafield: 'Notes', width: 290 },
            { text: 'Active', datafield: 'Active', columntype: 'checkbox', width: 70 }
        ],
        id: "EmployeeId",
        columnsresize: true
    });
```
I am not sure what I am doing wrong. I checked the json response from the server and the Active columns is passed as true not “true”. Everything seems correct as far as I can see.

Thank you for your help.
November 6, 2012 at 6:26 am Checkbox column in Grid #10569

Peter Stoev
Keymaster

Hi Daniel,

Thank you for the feedback.

We’ll investigate the reported behavior and if we reproduce it, we’ll resolve it as soon as possible.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 6, 2012 at 2:25 pm Checkbox column in Grid #10590

dpdragnev
Member

Just a thought… I saw in all the examples that you are using dataAdapter. Do I have to use dataAdapter in order to make this work or I can just bind to the source directly?

November 6, 2012 at 2:33 pm Checkbox column in Grid #10593

Peter Stoev
Keymaster

Hi Daniel,

dataAdapter should be always used for binding the Grid. Just setting the source property to point to the source object is obsolete.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 6, 2012 at 2:54 pm Checkbox column in Grid #10597

dpdragnev
Member

Thank you. Another observation: if I remove the type: ‘boolean’ attribute on the source field, the grid loads correctly, but the checkbox is always unchecked. What is strange is that adding the type of the field triggers this error.

November 6, 2012 at 3:06 pm Checkbox column in Grid #10603

Peter Stoev
Keymaster

Hi Daniel,

We are aware about that and the issue will be resolved in the next version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 6, 2012 at 3:28 pm Checkbox column in Grid #10606

dpdragnev
Member

Thank you Peter,

Do you have a workaround we can use in the meantime? Or maybe a suggestion on how to display a boolean column. I do not want our customers to see true and false in that column.

November 6, 2012 at 3:50 pm Checkbox column in Grid #10608
Peter Stoev
Keymaster
Hi Daniel,

You can update the bool values to “true” and “false” as a workaround. This can be done in the downloadComplete callback.

Example:
```
          // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein', type: 'bool' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data) {
                    data[0]["protein"] = "true";
                    return data;
                }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', columntype: 'checkbox', minwidth: 120 }
              ]
            });
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
November 6, 2012 at 4:16 pm Checkbox column in Grid #10609

dpdragnev
Member

Instead of loading text, can I inject a img tag? Maybe I display a check image when the value of the field is true.

November 6, 2012 at 4:43 pm Checkbox column in Grid #10610

dpdragnev
Member

Peter,

As an alternative, I would like to display Yes and No when the field is true. I am trying to execute the following code, but I cannot make it to work:

// create the dataadapter
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data) {
for (var i = 0; i < dataAdapter.records.length; i++) {
if (data[i]["Active"]) {
data[i]["Active"] = "Yes";
} //if
} //for
return data;
} //downloadComplate
});

What am I doing wrong? This is a very common scenario and there must be a better way of displaying boolean data than showing true and false to the user.

Thanks

November 7, 2012 at 4:49 am Checkbox column in Grid #10623

Peter Stoev
Keymaster

Hi Daniel,

There are still no loaded records in the downloadComplete callback. The data parameter is the data that is downloaded. You can change it before it is loaded in the dataAdapter. The loadComplete callback is the one that is called when the dataAdapter’s records are loaded.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.