[ChristopherParticipant]

Hi padma,

That’s not possible. But you can accomplish the same result if you create a new checkbox column(as your first jqxGrid column) that selects the current row when checked. That new column can be pinned and it will work exactly the same way. Here is a demo:
https://www.jseditor.io/?key=grid-select-on-current-page

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi Richard B,

Thank you for your feedback. We will fix this in our next release.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi AlexeyZabelsky,

We already offer this functionality through the jqxGrid’s API.
Have a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?light

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi VitaliyST,

The setContent function of the jqxDropDownButton is used to set the content(the text) of the DropDown button. For example:

var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
$("#jqxdropdownbutton").jqxDropDownButton('setContent', dropDownContent);

This will set the data that is returned from a checkbox selection as the content of the DropdownButton.

If you want the text to be empty when you click on “uncheck all” you can use the same setContent function but set a different content by checking if something from the jqxGrid is selected. For example:

var nonSelected = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + 'No Selection' + '</div>'; $("#jqxdropdownbutton").jqxDropDownButton('setContent', nonSelected);

The code provided in the above lines is take from the jqxDropDownGrid demo, here:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dropdowngrid.htm?light

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi shyan,

I made a demo using your code with my own data since you didn’t provide yours and all seems fine. Here it is:
https://www.jseditor.io/?key=xb-angular-jqxgrid-demo

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi alastairwalker,

Why don’t you just assign it to a global variable so you can use it later? If you cant use the jqxdataAdapter, then you need to format the date using JavaScript operations.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi MatthewV,

The difference is that in your first code sample you have a typo:

dateFileds: [
                { name: "FullPath", type: "string" },
                { name: "DateRaised", type: "date" },
                { name: "Description", type: "string" }
            ],

There’s no “dateFields” property. It’s called dataFields. That’s why the date wasn’t loaded properly. The jqxGrid wasnt recognizing that property and it uses it’s default one, which isn’t correct.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi alastairwalker,

cellsrenderer only changes the way the value of the cell is rendered. This means that if you retrieve the value of the cell using the API methods you will see the original date that isn’t formated. So if you want to use the same format that you’ve applied to the jqxGrid column when you retrieve the date, you need to format it again. There’s a very easy way to do it, through the formatDate function of the jqxdataAdapter. Like so:
adapter.formatDate(data.date, 'dd-MMMM-yyyy').

Here is the full code with the applied changes:

       console.log('got here');
            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',
                source: adapter,
                sortable: true,
                selectionmode: 'singlecell',
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    columngroup: 'Name',
                    width: 90
                }, {
                    text: 'Last Name',
                    columngroup: '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'
                }]
            });

            $("#jqxbutton").jqxButton({
                theme: 'energyblue',
                width: 100,
                height: 30
            });

            $('#jqxbutton').click(function () {
                var data = $('#jqxgrid').jqxGrid('getrowdata', 0);
                alert(data.firstname + " " + data.lastname + " " + adapter.formatDate(data.date, 'dd-MMMM-yyyy'));
            });

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi MatthewV,

“/Date(1452312998000)/” isn’t a valid date so you can’t format it the way you want to. A valid date is the number between the breckets “1452312998000”. This is the time in miliseconds. So you have two options:
1) change the JSON file to return only that number and that’s all you have to do to resolve the issue.
2) Or Use cellsrenderer function on the column to convert the string “Date(1452312998000)” to a valid date. Here’s how to do it:
You can change the format of the date in the following line:
“var date = dataAdapter.formatDate(new Date(parseInt(newValue[0])), ‘d-M-yy’);”

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi Shamine,

In order to accomplish that you need to set the editable property to “true” on the jqxGrid and the same property to “false” on every column you don’t want to be editable.Then you can use the cellbeginedit property, on the column that will be editable, to check if the value of each cell is “null” and if it is, you can edit it. Here is an demo:
https://www.jseditor.io/?key=xb-grid-custom-cell-editing

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi TP_DTNA,

The jqxGrid has a method called clear that is used to clear all loaded data. You can use to remove all data when a search result is incorrect. Here is a demo:
http://jsfiddle.net/jqwidgets/2dsfE/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi VitaliyST,

You can change the “Please choose” label through the placeHolder property of the jqxDropDownList. Here is a demo:
http://jsfiddle.net/7UBGc/118/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi lsmarco2008@gmail.com,

You can use the setcellvalue function to set the checkbox values of each row. The method takes rowBoundIndex, dataField and value as input parameters so you need to store information about those fields in the array that you create. Then onreadymethod, you call thesetcellvaluefunction and pass each record from the array to the function. You can get the row bound index using thegetrowboundindex method.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi lsmarco2008@gmail.com,

If you add the retrieved values of the checkboxes in an array you can easily recognize which value to which row applies, because the jqxGrid rows start from 0 and are also represented as an Array. If you have multiple checkboxes per row, maybe you could use a two dimensional array or a map to store the values of each row.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi bach,

Usually, what you want to do isn’t available trough the jqxGrid API. So what I’m giving you is a workaround which might not be universal, but will work in your scenario. Here is the updated link:
http://jsfiddle.net/z9br38f0/41/

Yes you can do the same in the ‘cellendedit’ event handler. The background will be colored when cell edit has ended.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts