jQuery UI Widgets Forums Grid Dropdown Column in Grid

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Dropdown Column in Grid #48220

    priyam.basu
    Participant

    Hi,

    So I am trying to make one of the columns in the grid act like a dropdown. I’m getting the data for the dropdown in json format. But the data doesnt seem to be binding. The dropdown is blank.

    $(“#TableDefinitionGrid”).jqxGrid(
    {
    source: dataAdapter,
    columnsresize: true,
    theme: ‘energyblue’,
    sortable: true,
    //pageable: true,
    autoheight: true,
    columnsresize: true,
    editable: true,
    width: 650,
    editmode: ‘singlerow’,

    columns: [
    { text: ‘TableFieldDefinitionID’, datafield: ‘TableFieldDefinitionID’, hidden: true },
    { text: ‘Display Name’, datafield: ‘DisplayName’, width: ‘210’ },
    { text: ‘Internal Name’, datafield: ‘InternalName’, width: ‘210’ },
    // { text: ‘Description’, datafield: ‘Description’, width: ‘230’ },
    {
    text: ‘Data Type’, datafield: ‘DataType’, width: 230, columntype: ‘dropdownlist’,
    createeditor: function (row, column, editor) {
    //var dataSource1 = [‘Cappuccino’, ‘Caramel Latte’, ‘Caffe Espresso’];
    //editor.jqxDropDownList({ source: dataSource1 });

    var ListUrl = ‘/’ + portal() + ‘/Services/TableFieldDefinition.aspx/ListDataTypes’;
    $.ajax({
    async: false,
    contentType: “application/json; charset=utf-8”,
    type: “POST”,
    url: ListUrl,
    success: function (data) {
    var dataSource1 =
    {
    datatype: “json”,
    datafields: [
    { name: ‘DisplayName’ },
    { name: ‘DataTypeID’ }
    ],
    id: ‘DataTypeID’,
    localdata: data.d
    };
    dataAdapterDataTypes = new $.jqx.dataAdapter(dataSource1);
    editor.jqxDropDownList({ source: dataSource1, autOpen: true });

    }
    });

    },
    // 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;
    },
    geteditorvalue: function (row, cellvalue, editor) {
    // return the editor’s value.
    var selectedIndex = editor.jqxDropDownList(‘getSelectedIndex’);
    alert(selectedIndex);
    return editor.find(‘input’).val();
    }
    }

    ]
    });

    Thanks!

    Dropdown Column in Grid #48228

    Peter Stoev
    Keymaster

    Hi priyam.basu,

    The DropDownList’s source property should point to the dataAdapter instance, not to the dataSource1 object.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.