[ChristopherParticipant]

Hi PoojaGumalwar,

In order to properly visualize your data you have to use cellsRenderer on the Report To column because in the case where it’s a sub-property of children the map to the firstName property of reportTo is different. Here’s how your ‘columns’ variable should look:

  this.columns =
                [
                    { text: 'Name', dataField: 'ouName', width: "350px" },
                    { text: 'Code', dataField: 'ouCode', width: "130px" },
                    { text: 'Is Disable', dataField: 'isDisabled', width: "110px" },
                    {
                        text: 'Report To', dataField: 'reportTo', width: "250px",
                        cellsRenderer: function (rowKey, column, cellValue, rowData, cellText) {
                            if (rowData.level !== 0 && typeof cellText === 'object') {
                                return cellText.firstName;
                            }

                            return cellText;
                        }
                    },
                    {
                        text: 'Action', width: "110px", cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                            // render custom column.
                            return "<button data-row='" + row + "' class='editButtons fa fa-edit custom-fa' (click)='UpdateButton(oudata)'></button><i margin-left: 15px;' data-row='" + row + "' class='fa fa- trash - o custom- fa' (click) ='DeleteButton(oudata) '></i >";
                        }
                    }
                ];

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi kapiljain,

Yes there is a way to acomplish that. You can use the formatFunction(value) property of the valueAxis to check if the value is already drawn and return an empty string instead of the value. You can create a global variable of type array to cache the values that already have been drawn and check the new values agains it. Here’s an example of a format function:

formatFunction: function (value) {
   if (values.indexOf(value) > -1) {
       return '';
   }

   values.push(value);
       return value;
   }

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi dharilkothari@gmail.com,

Rounding up the numbers won’t make any difference because the numbers themselves are different only after their 5th preciison point. Mathematically you can’t show different values when they are the same until their 6th precision number. The only solution to see the difference between the numbers is if you use a bigger precision ( decimal places > 5), or use different values that have bigger differences.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi nithinkumar,

Checking if a user is opening the same page again is a backend operation that must be done in your backing code, not in the client. I already provided you with a demo on how to disable a cell(checkbox). Here is the link to that demo:
http://jsfiddle.net/3emo9pe3/

If you want to disable the editing of the whole row(not just the checkbox cell) you can do that using the cellbeginedit function. Here is a demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/disableeditingofrows.htm?light

If you need additional help with instructions and detailed code on how to do it, you can write to our service departament. Check the following link for more details:
http://www.jqwidgets.com/services/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi nithinkumar,

Check this turtorial on how to keep the states of the checkboxes and retrieve them after a while from a database:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm?search=

To disable only the cells that have been previously edited, you need to check their value is true, if it is disable usign the following approach:
http://jsfiddle.net/3emo9pe3/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi pmcintosh,

Thank you for your feedback. As a solution you could disable the “paste” operation for the “Employee Name” column in the example that you used. You can do that using the handlekeyboardnavigation function. You can check for the datafield of the dropwodnlist column and disable the CTRL+V keycode combination for pasting. You could also intercept the value being pasted.

You can read more about it API documentation http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi soojung,

the last parameter determines the charSet. In your case, you’ve set it to “utf-8”.

Here’s the documentation for the exportdata method:

exportdata	Method	
Exports all rows loaded within the Grid to Excel, XML, CSV, TSV, HTML or JSON.

The first parameter of the export method determines the export's type - 'xls', 'xml', 'html', 'json', 'pdf', 'tsv' or 'csv'. 
The second parameter is the file's name. If you don't provide a file name, the Grid will export the data to a local variable. 
For example:
var data = $("#jqxgrid").jqxGrid('exportdata', 'json');

The third parameter is optional and determines whether to export the column's header or not. Acceptable values are - true and false. By default, the exporter exports the columns header. 
The fourth parameter is optional and determines the array of rows to be exported. By default all rows are exported. Set null, if you want all rows to be exported. 
The fifth parameter is optional and determines whether to export hidden columns. Acceptable values are - true and false. By default, the exporter does not export the hidden columns. 
The sixth parameter is optional and determines the url of the export server. By default, the exporter is hosted on a jQWidgets server. 
The last parameter is optional and determines the char set.
Parameter	Type	Description
dataType	String	
fileName(optional)	String	
exportHeader	Boolean	
rows	Array	
exportHiddenColumns	Boolean	
serverURL	String	
charSet	String	Return Value
None
Code example

Invoke the exportdata method.

 $("#jqxGrid").jqxGrid('exportdata', 'json', 'jqxGrid');

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi jahnvi25,

You forgot to add a reference to “http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js”. This file is mandatory for the jqxDateTimeInput to work properly.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi susduj,

Actually the jqxTreeGrid supports String type IDs. Here is a demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-grouping.htm?light

Here’s how your code should look if you want the hierarchy to rely on the “Reports to” datafield:

     var employees = [
                    { "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": "Andrew", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                    { "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": "Andrew", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
                    { "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": "Andrew", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                    { "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": "Andrew", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                    { "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": "Andrew", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
                    { "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": "Steven", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                    { "FirstName": "Robert", "LastName": "King", "ReportsTo": "Steven", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                    { "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": "Steven", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                    { "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": "Steven", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
                ];
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'ReportsTo', type: 'string' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' }
                ],
                hierarchy:
                {
                    groupingDataFields:
                            [
                                {
                                    name: "ReportsTo"
                                }
                            ]
                },
                id: 'FirstName',
                localData: employees
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 850,
                source: dataAdapter,
                sortable: true,
                ready: function()
                {
                    $("#treeGrid").jqxTreeGrid();
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', width: 200 },
                  { text: 'LastName', dataField: 'LastName', width: 200 },
                  { text: 'Title', dataField: 'Title', width: 160 },
                  { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                  { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                  { text: 'Address', dataField: 'Address', width: 250 },
                  { text: 'City', dataField: 'City', width: 120 },
                  { text: 'Country', dataField: 'Country' }
                ],
                
            });

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi stlredlink,

“sortcomparer” isn’t part of the API. Sort is used to apply custom sorting function for all of the columns. Unfortunatelly it’s not possible to apply a custom sorting function to specific columns only.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi ramona86,

Yes, you can do that, but you need to implement it yourself. We don’t have a demo of that custom implementation. However, we do have something similar: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-manual-aggregates-calculation.htm?light

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi 77chuachua,

Increase the columnsGapPercent to a bigger number, for example, 40 and the columns will be repositioned better. Another approach is to just remove the property from the settings.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi ratchetclank,

Thank you for your feedback. You could set the autoRowHeight property to “false” so the height of the cell won’t change.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi 77chuachua,

Please provide the full code to we can test it and come up with a suggestion/solution. You can also share a demo using jsFiddle or jsEditor.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi shimmoril,

The expanding direction of the filter menu depends on the available size in the jqxGrid. If there is enough space from the right border of the jqxGrid for the menu to appear, the it will open to the right, if there isn’t it will open to the left. It’s not possible to customize that. However what you can do is customize the filter menu itself. So it appears smaller and fits in the iframe of the FancyBox.
Here is a demo on how to custimze the filter menu:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering-menu-custom-widgets.htm?light

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts