|
1 | 1 | (function() { |
2 | 2 | var MultiSelect = kendo.ui.MultiSelect, |
3 | 3 | keys = kendo.keys, |
4 | | - select; |
| 4 | + select, |
| 5 | + CONTAINER_HEIGHT = 200;; |
5 | 6 |
|
6 | 7 | function populateSelect(length) { |
7 | 8 | var options = []; |
|
543 | 544 | }); |
544 | 545 | }); |
545 | 546 |
|
| 547 | +describe("kendo.ui.MultiSelect navigation in virtual scenario", function () { |
| 548 | + function generateData(parameters) { |
| 549 | + var items = []; |
| 550 | + for (var i = parameters.skip, len = parameters.skip + parameters.take; i < len; i++) { |
| 551 | + items.push({ |
| 552 | + id: i, |
| 553 | + value: i, |
| 554 | + text: "Item " + i |
| 555 | + }); |
| 556 | + } |
| 557 | + |
| 558 | + return items; |
| 559 | + } |
| 560 | + |
| 561 | + function createAsyncDataSource(options) { |
| 562 | + options = options || {}; |
| 563 | + var transport = { |
| 564 | + read: function(options) { |
| 565 | + setTimeout(function() { |
| 566 | + options.success({ data: generateData(options.data), total: 300 }); |
| 567 | + }, 0); |
| 568 | + } |
| 569 | + }; |
| 570 | + |
| 571 | + return new kendo.data.DataSource({ |
| 572 | + transport: options.transport || transport, |
| 573 | + serverPaging: true, |
| 574 | + serverFiltering: true, |
| 575 | + pageSize: 40, |
| 576 | + schema: { |
| 577 | + data: "data", |
| 578 | + total: "total" |
| 579 | + } |
| 580 | + }); |
| 581 | + } |
| 582 | + |
| 583 | + beforeEach(function() { |
| 584 | + kendo.ns = ""; |
| 585 | + select = $("<select multiple />").appendTo(Mocha.fixture); |
| 586 | + }); |
| 587 | + afterEach(function() { |
| 588 | + if (select.data("kendoMultiSelect")) { |
| 589 | + select.data("kendoMultiSelect").destroy(); |
| 590 | + } |
| 591 | + |
| 592 | + select.parents(".k-widget").remove(); |
| 593 | + }); |
| 594 | + |
| 595 | + it("MultiSelect selects all on CTRL+A", function(done) { |
| 596 | + var multiselect = new MultiSelect(select, { |
| 597 | + height: CONTAINER_HEIGHT, |
| 598 | + animation: false, |
| 599 | + dataTextField: "text", |
| 600 | + dataValueField: "value", |
| 601 | + dataSource: createAsyncDataSource(), |
| 602 | + virtual: { |
| 603 | + valueMapper: function(o) { o.success(o.value); }, |
| 604 | + itemHeight: 40 |
| 605 | + } |
| 606 | + }); |
| 607 | + |
| 608 | + multiselect.one("dataBound", function() { |
| 609 | + multiselect.open(); |
| 610 | + |
| 611 | + multiselect.input.trigger({ |
| 612 | + type: "keydown", |
| 613 | + keyCode: 65, |
| 614 | + ctrlKey: true |
| 615 | + }); |
| 616 | + |
| 617 | + assert.equal(multiselect.tagList.children().length, 0); |
| 618 | + done(); |
| 619 | + }); |
| 620 | + }); |
| 621 | + |
| 622 | + it("MultiSelect selects multiple items on SHIFT+DOWN", function (done) { |
| 623 | + var multiselect = new MultiSelect(select, { |
| 624 | + height: CONTAINER_HEIGHT, |
| 625 | + animation: false, |
| 626 | + dataTextField: "text", |
| 627 | + dataValueField: "value", |
| 628 | + dataSource: createAsyncDataSource(), |
| 629 | + virtual: { |
| 630 | + valueMapper: function(o) { o.success(o.value); }, |
| 631 | + itemHeight: 40 |
| 632 | + } |
| 633 | + }); |
| 634 | + |
| 635 | + multiselect.one("dataBound", function() { |
| 636 | + multiselect.open(); |
| 637 | + |
| 638 | + multiselect.input.trigger({ |
| 639 | + type: "keydown", |
| 640 | + keyCode: keys.DOWN |
| 641 | + }); |
| 642 | + |
| 643 | + multiselect.input.trigger({ |
| 644 | + type: "keydown", |
| 645 | + keyCode: keys.DOWN, |
| 646 | + shiftKey: true |
| 647 | + }); |
| 648 | + |
| 649 | + multiselect.input.trigger({ |
| 650 | + type: "keydown", |
| 651 | + keyCode: keys.DOWN, |
| 652 | + shiftKey: true |
| 653 | + }); |
| 654 | + |
| 655 | + assert.equal(multiselect.tagList.children().length, 0); |
| 656 | + done(); |
| 657 | + }); |
| 658 | + }); |
| 659 | + |
| 660 | + it("MultiSelect selects multiple items on SHIFT+UP", function (done) { |
| 661 | + var multiselect = new MultiSelect(select, { |
| 662 | + height: CONTAINER_HEIGHT, |
| 663 | + animation: false, |
| 664 | + dataTextField: "text", |
| 665 | + dataValueField: "value", |
| 666 | + dataSource: createAsyncDataSource(), |
| 667 | + virtual: { |
| 668 | + valueMapper: function(o) { o.success(o.value); }, |
| 669 | + itemHeight: 40 |
| 670 | + } |
| 671 | + }); |
| 672 | + |
| 673 | + multiselect.one("dataBound", function() { |
| 674 | + multiselect.open(); |
| 675 | + |
| 676 | + multiselect.input.trigger({ |
| 677 | + type: "keydown", |
| 678 | + keyCode: keys.DOWN |
| 679 | + }); |
| 680 | + multiselect.input.trigger({ |
| 681 | + type: "keydown", |
| 682 | + keyCode: keys.DOWN |
| 683 | + }); |
| 684 | + |
| 685 | + multiselect.input.trigger({ |
| 686 | + type: "keydown", |
| 687 | + keyCode: keys.UP, |
| 688 | + shiftKey: true |
| 689 | + }); |
| 690 | + |
| 691 | + multiselect.input.trigger({ |
| 692 | + type: "keydown", |
| 693 | + keyCode: keys.UP, |
| 694 | + shiftKey: true |
| 695 | + }); |
| 696 | + |
| 697 | + assert.equal(multiselect.tagList.children().length, 0); |
| 698 | + done(); |
| 699 | + }); |
| 700 | + }); |
| 701 | + |
| 702 | + it("MultiSelect selects multiple items on CTRL+SHIFT+END", function (done) { |
| 703 | + var multiselect = new MultiSelect(select, { |
| 704 | + height: CONTAINER_HEIGHT, |
| 705 | + animation: false, |
| 706 | + dataTextField: "text", |
| 707 | + dataValueField: "value", |
| 708 | + dataSource: createAsyncDataSource(), |
| 709 | + virtual: { |
| 710 | + valueMapper: function(o) { o.success(o.value); }, |
| 711 | + itemHeight: 40 |
| 712 | + } |
| 713 | + }); |
| 714 | + |
| 715 | + multiselect.one("dataBound", function() { |
| 716 | + multiselect.open(); |
| 717 | + |
| 718 | + multiselect.input.trigger({ |
| 719 | + type: "keydown", |
| 720 | + keyCode: keys.DOWN |
| 721 | + }); |
| 722 | + |
| 723 | + multiselect.input.trigger({ |
| 724 | + type: "keydown", |
| 725 | + keyCode: keys.END, |
| 726 | + ctrlKey: true, |
| 727 | + shiftKey: true |
| 728 | + }); |
| 729 | + |
| 730 | + assert.equal(multiselect.tagList.children().length, 0); |
| 731 | + done(); |
| 732 | + }); |
| 733 | + }); |
| 734 | + |
| 735 | + it("MultiSelect selects multiple items on CTRL+SHIFT+HOME", function (done) { |
| 736 | + var multiselect = new MultiSelect(select, { |
| 737 | + height: CONTAINER_HEIGHT, |
| 738 | + animation: false, |
| 739 | + dataTextField: "text", |
| 740 | + dataValueField: "value", |
| 741 | + dataSource: createAsyncDataSource(), |
| 742 | + virtual: { |
| 743 | + valueMapper: function(o) { o.success(o.value); }, |
| 744 | + itemHeight: 40 |
| 745 | + } |
| 746 | + }); |
| 747 | + |
| 748 | + multiselect.one("dataBound", function() { |
| 749 | + multiselect.open(); |
| 750 | + |
| 751 | + multiselect.input.trigger({ |
| 752 | + type: "keydown", |
| 753 | + keyCode: keys.DOWN |
| 754 | + }); |
| 755 | + multiselect.input.trigger({ |
| 756 | + type: "keydown", |
| 757 | + keyCode: keys.DOWN |
| 758 | + }); |
| 759 | + multiselect.input.trigger({ |
| 760 | + type: "keydown", |
| 761 | + keyCode: keys.DOWN |
| 762 | + }); |
| 763 | + |
| 764 | + multiselect.input.trigger({ |
| 765 | + type: "keydown", |
| 766 | + keyCode: keys.HOME, |
| 767 | + ctrlKey: true, |
| 768 | + shiftKey: true |
| 769 | + }); |
| 770 | + |
| 771 | + assert.equal(multiselect.tagList.children().length, 0); |
| 772 | + done(); |
| 773 | + }); |
| 774 | + }); |
| 775 | +}); |
| 776 | + |
546 | 777 | describe("kendo.ui.MultiSelect tag navigation", function () { |
547 | 778 | beforeEach(function() { |
548 | 779 | select = $("<select multiple=multiple/>").appendTo(document.body); |
|
0 commit comments