This is a migrated thread and some comments may be shown as answers.

Getting access to array index while binding an Array source

8 Answers 758 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 24 Apr 2012, 01:14 AM
Howdy All,
While binding to an array source is it possible to determine the index of the current array element? 

The documentation for using the Source binding gives the following example:

<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
    <li>
        id: <span data-bind="text: id"></span>
        name: <span data-bind="text: name"></span>
    </li>
</script>
<script>
    var viewModel = kendo.observable({
        products: [
            { id: 1, name: "Coffee" },
            { id: 2, name: "Tea" },
            { id: 3, name: "Juice" }
        ]
    });
 
    kendo.bind($("ul"), viewModel);
</script>


What I'm trying to do is get a reference to the index of the current array element from within the template.
For Example:

<li>
        index: <span data-bind="text: index"></span>
        id: <span data-bind="text: id"></span>
        name: <span data-bind="text: name"></span>
</li>

Does anybody know if there's a way to get access to the index from within the template?

Any insight would be greatly appreciated. 
Thanks in advance
Seamus

8 Answers, 1 is accepted

Sort by
0
Sean
Top achievements
Rank 1
answered on 24 Apr 2012, 10:21 PM
I created a fiddle to better illustrate the issue I'm running into.  I checked the source for kendo UI and it doesn't seem like the index value is easily accessible from within the template.  Can anyone more knowledgeable with the framework confirm that?

JSFiddle: http://jsfiddle.net/seamuskc/G9PEp/1/
0
Petur Subev
Telerik team
answered on 25 Apr 2012, 07:44 AM
Hi Sean,

Basically you cannot determine what is the index of the current object in the array. What you can do is to define new property (e.g. named index) and set its value each time you add new object to the people array.
Here is an example.
http://jsfiddle.net/subev/xt7ue/25/ 

Kind regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sean
Top achievements
Rank 1
answered on 25 Apr 2012, 06:39 PM
Thank you Petur for the reply and the example.  Do you know if there are any plans to make the item index available within the template in a future release of Kendo UI?  The reason that I ask is that adding the index as a property of the item *does* solve the simple use case that I gave but when you need to add "Delete" functionality it gets a little more complex.  Whenever an item is deleted, each subsequent item would need to have it's index property manually adjusted in order to keep the index values contiguous and avoid duplicated indexes.  Additionally, If you are loading existing items from a server side datasource, the items would also need to have this index property previously set.  It's very possible to code it that way but having the array index property available in the template would greatly simplify the solution.  Thanks again for the replies!

Sean

Update: I put in a suggestion to make the index available within the template :)
0
Sean
Top achievements
Rank 1
answered on 25 Apr 2012, 10:38 PM
Hi Petur,
In your solution, you spit out the index property of the object using a span tag with the data-bind property like so:

Index : <span data-bind="text:index"/> <br/>

How would (or could) you bind that value following the markup from the original example I gave:

<input name="person[currentIndexHere].name" type="hidden" data-bind="value:name">

Using #:index# and #=index# expressions I can get it to bind correctly during the initial rendering but updates to the ViewModel aren't reflected in the template using those approaches.  Using a span w/ data-bind does but it's not possible to use that approach to dynamically change the "name" attribute.  I looked into using the attr binding attribute but I don't see how to "build" the attribute value with a mix of static and data-bound text.  Am I missing something? Thanks
Sean
0
S
Top achievements
Rank 1
answered on 01 Jul 2013, 04:36 PM
Sean,

I was able to bind name attribute to my ViewModel index using something like:

<span data-bind="source: People" data-template="PeopleTemplate"></span>

<script id="PeopleTemplate" type="text/x-kendo-template">
<input name="Person[#= index#].PersonID" />
</script>

The binding to the index is also updated when ViewModel is updated. This is achieved by using Source and Template above. Here's my index in the ViewModel looks like:

var viewModel = kendo.observable({
people: [],
index: function() {
    var people = this.get("people");
    var indeces = [];
    for (var i = 0; i < people.length; i++) {
        var index = { PeopleID: people[i], index: i };
        indeces.push(index);
    }
    return indeces;
}
});

This will also solve your Delete functionality issue. However, you will need to add 'sorting' on your index ViewModel. The sorting must be based on unique identifier just so that after a deletion, your model will still have same sequence.

HTH.
0
John
Top achievements
Rank 1
answered on 22 Nov 2019, 12:40 AM

I'm sorry to posting on older thread, but it is almost familiar to my query. So wondering, now if there is any possible to determine the index of the current array element while binding to an array source? 

Any help would be greatly appreciated. 

Thanks in advance

John

0
Alex Hajigeorgieva
Telerik team
answered on 26 Nov 2019, 11:58 AM

Hello, John,

You can check right within the template the index of each item:

 # var idx = viewModel.products.indexOf(data); #
    <li>
       Index: #=idx #

Here is a runnable example demonstrating this:

https://dojo.telerik.com/@bubblemaster/eBOtaSoj

Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John
Top achievements
Rank 1
answered on 28 Nov 2019, 03:20 AM
Thank you very much Alex for the reply and the example. The index problem resolved. 
Tags
MVVM
Asked by
Sean
Top achievements
Rank 1
Answers by
Sean
Top achievements
Rank 1
Petur Subev
Telerik team
S
Top achievements
Rank 1
John
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or