New version - pagination and initial value

[Janusz]

Hi,

I update my kendo version , because it has pagined ComboBoxes (I have lot of data in them).
But I have problem when using it. I have problem with virtual.valueMapper - this function runs when I asking remote server for data which not exist in actual data.
I have data in format:
[ {id: 1, value: "text1"},
{id: 2, value: "text2"},
{id: 3, value: "text3"},
{id: 4, value: "text4"},
.... and so on]

So I have page with 20 items.

And I'm asking for element 125.  server return to valueMapper data in format:

var serverResult = [data: {id: 2, value: "text2"}]

and I'm calling :

options.success(serverResult.data);

And I'm getting:
Cannot read property 'id' of undefined

How I should call succes method ?

[Georgi Krustev]

Hello Janusz,

The idea of "valueMapper" is to get an index for each selected value, which is not in the current page. This means that you need to return the index for the passed value in the valueMapper callback. You can find more details about the expected result in the corresponding documentation.

In your case, you will need to ask your value mapper service to return index of the selected value, which I believe is 125 (the index) and return it to the success callback:

valueMapper: function(options) {
  var value = options.value;

  //get index of the value, which is 125 in this case

  //return the index to the success callback
  options.success(125);
}

Regards,
Georgi Krustev
Telerik

 

 

[Janusz]

@Georgi Krustev thank You.

I have another problem with pagined list:
I have seted pageSize to 20, but ComboBox have problem with draw list because when I open list I see somethink like on attached image

[Janusz]

Another question: is it work with datasource type JSON ?

[Georgi Krustev]

Hello Janusz,

The described styling issue is quite strange and in order to continue with our investigation, we will need a repro demo. Would it be possible to provide one or point us to a live demo that depicts the issue?

With regards to the second question, if the service and the application are in same domain, then you can use JSON. In our demos, widget uses JSONP, because it can be used from different domains.

Regards,
Georgi Krustev
Telerik

 

 

[Janusz]

I have problem with provide example. But I can give You DOM node for my list:

