jQWidgets Forums

Tagged: Cell, close, custom, dropdown, dropdown grid, dropdowngrid, editor, filter, filterable, grid, jqxgrid, outside

This topic contains 13 replies, has 2 voices, and was last updated by Rong Nguyen 10 years, 5 months ago.

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

Author

Can not filter in dropdowngrid Posts

October 21, 2014 at 9:49 am Can not filter in dropdowngrid #61434

Participant

Hi community,
I am using this way to put dropdowngrid into cell:
http://www.jqwidgets.com/community/topic/put-dropdowngrid-element-into-a-cell/#post-47887

But the grid inside cell can not filter, when filter is on the grid will display.

October 21, 2014 at 10:03 am Can not filter in dropdowngrid #61438

Dimitar

Participant

Hello Rong Nguyen,

You have to add filterable: true to the dropdown grid to enable its filtering functionality, i.e.:

<!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.10.2.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "Name": "Beate Wilson", "City": "Brussels"}, {"Name": "Andrew Fuller", "City": "Paris"}, {"Name": "Mayumi Murphy", "City": "Washington"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Name', type: 'string' },
                    { name: 'City', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var name;

            $("#jqxgrid").jqxGrid(
            {
                width: 300,
                source: dataAdapter,
                selectionmode: 'singlecell',
                editable: true,
                filterable: true,
                autoheight: true,
                columns: [
                    {
                        text: 'Name', datafield: 'Name', width: 150, columntype: 'template',
                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            editor.append('<div style="border-color: transparent;" id="jqxgrid-editor"></div>');
                            editor.jqxDropDownButton({ width: 150, height: 25 });

                            var data = generatedata(100);

                            var source =
                            {
                                localdata: data,
                                datafields:
                                [
                                    { name: 'firstname', type: 'string' },
                                    { name: 'lastname', type: 'string' },
                                    { name: 'productname', type: 'string' },
                                    { name: 'quantity', type: 'number' },
                                    { name: 'price', type: 'number' }
                                ],
                                datatype: "array",
                                updaterow: function (rowid, rowdata) {
                                    // synchronize with the server - send update command   
                                }
                            };

                            var dataAdapter = new $.jqx.dataAdapter(source);

                            // initialize jqxGrid
                            $("#jqxgrid-editor").jqxGrid(
                            {
                                width: 550,
                                source: dataAdapter,
                                pageable: true,
                                filterable: true,
                                autoheight: true,
                                columnsresize: true,
                                columns: [
                                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 },
                                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                                ]
                            });

                            $("#jqxgrid-editor").on('rowselect', function (event) {
                                var args = event.args;
                                var row = $("#jqxgrid-editor").jqxGrid('getrowdata', args.rowindex);
                                var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                                name = row.firstname + " " + row.lastname;
                                editor.jqxDropDownButton('setContent', dropDownContent);
                                editor.css("display", "none");
                            });

                            $("#jqxgrid-editor").jqxGrid('selectrow', 0);
                        },
                        geteditorvalue: function (row, cellvalue, editor) {
                            // return the editor's value.
                            editor.jqxDropDownButton("close");
                            return name;
                        }
                    },
                    {
                        text: 'City', datafield: 'City', width: 150
                    }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 21, 2014 at 10:12 am Can not filter in dropdowngrid #61441

Rong Nguyen

Participant

Hi Dimitar,

I mean, i can filter but when filter table display the grid will disappear.

October 22, 2014 at 5:35 am Can not filter in dropdowngrid #61472

Dimitar

Participant

Hi Rong Nguyen,

This is a normal behaviour and it occurs only when you click the editor (dropdown grid) on a place that is outside the main grid. To avoid this, your parent grid should encompass the dropdown grid.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 28, 2014 at 2:46 am Can not filter in dropdowngrid #61698

Rong Nguyen

Participant

Hi Dimitar,
I have done this code but the issue is still occur:

editor.append('<div id="jqxDD"></div>');
$("#jqxDD").append('<div id="jqxGP"></div>');
$("#jqxDD").jqxDropDownButton();
$("#jqxGP").jqxGrid({

October 28, 2014 at 7:31 am Can not filter in dropdowngrid #61711

Dimitar

Participant

Hi Rong Nguyen,

What I meant by “your parent grid should encompass the dropdown grid” was that the dropdown grid should always be displayed inside the main grid (visually, not in the DOM), i.e. when you open the dropdown grid, it should always be within the boundaries of the main grid.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 30, 2014 at 2:43 am Can not filter in dropdowngrid #61833

Rong Nguyen

Participant

Hi Dimitar,
It not work, you can see the attached image
Grid filter

October 30, 2014 at 6:47 am Can not filter in dropdowngrid #61843

Dimitar

Participant

Hi Rong Nguyen,

Do you mean that the editor grid closes if you click the “Filter” button or some other issue?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 30, 2014 at 9:14 am Can not filter in dropdowngrid #61860

Rong Nguyen

Participant

Hi Dimitar,

Yes, the loopup grid will close when i click on filter panel(anywhere on filter panel).

October 30, 2014 at 9:32 am Can not filter in dropdowngrid #61864

Dimitar

Participant

Hi Rong Nguyen,

We confirm the reported behaviour. Unfortunately, the dropdown grid is not in the list of supported editors and we cannot provide you with any solution on the matter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 30, 2014 at 9:38 am Can not filter in dropdowngrid #61865

Rong Nguyen

Participant

Hi Dimitar,

We would like to use dropdown grid to look up value.

We see the JQX have a lot of features, they are good for us. Now we will buy license, so i think we will be received the best support from jQWidgets team.

October 31, 2014 at 5:54 am Can not filter in dropdowngrid #61908

Dimitar

Participant

Hi Rong Nguyen,

Please try using filter row as an alternative (set the dropdown grid’s showfilterrow property to true).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 31, 2014 at 10:32 am Can not filter in dropdowngrid #61937

Rong Nguyen

Participant

Hi Dimitar,

Yes, it may be the best solution at this time, thank for your help

November 3, 2014 at 3:16 am Can not filter in dropdowngrid #62012

Rong Nguyen

Participant

Hi Dimitar,
Please review the following issue when you have time
http://www.jqwidgets.com/community/topic/filter-date-render-failed-when-virtualservertrue/

Author

Posts

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

You must be logged in to reply to this topic.