How to handle 2 possible tab index values for a set of controls?

Question

I'm using Telerik's Kendo UI. On my form, I have 6 textboxes, A, B, C, D, E, and F.

If the value of A is X,Y, or Z, then B-E need to be made read only, and we want to automatically tab over to textbox F.

If the value of A changes, then we need to remove the read only state for B-E, and make it so that tabbing goes in the original order.

I actually have this working for both Firefox and Chrome, but Internet Explorer does not work correctly. Tabbing jumps from these textboxes to a completely separate set of controls unrelated to this.

So how do I maintain 2 possible tab values (-1 or X, where X is the 'default' value a control would be created with) so that I can dynamically tab between controls depending on read only states?

Note that I cannot rely on disabling a control (instead of making it read only) because this causes issues; even if the control has a value, the value does not get transmitted to the server resulting in a null for that property. (see this SO post)

This is the code:

//This function will toggle the ReadOnly state of a control array
//   based on the parent control's value
function SetReadOnly(controlArray, parentComboId)
{
    var parentVal = $("#" + parentComboId).val();
    var tabIndex = 1;

    if (parentComboId == "A")
    {
        var regex = /07|09|10|88/;

        if (regex.test(parentVal) || parentVal == "" || parentVal == "-")
        {
            isReadOnly = true;
            tabIndex = -1;
        }
        else
        {
            isReadOnly = false;
            tabIndex = 1;
        }

        for (var i = 0; i < controlArray.length; i++)
        {
            $("#" + controlArray[i]).prop("readonly", isReadOnly);
            SetTabIndexVals2(controlArray[i], 'TEXTBOX', tabIndex);
        }
    }
    else
    {
        // logic other groups of parent-child controls
    }
}

// This function sets the tab index of the control
function SetTabIndexVals(controlID, controltype, tabIndex)
{
    try
    {
        var _eTabIndex;
        if (tabIndex == -1)
        {
            if (controltype == 'TEXTBOX')
            {
                _eTabIndex = $("#" + controlID).attr('tabindex');
                if (_eTabIndex > 0)
                {
                    $("#" + controlID).attr('Oldtabindex', _eTabIndex);
                    $("#" + controlID).attr('tabindex', tabIndex);
                }
            }
            else
            {
                // logic for other types of controls
            }
        }
        else
        {
            if (controltype == 'TEXTBOX')
            {
                _eTabIndex = $("#" + controlID).attr('Oldtabindex');
                if (_eTabIndex == undefined || _eTabIndex < 0 || _eTabIndex == null)
                    _eTabIndex = $("#" + controlID).attr('tabindex');
                $("#" + controlID).attr('Oldtabindex', _eTabIndex);
                $("#" + controlID).attr('tabindex', _eTabIndex);
            }
            else
            {
                // logic for other types of controls
            }
        }
    } catch (err)
    {
        logError(err, arguments.callee.trace());
    }
}

This function works for drop downs, but not textboxes.

have you thought about using Kendo's MVVM framework to control this type of behaviour? This would probably simplify your solution some what. As for the read-only problem why not apply the k-state-disabled class to the controls to effectively put the controls into a `readonly` state without actually disabling the controls. — David Shorthose, May 29 '18 at 14:02
@DavidShorthose I'm not familiar with Kendo's MVVM, however this is a very large application and trying to add that in would probably be impossible. I'll look into the `k-state-disabled` route, though. We apparently do use that in other locations in the application, I just wasn't familiar with it. Although we actually do disable the controls in those locations where we use it, so I'll have to see how that effects the issue I noted in my uqestion. Thanks! — sab669, May 29 '18 at 14:05
the MVVM model is used on that page only as I use it in specific sections of a large application I have built. I guess the question is with the controls you have 1) If the control is disabled then surely you would expect the data to be blank/null when posted to the server. 2) rather than disabling items (if you need to retain their previous values) why not hide the "disabled" items on the screen? — David Shorthose, May 29 '18 at 14:10
@DavidShorthose We have a few different "states". When a record is "Locked" by a user, we use the Disabled state on everything -- but we don't clear out the controls. So if you open up a locked record, you'll still see data but you can't edit anything. Additionally, some fields might contain a 'calculated' value based on the values of other controls, and our users will often copy/paste this so in that case we would want to use Read Only rather than Disabled. There's lots of wonky "gotchya" situations. — sab669, May 29 '18 at 14:15
Why not then display the "read only" fields as labels and if they are editable present back the control that way they can still copy and paste content and then all you have to worry about is switching between a display only/edit approach? — David Shorthose, May 29 '18 at 14:18

How to handle 2 possible tab index values for a set of controls?

0 Answers0