jQWidgets Forums

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 25, 2015 at 8:00 pm in reply to: Can I specify a column in a datatable as read-only? Can I specify a column in a datatable as read-only? #70262

    cliftonm
    Participant

    Never mind, I found the “editable” option. Ironic, as I even used that word to describe what I was looking for, but I was searching for things like “readonly”.

    February 9, 2015 at 2:01 pm in reply to: How is the ID supposed to work in a column with a DropDownList? How is the ID supposed to work in a column with a DropDownList? #66770

    cliftonm
    Participant

    That’s exactly the example I’ve been using. And in that example, you have:

    displayMember: 'productname', valueMember: 'productname',

    What I want is for the valueMember to be an ID and for it to set the dataField of the “text” field.

    I take it from your comment that this doesn’t happen automatically, that I would have to implement this manually through, say, the select event of the dropdown list?

    February 5, 2015 at 8:56 pm in reply to: DropDown in DataTable is invisible DropDown in DataTable is invisible #66649

    cliftonm
    Participant

    Good to know. I’ll consider it even though I’m using jqWidgets on an open source project.

    February 5, 2015 at 12:55 pm in reply to: DropDown in DataTable is invisible DropDown in DataTable is invisible #66623

    cliftonm
    Participant

    Wow, do I feel like an idiot. I even changed that from “colummntype” to “colummnType” at one point and didn’t notice the typo! Thanks!

    You wouldn’t by any chance have a debug version that detects these problems (it’s not the first time I’ve encountered a silent “doesn’t work” as the result of a typo) ?

    February 5, 2015 at 12:23 am in reply to: DropDown in DataTable is invisible DropDown in DataTable is invisible #66549

    cliftonm
    Participant

    I’ve created a single page test, no AJAX, etc., that follows the example on the demo page almost exactly, except of course the data is different and the column names are different. As you can see, there’s no dropdownlist! Here’s the page:

    <!DOCTYPE html>
    <html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>Test</title>
    <link type=”text/css” rel=”stylesheet” href=”/Scripts/jqwidgets/styles/jqx.base.css” />

    <script type=”text/javascript” src=”/Scripts/jquery-1.11.2.min.js”></script>

    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxdatatable.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”/Scripts/jqwidgets/jqxslider.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {

    var data = [
    { Id: 4, Abbr: ‘lbs’, Name: ‘pounds’, UnitCost: 5 },
    { Id: 5, Abbr: ‘each’, Name: ‘Each’, UnitCost: 6 },
    { Id: 6, Abbr: ‘ft’, Name: ‘Feet’, UnitCost: 7 },
    { Id: 12, Abbr: ‘in’, Name: ‘Inches’, UnitCost: 8 },
    ];

    var source =
    {
    localData: data,
    dataType: “array”,
    updateRow: function (rowId, rowData, commit) {commit(true);},
    dataFields:
    [
    { name: ‘Id’, type: ‘number’ },
    { name: ‘Abbr’, type: ‘string’ },
    { name: ‘Name’, type: ‘string’ },
    { name: ‘UnitCost’, type: ‘number’ },
    ]
    };

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

    var getEditorDataAdapter = function (datafield) {
    var source =
    {
    localData: data,
    dataType: “array”,
    dataFields:
    [
    { name: ‘Id’, type: ‘number’ },
    { name: ‘Abbr’, type: ‘string’ },
    { name: ‘Name’, type: ‘string’ },
    { name: ‘UnitCost’, type: ‘number’ },
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { uniqueDataFields: [datafield] });
    return dataAdapter;
    };

    $(‘#materialTable’).jqxDataTable(
    {
    width: 850,
    source: dataAdapter,
    pageable: true,
    pagerButtonsCount: 10,
    editable: true,
    autoRowHeight: false,
    columns: [
    {
    text: ‘Unit’, colummnType: ‘template’, dataField: ‘Name’, width: ‘20%’,
    createEditor: function (row, cellvalue, editor, cellText, width, height) {
    editor.jqxDropDownList({
    source: getEditorDataAdapter(‘Name’),
    displayMember: ‘Name’,
    valueMember: ‘Name’,
    width: width,
    height: height
    });
    },
    initEditor: function (row, cellvalue, editor, celltext, width, height) {
    editor.jqxDropDownList({ width: width, height: height });
    editor.val(cellvalue);
    },
    getEditorValue: function (row, cellvalue, editor) {
    return editor.val();
    }
    },
    { text: ‘Cost’, dataField: ‘UnitCost’, width: ‘20%’ }
    ]
    });

    $(“#units”).jqxDropDownList({
    source: getEditorDataAdapter(‘Id’),
    displayMember: “Name”, valueMember: “Id”, width: “200px”, height: “25px”
    });

    });

    </script>
    </head>
    <body>
    <div>
    <h1>Materials</h1>
    </div>
    <div id=”materialTable”></div>
    <div id=”units”></div>
    </body>
    </html>

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