jQuery UI Widgets Forums Grid Keyboard Naviation and Unbound Data with boolean column and checkbox

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

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

  • rcm01
    Participant

    I have a page where I want to combine both Text Boxes and a grid for user input. I’d like the user to tab through the text fields and into the grid.

    Question 1. When tabbing from “Text 2” you land on the grid and a pressing tab key again sets the focus to the first check box. Here you can press the space bar and set a check. However, this value has not been set on the data source. If you press tab again, you go to the next check box vs. going to the next column on the row. None of the grid key navigation seems to be in affect. Further, if you click on “Column 1” and enter text that initial check box clears.

    Is there a way grab the event when tabbing from “Text 2” set the focus to the Grid and put the user in edit mode on check box in row0?

    Question 2. enter text in “Text 2” and click on check box in row0, you get a check box but all the other check boxes appear to be in a “null” state (neither checked or unchecked like a black box).

    If my assumption concerning the state is correct, is there a way to set the default state of the check box to either checked or unchecked?

    @{
    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: 'Column0', type: 'bool' },
    { 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 0", datafield: "Column0",columntype: "checkbox"}
    , { 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, autoOpen: 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>
    text 1: <input id="text1" type="text" />
    text 2: <input id="text2" type="text" />
    </div>
    <div style="float: left;" id="jqxgrid"></div>
    </div>
    </body>

    Peter Stoev
    Keymaster

    Hi rcm01,

    1. jqxGrid does not update your data source, it updates the data loaded in the Grid. It calls an “updaterow” callback function of its source object in case it is defined and that is the point where you should synchronize the update row with your data source.
    2. Checkbox column works with bound data and should be used with bound Grid. It is normal the Checkbox to display null, because your cell’s bound value is null, too.
    3. The Tab key moves the Grid selection from left to right to the right-most column. Shift-Tab moves the Grid selection from right to left to the first column.

    Best Regards,
    Peter Stoev

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


    rcm01
    Participant

    Thanks Peter. I think my question 1 was more related to what I think is a possible bug. I misspoke when I said Data Source ,I meant the data loaded in the grid. The above somewhat follows the spreadsheet demo using unbound data structure and with the exception of the check box and the drop down.

    If you test the above code, you cannot successfully enter the Grid in Edit Mode using the tab key to move from field “Text 2”. If you enter the Grid with a mouse click then the tab key works correctly as you described. So my question is really about whether it’s possible to tab into Grid and get the correct Edit behavior.

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

You must be logged in to reply to this topic.