[Solved] Couple LV questions

[sitefinitysteve]

1) Why do you think the cancel button would wipe all the entries?
http://screencast.com/t/MJ6AJU2Kf

2) Is there ANY way to do a drag\drop reorder with kendo?  You know how the left of the items would have draghandles and the user could re-order items as needed and the model (MVVM) would reflect the new order?

<div data-role="listview"
    data-template="list-template"
    data-edit-template="edit-template"
    data-bind="source: controls">
</div>

<script id="list-template" type="text/x-kendo-template">
    <div>
        # if(data.ControlType === "TextBox") { #
            <h3>#:Label#</h3>
            <input type="text" data-bind="value: PropertyName" class='k-textbox' disabled="disabled" />
        # } else if(data.ControlType === "DateTime"){ #
            <h3>#:Label#</h3>
            <input type="text" data-bind="value: PropertyName" data-role="datetimepicker" disabled="disabled" />
        # } else if(data.ControlType === "CheckBox"){ #
            <label>
                <span data-type="CheckBox">
                    <input type="checkbox" disabled="disabled">
                </span>
                #:Label#
            </label>
        # } #

        <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
        <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
    </div>
</script>

<script id="edit-template" type="text/x-kendo-template">
    <div>
        <input type="text" data-bind="value: Label" class='k-textbox' style="width: 100px" required="required"  />
        <br/>
        <input type="text" data-bind="value: PropertyName" class='k-textbox' required="required"  />
        <select data-bind="source: controlTypes, value: ControlType" data-role="dropdownlist"></select>
        <br/>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Update</a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
        </div>
    </div>
</script>

Am I missing something?  Should be like the demo?


Steve

[Alexander Valchev]

Hi Steve,

Straight to your questions:

1. The issue is most probably connected with the model IDs. Please make sure that each dataSource record has an unique ID value and that the ID field is defined in the dataSource.schema.model configuration.
2. Currently the functionality is not supported out of the box. In our next official release we will provide a Sortable widget which will allow you to reorder the rendered ListView items with Drag n Drop. The Sortable widget however will not automatically update the underlying observable array, it will only provide events which the developer can use to update the MVVM source.

Regards,
Alexander Valchev
Telerik

[sitefinitysteve]

1) Okay the datasource is just the model, none of the items have IDs...like the data isn't coming from a DB record it's just a plain JS object...like in this demo http://demos.telerik.com/kendo-ui/web/mvvm/source.html (Which doesn't have editing though).  What should I do??

2) Nice!  Is it on the roadmap to update the MVVM source automatically, or will there be docs, demo or a blog post on it??

[Alexander Valchev]

Hi Steve,

1) The demo you have referenced does not contain ListView. It demonstrates different feature - MVVM source and template binding.
The editing feature of the ListView depends on the model IDs. If you want to avoid unexpected behavior please consider assigning unique ID to each entry. Here is an example which demonstrates local CRUD operation for Kendo Grid. The approach in case ListView is used is identical.

2) Ability for automatically rearranging the source is not planned. As said before the widget will only provide events which the developer can use to update the source. For more information please refer to the roadmap.

Regards,
Alexander Valchev
Telerik

[sitefinitysteve]

Okay so I modified the model so there's an ID column as part of the data...but how do I specify that Id column in the markup so it knows thats the key? 

[Alexander Valchev]

Hello Steve,

The ID should be specified in the DataSource configuration, inside the View Model.

data-bind="source: controls"

//viewModel
controls: new kendo.data.DataSource({
   //dataSource configration
})

In case this solution does not fit in your case, it would be best if you can provide a small jsBin sample which demonstrates your exact scenario. In this way I will be able to examine it in details and assist you further. Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Jacques]

Hi Alexander, 

I'm experiencing a similar issue where clicking cancel removes the additional records added to the underlying datasource. Here's a link to a dojo I did where I've created an ID seed/incrementer function to allow the use of IDs since this is not connected to a database. 

http://dojo.telerik.com/IKowo/2

 

I'm still seeing the same issues. 

Any help? 

[Konstantin Dikov]

Hello Jacques,

You should configure the dataSource as in the previous examples:

• http://jsfiddle.net/valchev/AWyLf/30/

You could also take a look at the following dojo example for enabling CRUD operations with local data for the Grid:

• http://dojo.telerik.com/OZIGu

Regards,
Konstantin Dikov
Progress Telerik