jQuery UI Widgets Forums Grid Grid setcolumnproperty method

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 10 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Grid setcolumnproperty method #60753

    usrimas
    Participant

    Hi!

    Exist possibility to add for grid column with “setcolumnproperty” cell editing functions ? Now from doc : $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘width’, 100);

    But I want to add something like that :

    $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘createeditor’, mineFunct1 );
    $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘initeditor’, mineFunct2 );
    $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘cellvaluechanging’, mineFunct3 );

    Thanks in advance !

    Grid setcolumnproperty method #60755

    usrimas
    Participant

    I want to supplement mine question …

    Mine javascript source is doing grid from database table in which I’m storing info : datafield of query, type, text, format and etc … It works fine. The problem begins then I must to direct for editing some complex structures – dropdownlist or combobox editing or validations. So I’m searching a way how to describe this process . As I can understand, I have 2 choice : in grid columns describe function :

    columns: [
    {
    text: ‘Ship City’, datafield: ‘ShipCity’, width: 150, columntype: ‘combobox’,
    createeditor: function (row, column, editor) { mineFunct1 },
    // mineFuct1 – function for specified field – it will directed in mine table for grid construction … But I don’t konw how with params 🙁
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { if (newvalue == “”) return oldvalue; }
    },
    { another column … }

    or set it after grid init with setcolumnproperty

    $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘ShipCity’, ‘columntype’, ‘combobox’);
    $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘ShipCity’, ‘createeditor’, mineFunct1 );

    How this can be done ? Thanks !

    Grid setcolumnproperty method #60795

    Dimitar
    Participant

    Hello usrimas,

    This can be achieved. Here is 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.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);
    
                var 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:" });
                };
    
                var cellvaluechanging = function (row, column, columntype, oldvalue, newvalue) {
                    // return the old value, if the new value is empty.
                    if (newvalue == "") return oldvalue;
                };
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: ordersAdapter,
                    selectionmode: 'singlecell',
                    editable: true,
                    pageable: true,
                    autoheight: true,
                    ready: function () {
                        $("#jqxgrid").jqxGrid("setcolumnproperty", "ShipCity", "createeditor", createeditor);
                        $("#jqxgrid").jqxGrid("setcolumnproperty", "ShipCity", "cellvaluechanging", cellvaluechanging);
                    },
                    columns: [
                        { text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox' },
                        {
                            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' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.