locked
Cannot save data when using custom control flipswitch in lightswitch RRS feed

  • Question

  • Hi All,

    I am using flipswitch custom control in lightswitch. Initially I used this code :

    function createBooleanSwitch(element, contentItem, trueText, falseText, optionalWidth) {
        var $defaultWidth = '5.4em';
        var $defaultFalseText = 'False';
        var $defaultTrueText = 'False';
        var $selectElement = $('<select data-role="slider"></select>').appendTo($(element));

        if (falseText != null) {
            $('<option value="false">' + falseText + '</option>').appendTo($selectElement);
        }
        else {
            $('<option value="false">' + $defaultFalseText + '</option>').appendTo($selectElement);
        }

        if (trueText != null) {
            $('<option value="true">' + trueText + '</option>').appendTo($selectElement);
        }
        else {
            $('<option value="true">' + $defaultTrueText + '</option>').appendTo($selectElement);
        }


        // Now, after jQueryMobile has had a chance to process the 
        //     new DOM addition, perform our own post-processing:
        $(element).one('slideinit', function () {
            var $flipSwitch = $('select', $(element));

            // Set the initial value (using helper function below):
            setFlipSwitchValue(contentItem.value);

            // If the content item changes (perhaps due to another control being
            //     bound to the same content item, or if a change occurs programmatically), 
            //     update the visual representation of the control:
            contentItem.dataBind('value', setFlipSwitchValue);

            // Conversely, whenver the user adjusts the flip-switch visually,
            //     update the underlying content item:
            $flipSwitch.change(function () {
                contentItem.value = ($flipSwitch.val() === 'true');
            });

            // To set the width of the slider to something different than the default,
            //    need to adjust the *generated* div that gets created right next to
            //    the original select element.  DOM Explorer (F12 tools) is a big help here.
            if (optionalWidth != null) {
                $('.ui-slider-switch', $(element)).css('width', optionalWidth);
            }
            else {
                $('.ui-slider-switch', $(element)).css('width', defaultWidth);
            }

            //===============================================================//

            // Helper function to set the value of the flip-switch
            //     (used both during initialization, and for data-binding)
            function setFlipSwitchValue(value) {
                $flipSwitch.val((value) ? 'true' : 'false');

                // Having updated the DOM value, refresh the visual representation as well
                //  (required for a slider control, as per jQueryMobile's documentation)
                $flipSwitch.slider(); // Initializes the slider

                $flipSwitch.slider('refresh');

                // Because the flip switch has no concept of a "null" value
                //    (or anything other than true/false), ensure that the 
                //    contentItem's value is in sync with the visual representation
                contentItem.value = ($flipSwitch.val() === 'true');
            }
        });
    }

    The problem with this code was that when I was trying to close the popup(by clicking the close button) in which this flipswitch is rendered, was going on an infinite loop inside the function setFlipSwitchValue(value){} . Hence the browser was hanging and showing error that localhost is not responding.

    Then I tried this piece of code:

    function createBooleanSwitch(element, contentItem) {
        var $flipSwitch = $('<select data-role="slider"></select>').appendTo($(element));
        $('<option value="0">No</option>').appendTo($flipSwitch);
        $('<option value="1">Yes</option>').appendTo($flipSwitch);

        // set select value to match the original contentItem.value
        $flipSwitch.val((contentItem.value) ? "1" : "0");

        // add listener to update contentItem's value if slider changes
        $flipSwitch.change(function () {
            contentItem.value = ($flipSwitch.val() == "1");
        });

        // visually refresh the slider.
        $flipSwitch.slider().slider("refresh");
    };

    This code actually solved my problem which I was facing with the above code. Like I was now able to close the popup nicely. But with this piece of code I am not able to save any data. When I tried to edit the flipswitch data and save the data, it shows me error in dailouge box saying that "Save operation failed", having message Object of type 'System.Boolean' cannot be converted to type 'System.Byte'.

    I would really be grateful if somebody could help me out here. Please



    Wednesday, March 16, 2016 5:32 AM

All replies

  • What happens if you change the zeros and ones in the second function to 'true' and 'false'?
    You said the first function had an infinite loop, but the second function has a problem with data type conversion.  The 'true' and 'false' that were in the first function weren't the cause of the infinite loop (right?).
    • Edited by Hessc Wednesday, March 16, 2016 4:19 PM
    Wednesday, March 16, 2016 4:16 PM
  • Hi,

    Thanks for your reply. But true or false and 1 or 0 doesnt matter. Because I tried it both ways. With 1 and 0 and also with true and false values.

    The function is still going in an infinite loop for the first piece of code. And for the second piece of code its still showing the error on saving.

    Friday, March 18, 2016 5:40 AM