jQWidgets Forums

Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 24, 2015 at 6:02 pm in reply to: How to display column headers in bold ? How to display column headers in bold ? #74145

    joelk
    Participant

    I know this question is years-old, and there was an answer, but the example provided in the answer doesn’t work for me: the ‘cellsrenderer’ function seems only to operate on rows _other_ than the header. I can’t find a similar function for the header cells…perhaps I am missing it. How do I style column headers?
    (I solved the question asked–bolding column headers–by modifying .jqx-grid-columngroup-header definition in jqx.base.css, but that didn’t seem optimal).

    July 15, 2015 at 7:45 pm in reply to: Tabbing across dropdownlist in grid Tabbing across dropdownlist in grid #73777

    joelk
    Participant

    Well, here’s an example:

    <!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.11.1.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.columnsresize.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript">
         $(document).ready(function () {
                var tableData = [
                    {
                        "ID": 100,
                        "Name": "Type A",
                        "Data Type": "UINT8",
                        "Read": true,
                        "Write": true
                    },
                    {
                        "ID": 101,
                        "Name": "Type B",
                        "Data Type": "UINT16",
                        "Read": false,
                        "Write": true
                    },
                    {
                        "ID": 102,
                        "Name": "Type C",
                        "Data Type": "UINT32",
                        "Read": true,
                        "Write": false
                    },
                    {
                        "ID": 103,
                        "Name": "Type D",
                        "Data Type": "UINT8",
                        "Read": true,
                        "Write": true
                    }

                ];

                var menuData = [
                    {"label": "UINT8", "value": "UINT8"},
                    {"label": "UINT16", "value": "UINT16"},
                    {"label": "UINT32", "value": "UINT32"},
                    {"label": "SINT8", "value": "SINT8"},
                    {"label": "SINT16", "value": "SINT16"},
                    {"label": "SINT32", "value": "SINT32"},
                    {"label": "FLOAT32", "value": "FLOAT32"},
                    {"label": "FLOAT64", "value": "FLOAT64"},
                    {"label": "BOOLEAN", "value": "BOOLEAN"},
                    {"label": "UTF8S", "value": "UTF8S"}
                ];

                var menuSource = {
                    datatype: "json",
                    datafields: [
                        { name: 'label', type: 'string' },
                        { name: 'value', type: 'string' }
                    ],
                    localdata: menuData
                };

                var menuDataAdapter = new $.jqx.dataAdapter(menuSource);

                var source = {
                    datatype: "json",
                    datafields: [
                            { name: 'ID'},
                            { name: 'Name'},
                            { name: 'Data Type'},
                            { name: 'Read'},
                            { name: 'Write'}
                        ],
                    localdata: tableData,
                };

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

                $("#jqxgrid").jqxGrid({
                        columns: [
                            { text: 'ID', datafield: 'ID', columntype: 'numberInput'},
                            { text: 'Name', datafield: 'Name', columntype: 'textbox'},
                            { text: 'Data Type', datafield: 'Data Type', columntype: 'dropdownlist',
                                initeditor: function (row, cellvalue, editor) {
                                    editor.jqxDropDownList({displayMember: 'label', valueMember: 'value', source: menuDataAdapter});
                                }
                            },
                            { text: 'Read', datafield: 'Read', columntype: 'checkbox'},
                            { text: 'Write', datafield: 'Write', columntype: 'checkbox'}
                        ],
                        editable: true,
                        sortable: true,
                        sorttogglestates: 2,
                        source: tableDataAdapter,
                        showsortmenuitems: false,
                        width: 750,
                        autoheight: true
                    });

            });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"></div>
</body>
</html>
    July 14, 2015 at 8:08 pm in reply to: Grid sorting issues Grid sorting issues #73719

    joelk
    Participant

    Item 2 Resolved…finally located “showsortmenuitems” toggle, set to false.

    Item 1 is a symptom of a broader issue: dropdownlist instances also draw with transparent background color–not only the sort menu. Any suggestions to correct this appreciated.

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