jQuery UI Widgets Forums Grid How can I get All Columns of Grid.

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 10 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • How can I get All Columns of Grid. #54896

    enrique
    Participant

    Hello,
    I tried to get all column’s text of Grid.

    
    var textData = new Array();
    var cols = $("#jqxGrid").columns
    for (var i = 0; i < cols.length; i++) {
        textData[i] = cols[i].text;    
    }
    

    It’s wrong ?? I can’t do it.
    Please help me.

    Thank you.

    How can I get All Columns of Grid. #54900

    Dimitar
    Participant

    Hello enrique,

    Do you mean getting the text of all column headers? If so, here is how to achieve it:

    var textData = new Array();
    var cols = $("#jqxGrid").jqxGrid("columns");
    for (var i = 0; i < cols.records.length; i++) {
        textData[i] = cols.records[i].text;
    }

    Best Regards,
    Dimitar

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

    How can I get All Columns of Grid. #54903

    enrique
    Participant

    Dimitar,
    Thank you for your support.

    And I hava one more question.
    I’m trying to add the new empty row and in that row, I want to render the Drop-Down list.
    (The new row is editable and when I input the value by selection in Drop-Down List. Can I do? How can I do?)

    Please Help me.

    How can I get All Columns of Grid. #54912

    Dimitar
    Participant

    Hi enrique,

    You just have to add the new row with the addrow method. Here is an example, based on the demo Customized Editors:

    <!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.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var ordersSource =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:OrderID',
                    url: "../sampledata/orders.xml",
                    pager: function (pagenum, pagesize, oldpagenum) {
                        // callback called when a page or page size is changed.
                    },
                    updaterow: function (rowid, rowdata, result) {
                        // synchronize with the server - send update command
                        // call result with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        result(true);
                    }
                };
                var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: ordersAdapter,
                    selectionmode: 'singlecell',
                    editable: true,
                    pageable: true,
                    autoheight: true,
                    columns: [
                        {
                            text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox',
                            createeditor: function (row, column, editor) {
                                // assign a new data source to the combobox.
                                var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                                editor.jqxComboBox({ autoDropDownHeight: true, 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;
                            }
                        },
                        {
                            text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist',
                            createeditor: function (row, column, editor) {
                                // assign a new data source to the dropdownlist.
                                var list = ['Germany', 'Brazil', 'France'];
                                editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
                            },
                            // 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;
                            }
                        },
                        { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' }
                    ]
                });
                $("#addNewRow").click(function () {
                    $("#jqxgrid").jqxGrid("addrow", null, {});
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
        <button id="addNewRow">
            Add new row</button>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How can I get All Columns of Grid. #54938

    enrique
    Participant

    Hi, Dimitar

    Thanks to your kindly support.
    And I modified your example for making the customized editor from Drop Down List to Check Boxes Drop Down List.
    So I changed the code like this (below), but the Check Boxes are not rendered.
    What is my mistake or problem?

    
    { text: 'Type', datafield: 'type', width: 130, align: 'center', cellsalign: 'center', columntype: 'dropdownlist',
      createeditor: function (row, column, editor) {
                        var list = ['Type1', 'Type2', 'Type3];
                        editor.jqxDropDownList({ autoDropDownHeight: true, source: list, checkboxes: true });
      }, 
      cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                             if (newvalue == "") return oldvalue;
      }
    }
    
    How can I get All Columns of Grid. #54947

    Dimitar
    Participant

    Hi enrique,

    Enabling checkboxes in a dropdownlist requires a reference to the script jqxcheckbox.js, which is not present in our example. Please add it and try again.

    Best Regards,
    Dimitar

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

    How can I get All Columns of Grid. #54954

    enrique
    Participant

    Hi, Dimitar

    Sure, sure I know I need & have to add the jqxcheckbox.js in my code. And I already insert it to the code.
    But It’s not working.
    The Checkbox position is allocated but checkbox is not shown.
    I don’t know why ??

    How can I get All Columns of Grid. #54998

    Dimitar
    Participant

    Hi enrique,

    The demo Custom Column Editor shows such dropdownlist with checkboxes. Please check it out and compare it to your solution (note: columntype can be either “dropdownlist” or “template”).

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.