jQWidgets Forums

Tagged: combobox, grid, initeditor, jqxComboBox, jqxgrid, title, Tooltip

This topic contains 6 replies, has 2 voices, and was last updated by Syai 12 years, 2 months ago.

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

Author

Combobox Items width in Grid column Posts

March 22, 2013 at 5:03 am Combobox Items width in Grid column #17684

Syai

Participant

Hi,

I’m using jqxgrid for inline editing. In the grid I’ve combobox fields where I can select the items. My problem is the width of the combobox items is fixed as the column width of Grid and it is showing horizontal scrollbar. I don’t want to show horizontal scrollbar here and when I open the dropdown, the width of the items should by automatically adjusted to show the full text. Is there any option provided for combobox to show full item text?

Regards,

Syai

March 22, 2013 at 7:24 am Combobox Items width in Grid column #17694

Dimitar

Participant

Hello

Here is a sample code on how to achieve this:

                columns: [
                    {
                        text: 'Ship City', datafield: 'ShipCity', width: 90, columntype: 'combobox',
                        createeditor: function (row, column, editor) {
                            // assign a new data source to the combobox.
                            var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                            editor.jqxComboBox({ source: list, promptText: "Please Choose:" });
                        },
                        // update the editor's value before saving it.
                        cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            // return the old value, if the new value is empty.
                            if (newvalue == "") return oldvalue;
                        },
                        initeditor: function (row, cellvalue, editor) {
                            editor.jqxComboBox({ dropDownWidth: 100 });
                        }
                    },

The key here is the initeditor callback function.

Best Regards,
Dimitar

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

March 22, 2013 at 7:43 am Combobox Items width in Grid column #17697

Syai

Participant

Hi Dimitar,

Thanks for the reply. I have another doubt. Is there any possibility to get the auto width of the dropdown depending on the items in it, instead of hardcoding it. So that the horizontal dropdown cannot be shown at all.

Regards,
Syai

March 22, 2013 at 8:09 am Combobox Items width in Grid column #17699

Dimitar

Participant

Hi Syai,

Unfortunately, auto dropDownWidth is not supported in jqxComboBox.

Best Regards,
Dimitar

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

March 22, 2013 at 8:54 am Combobox Items width in Grid column #17708

Syai

Participant

Hi Dimitar,

Need one more clarification. Does it possible to apply tooltips for the items of the combobox items like tooltips for cells of the grid.

Regards,
Syai

March 22, 2013 at 9:24 am Combobox Items width in Grid column #17716

Dimitar

Participant

Hi Syai,

To have tooltips, you should set the item property title. E.g.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../../scripts/jquery-1.8.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxComboBox
                $("#jqxWidget").jqxComboBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
                var items = $("#jqxWidget").jqxComboBox('getItems');
                $.each(items, function () {
                    var item = this;
                    item.title = item.label;
                });
            });
        </script>
        <div>
            <div style='float: left;' id='jqxWidget'>
            </div>
            <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana;">
                <div id="selectionlog">
                </div>
                <div style='max-width: 300px; margin-top: 20px;' id="checkedItemsLog">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 22, 2013 at 9:59 am Combobox Items width in Grid column #17719

Syai

Participant

Awesome. This is working perfect to me. Thank you Dimitar.

Regards,
Syai

Author

Posts

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

You must be logged in to reply to this topic.