jQuery UI Widgets Forums Grid Dropdown list in In line editing Grid: showing pre defined set of values

This topic contains 4 replies, has 2 voices, and was last updated by  mail2harisha 11 years, 11 months ago.

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

  • mail2harisha
    Member

    Hi All,

    I am using a inline editing grid. It has few drop down list columns.

    Example: Column Name: Nominal
    Pre defined values: Actual, Optional

    After getting records from server in json value pair. I am displaying all records in grid. Now when user tries to edit a record for dropdown column, it only shows list of values available in all records instead of showing all pre defined values.

    Example:
    Data from server:
    row 1: {“id”=1, “nominal”=”Actual”}
    row 2: {“id”=2, “nominal”=”Actual”}

    Then when I try to edit row 2’s nominal column, it shows list of one value i.e., “Actual”.

    Our business requirement is to show list of pre defined values for user to select i.e., “Actual”, “Optional”.

    How to do this?

    Code:

    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    editable: true,
    theme: theme,
    selectionmode: 'singlecell',
    columns: [
    { text: 'Id', columntype: 'textbox', datafield: 'id', width: 90 },
    { text: 'Nominal', columntype: 'dropdownlist', datafield: 'nominal', width: 177},
    ]
    });

    Peter Stoev
    Keymaster

    Hi mail2harisha,

    To set a custom List as a data source of the DropDownList editor, you can do the following:

                      { text: 'Nominal', columntype: 'dropdownlist', datafield: 'nominal',
    createeditor: function (row, cellvalue, editor) {
    editor.jqxDropDownList({ source: ["Available", "Option"] });
    }
    },

    The ‘createeditor’ callback is added in jQWidgets 2.1. If you are using a previous version of jQWidgets, you will need to upgrade to use the logic above.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mail2harisha
    Member

    Thanks its working.

    Please note: I have a suggestion. The Documentation regarding API is very little and and there is no working example for each method or properties. Kindly add more explanations:

    Example: For jqxgrid, columns behavior, there is property called editable which says it will make a particular column either editable or non editable. As per documentation:
    editable – enables or disables the cells editing

    but what value I have to provide either “enable” or “disable” or “true” or ” false” is not mentioned. I had with below but eblotter_ref and status field are still editable. Kindly answer my question.

    $("#jqxgrid").jqxGrid(
    {
    width : 1200,
    source : dataAdapter,
    editable : true,
    //theme: 'energyblue',
    selectionmode : 'singlecell',
    sortable : true,
    altrows : true,
    columns : [
    { text : 'eBlotter Ref', datafield : 'eblotter_ref', width : 100, cellsrenderer : colorrenderer, editable : 'disable' },
    { text : 'B/S/U/A', datafield : 'buy', width : 100, cellsrenderer : colorrenderer},
    {text : 'Nominal', columntype: 'dropdownlist', datafield : 'nominal',width : 100,cellsrenderer : colorrenderer,
    initeditor: function (row, cellvalue, editor) {
    editor.jqxDropDownList({ source: nominalDropdownListSource});
    }
    },
    {text : 'Status',datafield : 'status',width : 100,cellsrenderer : colorrenderer, editable : 'disable' },
    • This reply was modified 11 years, 11 months ago by  mail2harisha.

    Peter Stoev
    Keymaster

    Thanks for the feedback.

    There’s a help topic about Cells Editing in our Help Documentation here: jquery-grid-cells-editing.htm and here’s what it says about disabling of editing for a column: “To disable the editing of a specific grid column, you can set the column’s editable property to false”
    However, we’ll keep improving the help docs with every new version.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mail2harisha
    Member

    Thanks for your quick reply.

    Making column non editable is working. As you mentioned it should be false

    columns : [
    { text : 'eBlotter Ref', datafield : 'eblotter_ref', width : 100, cellsrenderer : colorrenderer, editable : false },

    For the documentation part,
    It would be great if the documentation is more explanatory like Java Docs.

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

You must be logged in to reply to this topic.