DropDownList inside ListView

2 posts, 0 answers
  1. Tenen
    Tenen avatar
    6 posts
    Member since:
    Feb 2015

    Posted 12 Apr 2015 Link to this post

    Hi,

    I am trying to generate kendo ListView with cascading drop downs in it, all the other controls are working ok.

    I followed the documentation and other threads in this forum with no luck

    The browser not renders EntityTypeId input as drop down list

    Also tried to render it in following ways:

    layout.entityTypesData
    = new
    kendo.data.DataSource({

    data: @(Html.Raw(Json.Encode(ViewBag.EntityTypes)))
    });


    <select data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-source="layout.entityTypesData"></select>

    <select data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-bind="source:layout.entityTypesData,
    value: #:EntityTypeId#"></select>

    Please assist me in solving this issues

    Here is my code:

    @{


    Layout = "~/Views/Shared/_Layout.cshtml";

    }




    <a class="k-button k-button-icontext k-add-button" id="add-quickLink" href="#">


    <span class="k-icon k-add"></span>Add new record


    </a>




    <div id="listView"></div>

    @section
    scripts

    {


    <script type="text/x-kendo-tmpl" id="quickLinkEditTemplate">


    <div class="quickLink-view k-widget">


    <span class="handler">&nbsp;</span>


    <span>


    <input type="text" class="k-textbox
    entityType" value="#:EntityTypeId#" name="EntityTypeId" id="EntityTypeId#:QuickLinkComponentId#" />


    </span>


    <span>


    <input type="text" class="k-textbox entity" value="#:EntityId#" name="EntityId" id="EntityId#:QuickLinkComponentId#" />


    </span>


    <span>


    <input type="text" class="k-textbox" value="#:Text#" name="Text" />


    </span>


    <span>


    <a class="k-button k-cancel-button" href="\#"><span class="k-icon k-cancel"></span></a>


    </span>


    </div>


    </script>






    <script>


    $(document).ready(function() {


    layout.urls.root = "@Url.Content("~")";


    layout.urls.getEntitiesForDropDownUrl = "@Url.Action("GetEntitiesForDropDownAsync")";


    layout.entityTypesData = [{ Value: 1, Text: "Article" }, { Value: 2, Text: "Product" }, { Value: 3, Text: "Categories" }];


    initListView();

    initDropDownLists();

    });

    var
    kendoDropDownOptions = {

    autoBind: false,


    optionLabel: "Select",


    dataTextField: "Text",


    dataValueField: "Value",


    dataSource: {

    type: "json",


    serverFiltering: true,

    transport: {

    read: {

    type: "POST",


    url: layout.urls.getEntitiesForDropDownUrl,


    dataType: "json",


    contentType: "application/json"


    },

    parameterMap: function (data) {


    return
    JSON.stringify(data);


    }


    }


    }


    };




    var initDropDownLists =
    function() {


    $(".quickLink-view").each(function () {


      var entityTypeComponent = $(this).find(".entityType");


    var entityComponent =
    $(this).find(".entity");




    entityTypeComponent.kendoDropDownList({


    dataTextField: "Text",


    dataValueField: "Value",


    dataSource: layout.entityTypesData


    });




    kendoDropDownOptions.cascadeFrom = entityTypeComponent.id;


    entityComponent.kendoDropDownList(kendoDropDownOptions).data("kendoDropDownList");


    //entityComponent.data('kendoDropDownList').value(layout.header.viewModel.PromotionEntityId);


    });




    };




    var initListView = function() {


    var dataSource = new kendo.data.DataSource({


    transport: {


    read: {


    //returns
    [{"QuickLinkComponentId":1,"EntityTypeId":1,"EntityId":1,"Text":"test1","SortOrder":0,"ParentId":1},{"QuickLinkComponentId":2,"EntityTypeId":2,"EntityId":1,"Text":"test2","SortOrder":0,"ParentId":1}]


    url: layout.urls.root + "QuickLink",


    dataType: "json"


    },


    update: {


    url: layout.urls.root + "QuickLink/Update",


    dataType: "json",


    type: "POST"


    },


    destroy: {


    url: layout.urls.root + "QuickLink/Delete",


    dataType: "json",


               type: "POST"


    },


    create: {


    url: layout.urls.root + "QuickLink/Create",


    dataType: "json",


    type: "POST"


    },


    parameterMap: function(options, operation) {


    if (operation != "read") {


    var items = {};




    $.each(data.models, function(index, item) {


             for (var key in item) {


    items["[" + index + "]" + "." + key] = item[key];


    }


    });




    return items;


    }


                      }


    },


    batch: true,


    schema: {


    model: {


    id: "QuickLinkComponentId",


    fields: {


    QuickLinkComponentId: { editable: false, nullable: true },


    }


    }


    }


    });




    var listView = $("#listView").kendoListView({


    dataSource: dataSource,


       template: kendo.template($("#quickLinkEditTemplate").html())


    }).data("kendoListView");




    $("#add-quickLink").click(function(e) {


    listView.add();


    e.preventDefault();


    });


    };


    </script>

    }

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 15 Apr 2015 Link to this post

    Hello Tenen,

    I've stripped down the code you've posted here in order to isolate the scenario. The result is visible in the following dojo example - http://dojo.telerik.com/@rusev/oCAWu

    Important bits are: 

     - drop down widgets are initialized on dataBound event as the template will be rendered after the widget is bound

     - each `entityComponent` widget cascades from the same row `entityTypeComponent` by setting the following option `cascadeFrom: entityTypeComponent.attr("id")`

     - I've also mocked the `entityComponent` configuration as follows:

    cascadeFromField: "Type",
    dataTextField: "Text",
    dataValueField: "Value",
    dataSource: entityData

     

    Regards,
    Nikolay Rusev
    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
Back to Top