Couple LV questions

6 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 03 Feb 2014 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 06 Feb 2014 in reply to Alexander Valchev Link to this post

    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??
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Feb 2014 Link to this post

    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!
  6. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 07 Feb 2014 Link to this post

    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? 
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Feb 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready