jQuery UI Widgets › Forums › Grid › Make editable dropdown grid

Tagged: , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  robf 5 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Make editable dropdown grid Posts
  • June 18, 2019 at 11:38 pm Make editable dropdown grid #105714

    robf
    Participant

    Hello,
    Following examples for dropdown grid AND editable grid. Works OK except for the fact that when I click a cell to edit the dropdown collapses. How to I keep the dropdown grid open?

    Code:

    <head>
	<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.selection.js"></script> 
	<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(5);
            var source =
            {
                localdata: data,
                datafields:
                [
					{ name: 'available', type: 'bool' },
					{ name: 'firstname', type: 'string' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
             {
                 width: 550,
                 source: dataAdapter,
				 pageable: false,
				 editable: true,
                 autoheight: true,
                 columnsresize: true,
                 columns: [                   
						{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
						{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
						{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                 ]
             });
            // initialize jqxGrid
            $("#jqxdropdownbutton").jqxDropDownButton({
                width: 150, height: 30
            });
            $("#grid").on('rowselect', function (event) {
                var args = event.args;
                var row = $("#grid").jqxGrid('getrowdata', args.rowindex);
				var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 6px;">' + 
								row['firstname'] + '</div>';
                $("#jqxdropdownbutton").jqxDropDownButton('setContent', dropDownContent);
            });
            $("#grid").jqxGrid('selectrow', 0);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxdropdownbutton">
            <div style="border-color: transparent;" id="grid">
            </div>
        </div>
    </div>
</body>
    June 19, 2019 at 7:38 am Make editable dropdown grid #105719

    Todor
    Participant

    Hello robf,

    After click on a cell to edit it, the jqxDropDownButton’s close event is fired. You could review the following workaround whether it fits your needs.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    June 19, 2019 at 4:34 pm Make editable dropdown grid #105734

    robf
    Participant

    Hello Todor,
    I tried the fiddle, but that would be a usability nightmare. End-users wouldn’t be happy when having to edit even a few cells as it opens and closes constantly. I guess there’s no way to suppress the close event when editing?

    Thanks

    June 20, 2019 at 6:41 am Make editable dropdown grid #105747

    Todor
    Participant

    Hello robf,

    Unfortunately, yes. But if you change the animationType property of jqxDropDownButton to ‘none’ the fade effect will disappear and it should do the work. You could review the updated example.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    June 20, 2019 at 5:01 pm Make editable dropdown grid #105768

    robf
    Participant

    Nice! Thank you very much!
    Rob

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.