<div class="k-animation-container" style="width: 240px; height: 206px; margin-left: -2px; padding-left: 2px; padding-right: 2px; padding-bottom: 4px; overflow: hidden; display: none; position: absolute; top: 85.578125px; z-index: 10013; left: 140.078125px; box-sizing: content-box;">
   <div class="k-list-container k-popup k-group k-reset" id="customer-list" data-role="popup" style="display: none; font-size: 12px; font-family: sans-serif; font-stretch: normal; font-style: normal; font-weight: normal; line-height: normal; width: 234px; -webkit-transform: translateY(-206px); position: absolute;">
      <div class="k-virtual-wrap" role="listbox" style="
         /* overflow-y: visible; */
         ">
         <div class="k-virtual-header">
            <div class="k-group"></div>
         </div>
         <ul unselectable="on" class="k-list k-reset k-virtual-list" tabindex="-1" aria-hidden="true" id="customer_listbox" aria-live="polite" data-role="virtuallist" style="height: 200px;">
            <ul class="k-virtual-content k-list ng-scope">
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="41ca3e51-1ab9-408a-9e3c-1ade4d51b68d" data-offset-index="0" style="-webkit-transform: translateY(0px); transform: translateY(0px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">atest</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="96685bc6-548f-4974-bcb8-83dbb4f15560" data-offset-index="1" style="-webkit-transform: translateY(1px); transform: translateY(1px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Dardian Trans Dariusz Wójcik</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="6bb1e7de-d576-4f33-b14e-564c1abaf340" data-offset-index="2" style="-webkit-transform: translateY(2px); transform: translateY(2px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">dhare</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="8eb477b9-3f7d-4a00-958e-b156c51e516b" data-offset-index="3" style="-webkit-transform: translateY(3px); transform: translateY(3px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">EKOLIGHT</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="3552b3e7-654d-4b7c-9461-d23a16160796" data-offset-index="4" style="-webkit-transform: translateY(4px); transform: translateY(4px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">ELLITE DEVELOPMENT Sp.z o.o. Sp.K.</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item k-state-selected" role="option" data-uid="7762d97c-3202-49f3-9a55-5998cb525ecd" data-offset-index="5" style="-webkit-transform: translateY(5px); transform: translateY(5px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">F.H.U HER-GUM BARBARA HERCZYK</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="62f01a7f-ed1b-4fed-8292-2951fac2c3b2" data-offset-index="6" style="-webkit-transform: translateY(6px); transform: translateY(6px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">F.H.U HER-GUM BARBARA HERCZYK</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="a251a37d-9b34-4129-9fc7-236ec91a4477" data-offset-index="7" style="-webkit-transform: translateY(7px); transform: translateY(7px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">F.H.U. PIELECKI PIELECKI JANUSZ</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="7df0732e-abd0-4cea-b68f-b7641fbff596" data-offset-index="8" style="-webkit-transform: translateY(8px); transform: translateY(8px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">F.H.U. PIELECKI PIELECKI JANUSZ</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="5f935b50-2470-4b93-93ef-a261bcad8531" data-offset-index="9" style="-webkit-transform: translateY(9px); transform: translateY(9px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">F.H.U. PIELECKI PIELECKI JANUSZ</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="ff4ae143-0aea-4222-950b-bfce96d18c24" data-offset-index="10" style="-webkit-transform: translateY(10px); transform: translateY(10px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">F.H.U. PIELECKI PIELECKI JANUSZ</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="ab5de494-3219-4b56-b985-a732aa68792e" data-offset-index="11" style="-webkit-transform: translateY(11px); transform: translateY(11px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Firma Handlowo - Usługowa OGRODNIK Spółka jawna</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="f37f654d-bd14-48cc-90c9-e94c8f4e9023" data-offset-index="12" style="-webkit-transform: translateY(12px); transform: translateY(12px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Firma  przykładowa  systemu InsERT GT</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="208b1aec-d3a1-496f-b7bf-c328f490c6a8" data-offset-index="13" style="-webkit-transform: translateY(13px); transform: translateY(13px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Firma przykładowa systemu InsERT GT</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="35e258f6-12dd-4a5e-bb79-7c3f4c094c73" data-offset-index="14" style="-webkit-transform: translateY(14px); transform: translateY(14px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">FIRMA TESTOWA LK Drugi wiersz uhuhuhu</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="4a0d02de-a426-4387-a4e1-dcadba8060a6" data-offset-index="15" style="-webkit-transform: translateY(15px); transform: translateY(15px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">FIS</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="04bb4486-78ae-4ade-9673-3d859781109d" data-offset-index="16" style="-webkit-transform: translateY(16px); transform: translateY(16px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">FIS-SST Sp</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="905a2afd-6dc7-4d37-99cf-8c7243d5f9e6" data-offset-index="17" style="-webkit-transform: translateY(17px); transform: translateY(17px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">FIS-SST Sp. z o.o.208</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="244a2a6f-70e9-4774-bf03-2b7b43f2a3a2" data-offset-index="18" style="-webkit-transform: translateY(18px); transform: translateY(18px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">FLOCOM MARCIN KWIATKOWSKI</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="48f1cd8f-70a7-4d43-8abe-a02d4a7a70c9" data-offset-index="19" style="-webkit-transform: translateY(19px); transform: translateY(19px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">KIEDA INVESTMENTS SŁAWOMIR KIEDA</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="d090f93e-43c2-4b61-b242-11e298879035" data-offset-index="20" style="-webkit-transform: translateY(20px); transform: translateY(20px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">LELEK COMPANY Sp. z o.o.</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="49a67bc7-1482-4e4e-8af7-011eb35e6031" data-offset-index="21" style="-webkit-transform: translateY(21px); transform: translateY(21px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Leszek-Leszek</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="5f2cbc5c-cfbe-4c2e-bf62-a600ed7c96f4" data-offset-index="22" style="-webkit-transform: translateY(22px); transform: translateY(22px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">LEX-TRANS URSZULA MISIEJUK</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="14b7d84e-1354-4b10-a449-6f1330588e91" data-offset-index="23" style="-webkit-transform: translateY(23px); transform: translateY(23px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Markanda Spólka Akcyjna</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="5c4fbbf4-78a0-436f-ba1b-ca805d35484c" data-offset-index="24" style="-webkit-transform: translateY(24px); transform: translateY(24px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">MIKRO Sp. z o.o.</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="49f48fbd-7189-477e-8496-a19bfda95e04" data-offset-index="25" style="-webkit-transform: translateY(25px); transform: translateY(25px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;"> MOZAPHARM Sp. z o.o.</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="a1ce2785-d473-42de-bfc2-cb916a40cbd2" data-offset-index="26" style="-webkit-transform: translateY(26px); transform: translateY(26px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">NORDICA SA Spółka Komandytowa</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="3587c981-12a7-4e3d-bbda-53572f3f9aaf" data-offset-index="27" style="-webkit-transform: translateY(27px); transform: translateY(27px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Nowa Firma1</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="e3e61765-5528-4187-98ab-c6f955c7a5e2" data-offset-index="28" style="-webkit-transform: translateY(28px); transform: translateY(28px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">OLGA INVEST S.C. Joanna Bołtromiuk-Jerzyk, Paweł Jerzyk</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="ccb7f3d5-629b-498f-b955-6c3f9c6db434" data-offset-index="29" style="-webkit-transform: translateY(29px); transform: translateY(29px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">OPERATOR Spółka z ograniczoną odpowiedzialnością</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item k-state-selected k-state-focused" role="option" data-uid="e054a879-7202-43e0-ba13-518c3438aba8" data-offset-index="30" style="-webkit-transform: translateY(30px); transform: translateY(30px);" id="4aaccddd-d829-448d-b65e-6827e516778a">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">OPI BIURO RACHUNKOWOŚCI I FINANSÓW AGNIESZKA OLBRYŚ</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="b25b7b16-0058-446e-8bfb-43e68d38a738" data-offset-index="31" style="-webkit-transform: translateY(31px); transform: translateY(31px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">"Pasaż Śródmiejski 24h" Spółka z ograniczoną odpowiedzialnością</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="e80a2627-4b46-4fec-9644-efb07d33f68d" data-offset-index="32" style="-webkit-transform: translateY(32px); transform: translateY(32px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">PRZEDSIĘBIORSTWO PRODUKCYJNO - USŁUGOWE "DRABENT" MARIA DRABENT I JACEK DRABENT SPÓŁKA JAWNA</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="177a478d-c463-4f07-ae98-b320c4f89415" data-offset-index="33" style="-webkit-transform: translateY(33px); transform: translateY(33px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Przedsiębiorstwo Wielobranżowe "DARTOM" Tomasz Sylwester Skup, Dariusz Sawicki</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="3523061b-67c7-421e-b975-435bc445482a" data-offset-index="34" style="-webkit-transform: translateY(34px); transform: translateY(34px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Sage DemoFK</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="01893488-97d1-437d-a882-2cf011ac966e" data-offset-index="35" style="-webkit-transform: translateY(35px); transform: translateY(35px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Sage DemoFK</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="219036d1-8ed2-4556-b84f-e5402b494ffd" data-offset-index="36" style="-webkit-transform: translateY(36px); transform: translateY(36px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">SPEC - POŻ. Mańkowski Średziński Spółka Jawna
                     NIP: 542-10-05-842</span>
                  </div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="f3f6080e-c66e-4990-8652-74d6d93aaafe" data-offset-index="37" style="-webkit-transform: translateY(37px); transform: translateY(37px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">Teresa Gross GmbH</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="50fe5901-a27c-4b77-b363-4a4d6999a909" data-offset-index="38" style="-webkit-transform: translateY(38px); transform: translateY(38px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">test  test</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="5cd45e4d-1fa1-4661-9adb-f0d0f555a0e7" data-offset-index="39" style="-webkit-transform: translateY(39px); transform: translateY(39px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">TRANSPORT CIĘŻAROWY PIĘCIUREK WOJCIECH</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="c1a5dd64-736c-4c53-bac9-6d241849af9f" data-offset-index="40" style="-webkit-transform: translateY(40px); transform: translateY(40px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">TZA - rozp dost</span></div>
               </li>
               <li tabindex="-1" class="k-virtual-item" role="option" data-uid="c03411c7-fc6a-48f3-b38e-b0466269519d" data-offset-index="41" style="-webkit-transform: translateY(41px); transform: translateY(41px);">
                  <div class="k-item"><span style="height: 16px; word-wrap: break-word; white-space: nowrap; text-overflow: clip;">null</span></div>
               </li>
            </ul>
            <div class="k-height-container ng-scope">
               <div style="height: 42px;"></div>
            </div>
         </ul>
      </div>
   </div>
</div>

[Janusz]

Ok, I fixed the problem (I override some styles)

My questions for now:
- is virtual (pagination)works with k-ng-model (AngularJS) ?
- is virtual (pagination) works with cascade function of ComboBox ?

[Georgi Krustev]

Hello Janusz,

Please find my comments below:

- is virtual (pagination)works with k-ng-model (AngularJS) ?

The widget should work as expected using AngularJS and virtualization. Please use the next internal build (that will be uploaded today), as there are several issues in Q1 2015 release. 

- is virtual (pagination) works with cascade function of ComboBox ?

The widget should work as expected with virtualization and cascading functionality. Again, please use the next internal build (that will be uploaded today), for your tests.

Regards,
Georgi Krustev
Telerik

 

 

[Janusz]

I think the new version is worse than the previous one :)
Because with same code, my ComboBox download partial data from server ( I see multi page, and loading message), now I see ComboBox with looks like it has only one page.

[Georgi Krustev]

Hello Janusz,

I would suggest you download the latest internal build, as the official release has some bugs.
As a side note, would it be possible to elaborate a bit more on what in the behavior has worsened.

Regards,
Georgi Krustev
Telerik

 

 

[Janusz]

I have newest build: 2015.1.327

The next stange think:
- when I chosing vlaue from list - value in k-ng-model dosn't have value taken from "dataValueField" but has whole dataItem object - dojo: http://dojo.telerik.com/IDuNa
- cascading not working I think because above error (it cascade from id but has object :? )

I'm litle confused with this feature

[Georgi Krustev]

Hello Janusz,

The k-ng-model directive can set the primitive value to the model or the whole object (updated demo). This behavior depends on the valuePrimitive option. You can find more information about its effect to the k-ng-model directive here.

The cascading widgets use the parent value (get with value method) in order to perform data source filtration. I would suggest you review the following help topic, which explains how the cascading functionality is realized.

If the problem still persists, please provide more details what exactly does not work. A runnable demo will be of a great help.

Regards,
Georgi Krustev
Telerik