[GregoryHouseMDParticipant]

I installed the framework from npm, I changed the noImplicityAny setting to false, imported jqx-all and I got it to work. What imports am I missing, because I don’t want to include a 3mb script (I’m only using the combo box)?

[GregoryHouseMDParticipant]

Hi Dimitar,

The idea is not to add a 3 MB script to the site when I’m only using some 300KB, and also not to clutter the solution with +300 files, when I’m using around ten.

Regards,
House

[GregoryHouseMDParticipant]

Hi Peter,

Because I’m calling my web API to populate the ComboBox, I thought that by refreshing the source property, a new call to the API would be made to repopulate the ComboBox. Since that worked before, I thought that there was a bug, but turns out I was exploiting a loophole

Thanks for the clarification.

Regards,
House M.D.

[GregoryHouseMDParticipant]

Found a solution. The framework pretty much does all the work because the width of the list elements in hardcoded, so something like this does the trick:

$scope.cb.settings = {
           // other setup
            bindingComplete: function(event) {
               $scope.cb.settings.dropDownWidth = $("#innerListBox" + event.owner.id + " div[role=option] span")[0].style["width"];
               $scope.cb.settings.refresh(["dropDownWidth"]);
            }
        };

That width is without the width of the scroll bar, I’ll look into that one next, but for now it is a pretty neat solution.

[GregoryHouseMDParticipant]

$scope.articleComboBox = {
            settings: {},
            dataAdapter: "",
            create: false
        };
        $scope.articleComboBox.dataAdapter = new $.jqx.dataAdapter({
            datatype: "json",
            datafields: [
                { name: "id", type: "string" },
                { name: "text", type: "string" },
            ],
            url: "/MainApi/Article/GetArticles/" + invoiceId
        });
        $scope.articleComboBox.settings = {
            height: 30,
            width: "100%",
            source: $scope.articleComboBox.dataAdapter,
            displayMember: "text",
            showArrow: true,
            selectedIndex: -1,
            valueMember: "id",
            autoComplete: true,
            enableBrowserBoundsDetection: true,
            searchMode: "containsignorecase",
            minLength: 0,
            theme: "bootstrap",
            change: function(event) {
                $scope.selectedArticle = event.args.item.originalItem;
            },
            bindingComplete: function() {
                if ($scope.newArticleId != undefined) {
                    var selectedItem = $scope.artiklComboBox.settings.apply("getItemByValue", $scope.newArticleId);
                    $scope.articleComboBox.settings.apply("selectItem", selectedItem);
                    $scope.newArticle = undefined;
                }
            }
        };

       $scope.NewArticle = function() {
            var newArticle = $uibModal.open({
                animation: true,
                templateUrl: "/App/Warehouse/Articles/modalTemplate.html",
                controller: "NewArticleController"
            });
            newArticle.result.then(function() {
                $scope.newArticleId = newArticle.newArticleId;;
                $scope.articleComboBox.settings.refresh(["source"]);
            });
        };

This is the whole code that worked with 4.0, where the source is refreshed and the newly added item appears in the list, but with 4.1 it doesn’t.

[GregoryHouseMDParticipant]

Hello Dimitar,

The combobox I’m using has autocomplete set to true. Can I catch an event that is fired when the search is completed and set the dropdown width to the value of the width of widest list item?

Regards

[GregoryHouseMDParticipant]

This is the javascript I’m using, a bit striped down, caust it has a lot of stuff going on: jsEditor

[GregoryHouseMDParticipant]

So in case anyone wants to mimic the selected event, this is how I implemented it:

var $jqComboBox = $("#jqComboBox");
 $jqComboBox.on('bindingComplete', function (event) {
                    var $jqComboListBox = $("#" + $jqComboBox.attr("aria-owns"));
                    $jqComboListBox.mouseup(function (e) {
                        handlerFunction();
                    });
                });
 $jqkonto.keyup(function(event) {
                    if (event.keyCode === 13) {
                        handlerFunction();
                    }
                });
function handlerFunction() {
    // your code here
}

This way the selected event is triggered either when the user selects the item by hittng enter, or on mouseup on one of the items. I hope this helps.

[GregoryHouseMDParticipant]

Sorry, I didn’t quite explained it correctly. This is what is generated:

<div id="listBoxContentinnerListBoxjqxWidgetaef5395b" style="-webkit-appearance: none; outline: none; border: none; padding: 0px; overflow: hidden; margin: 0px; left: 0px; top: 0px; position: absolute; width: 475px; height: 171px; background: transparent;">
    <div style="outline: none 0px; overflow: hidden; width: 1006px; position: relative; height: 384px;">
        <div role="option" id="listitem0innerListBoxjqxWidgetaef5395b" class="jqx-listitem-element" style="height: 24px; top: 0px; left: 0px;">

            List Box items go here

        </div>
    </div>
</div>

As you said, the dropdown is as wide as the combo box, but the items overflow to the right and you’d have to scroll to the right to read them all. I want the list box items text to wrap so the users won’t have to scroll.

[GregoryHouseMDParticipant]

Yuri Anschau, how did you make it work?

I am using remoteAutoComplete and I also want to catch the event when the the user makes the final choice, because I’m making a few API calls after the selection, and if the user scrolls down to the 4th item, that are 3 useless API calls that I don’t want. Maybe implementing a ‘selected’ event sometime in the future would be awesome.

[GregoryHouseMDParticipant]

I worked it out. The dataAdapter has to have this:

 var dataAdapter = new $.jqx.dataAdapter(source, {
                formatData: function(data) {
                    if ($("#Codes").jqxComboBox('searchString') != undefined) {
                        data.code= $("#Codes").jqxComboBox('searchString');
                        return data;
                    }
                }
            });

and now the data.code parameter will bind to the code parameter in the action declaration:
public async Task<JsonResult> GetCodes(string code)

This should go in a Web API documentation somewhere

[Author]

Posts