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

Couple LV questions

7 Answers 94 Views
ListView
This is a migrated thread and some comments may be shown as answers.
sitefinitysteve
Top achievements
Rank 2
Veteran
sitefinitysteve asked on 03 Feb 2014, 03:59 PM
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

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 05 Feb 2014, 09:02 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Veteran
answered on 06 Feb 2014, 04:07 PM
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??
0
Alexander Valchev
Telerik team
answered on 07 Feb 2014, 08:53 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Veteran
answered on 07 Feb 2014, 03:35 PM
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? 
0
Alexander Valchev
Telerik team
answered on 11 Feb 2014, 11:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacques
Top achievements
Rank 2
answered on 15 Jun 2017, 10:17 AM

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? 

0
Konstantin Dikov
Telerik team
answered on 19 Jun 2017, 07:22 AM
Hello Jacques,

You should configure the dataSource as in the previous examples:
You could also take a look at the following dojo example for enabling CRUD operations with local data for the Grid:

Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ListView
Asked by
sitefinitysteve
Top achievements
Rank 2
Veteran
Answers by
Alexander Valchev
Telerik team
sitefinitysteve
Top achievements
Rank 2
Veteran
Jacques
Top achievements
Rank 2
Konstantin Dikov
Telerik team
Share this question
or