jQWidgets Forums

jQuery UI Widgets Forums Grid jqxGrid’s dropdownlist column behvaior

This topic contains 2 replies, has 1 voice, and was last updated by  rcm01 12 years, 2 months ago.

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

  • rcm01
    Participant

    In the jqxGrid demo for customized editors there is one behavior and one styling that I am unable to replicate,

    1. For behavior, when you tab or use arrows to navigate to the second column then press the “enter” key or any alpha/numeric key the dropdownlist widget is activated. Pressing the first letter of an item in the list will change it dropdownlist to that value in the demo but not in mine.

    2. For appearance, when clicking on the dropdowlist, the list is flush with the widget in the demo but there is a small gap in mine.

    What would I need to change to duplicate the above in my code?

     


    rcm01
    Participant

    Here’s the code

    @{
    ViewBag.Title = "Index";
    }
    @section scripts {
    <script type="text/javascript" src="~/scripts/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.metro.css" />
    <script type="text/javascript">
    $(document).ready(function () {
    //debugger;
    var myDropDownData = {};
    myDropDownData[0] = { ddID: 1, ddName: "A1" };
    myDropDownData[1] = { ddID: 2, ddName: "B1" };
    myDropDownData[2] = { ddID: 3, ddName: "C1" };
    var blankSource =
    {
    unboundmode: true,
    totalrecords: 15,
    datafields: [
    { name: 'Column1', type: 'string' },
    { name: 'Column2', type: 'string' }
    ]
    }
    var dataAdapter = new $.jqx.dataAdapter(blankSource);
    $("#jqxgrid").jqxGrid(
    {
    width: 920,
    source: dataAdapter,
    theme: "metro",
    selectionmode: 'singlecell',
    editable: true,
    autoheight: true,
    columnsresize: true,
    columns: [
    { text: "Column 1", datafield: "Column1" }
    , {
    text: "Column 2"
    , width: 100
    , datafield: "Column2"
    , columntype: 'dropdownlist'
    , createeditor: function (row, column, editor) {
    // assign a new data source to the dropdownlist.
    //editor.jqxDropDownList({ source: myDropDownData, displayMember: "ddName", valueMember: "ddID" });
    var list = ['a1', 'b2', 'b3'];
    editor.jqxDropDownList({ source: list, autOpen: true });
    }
    , cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    if (newvalue == "") return oldvalue;
    }
    }
    ]
    });
    });
    </script>
    }
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div style="float: left;" id="jqxgrid"></div>
    </div>
    </body>

    rcm01
    Participant

    One more note concerning this. I did correct the column setting from autOpen to autoOpen. When this is set correctly, the gap I mentioned above prevents you from selecting a value with a mouse click since focus is lost.

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

You must be logged in to reply to this topic.