Id to custom popup

10 posts, 0 answers
  1. Mateusz
    Mateusz avatar
    13 posts
    Member since:
    Jan 2015

    Posted 19 Aug 2015 Link to this post

    Hi 

    I have question to you how I can pass id to my custom popup.
    The whole problem is that I need to load specific data to my dropdownlist. and I need pass id off item which is in edition.

    I tried:

    • use JavaScript function in  .Data("passCategoryId") but I don't know how to get item clicked to edition. ​I tried setup id in onEdit event in TreeList but it is call afer function passCategoryId...
    • I tried also go this way but also when I check passed value is null

    @Html.Kendo().DropDownListFor(m => m.Level).DataTextField("Text").DataValueField("Value").DataSource(dataSoruce => dataSoruce.Read(read => read.Action("LoadPosibleOrderDll", "ProductCategories", new { categoryId = Model.ParentCategory })))

     

    model of tree list

    .Model(model =>   {         model.Id(p => p.Id);
                                model.ParentId(p => p.ParentId);                             model.Field(p => p.Id).Editable(false);                             model.Field(p => p.Level);                             model.Field(p => p.ProductCategoryOrder);                             model.Field(p => p.Parent.Name);                             model.Field(p => p.OrderPosibilities );                                                      })​

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 21 Aug 2015 Link to this post

    Hello Mateusz,

    You can get the edited model by getting the uid from the edit form and using the TreeList DataSource to get the model instance. Similar to the following:

    <script>
        function additionalData() {
            var uid = $("#Level").closest(".k-popup-edit-form").data("uid");
            var dataItem = $("#treelist").getKendoTreeList().dataSource.getByUid(uid);
            return {
                categoryId: dataItem.ParentCategory
            };
        }
    </script>
     
    @(Html.Kendo().DropDownListFor(m => m.Level)
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(dataSoruce => dataSoruce.Read(read => read.Action(/*..*/).Data("additionalData")))
    )

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mateusz
    Mateusz avatar
    13 posts
    Member since:
    Jan 2015

    Posted 28 Aug 2015 Link to this post

    Hi Rosen,

    Thanks for your replay but I have problem with your solution I can't get value from dataSource. I am getting information that dataItem is undefined.
    Do you know where is keep dataSource? Because I would like to check is uid correct and other data.
    I tried to display whole dataSource by $("#CategoryTree").getKendoTreeList().dataSource.data() but I recived only empty array.

    Thanks in advance,
    Mateusz
  5. Mateusz
    Mateusz avatar
    13 posts
    Member since:
    Jan 2015

    Posted 28 Aug 2015 Link to this post

    I would like also add some more information.

    $("#CategoryTree").getKendoTreeList()
    b.e…d.init {element: E.fn.init[1], _events: Object, options: Object, dataSource: y.e…d.init, columns: Array[0]…}
    treeList
    b.e…d.init {element: E.fn.init[1], _events: Object, options: Object, dataSource: y.e…d.init, columns: Array[4]…}

    this is my test code from javaScript console.

    Object treeList  is defined in onChange event:

    function onChange(arg) {        
        var treeList = this;
    }

    And in results it returns correct data from treeList control...

    The question is why jQuery selector is not returning data from dataSource? 

     

     

  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 31 Aug 2015 Link to this post

    Hello Mateusz,

    I'm not sure what is causing the issue you have described looking at the provided information. Is this onChange handle attached to the change event of the TreeList? Please provide a small sample which demonstrates the issue you are having.

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Mateusz
    Mateusz avatar
    13 posts
    Member since:
    Jan 2015

    Posted 31 Aug 2015 in reply to Rosen Link to this post

    Hello Rosen

    Ansering to your question:
    Yes onChange is handle to Change event of TreeList control.

    @(Html.Kendo().TreeList<Amway.PriceList.Web.ViewModels.ProductCategoryViewModel>()
            .Name("CategoryTree")
            .Columns(columns =>
            {
                columns.Add().Field(e => e.Name).Title("Name");
                columns.Add().Field(e => e.ProductCategoryOrder).Width(80);
                columns.Add().Field(e => e.Level).Width(150);
                columns.Add().Command(e =>
                    {
                        e.Destroy();
                        e.Edit();
                    }
                ).Width(200);
            })       
            .Filterable()
            .Selectable(true)
            .Editable(editable => editable.Mode("popup").TemplateName("EditCategoryView"))
            .Events(events =>
            {
                events.Change("onChange");
                events.DataBound("turnOffSpiner");           
            }))
     

     

    function onChange(arg) {
            var treeList = this;
            var model = treeList.dataItem(treeList.select());
            if (model != undefined) {
                var categoryId = model["Id"];          
                $("#CategoryId").val(categoryId);
                $("#ProductsGrid").data().kendoGrid.dataSource.read();
            }       
    }

    So this event has  TreeList with correct dataSource which is not empty. 
    But this peace of code:

    $("#CategoryTree").getKendoTreeList()

    is returning object with empty dataSource. This is a reason why solution which you wrote for me is not working.

     

     

     

  8. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 01 Sep 2015 Link to this post

    Hello Mateusz,

    As I have mentioned in my previous message it is not obvious what is causing such issue using the provided information. This is why I asked you to provide a small isolated sample which demonstrates the issue locally.

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Mateusz
    Mateusz avatar
    13 posts
    Member since:
    Jan 2015

    Posted 11 Sep 2015 Link to this post

    Rosen,

    When I started preparing project for you I founded working solution.

    function additionalData() {
           var uid = $("#ProductCategoryOrder").closest(".k-popup-edit-form").data("uid");
           var dataItem = $("#CategoryTree").getKendoTreeList().dataItems();
           var id = null;
           dataItem.forEach(function (entry) {
               if (entry.uid == uid) {
                   id = entry.id;
               }
           })
     
           return { categoryId: id };
       }

    I founded it by accident but it is working for me.
    Thank you for support and idea with uid.

     

     

  10. Mateusz
    Mateusz avatar
    13 posts
    Member since:
    Jan 2015

    Posted 11 Sep 2015 Link to this post

    One more think I founded true reason of this error with missing data in dataSource

    In my script I had this small javaScript code 

    $(document).ready(function () {
           $("#CategoryTree").kendoTreeList({
               dataSource: {
                   sort: { field: "ProductCategoryOrder", dir: "desc" }
               }
           });
     
       });

    But I also sort data in TreeList setting

    .Sort(sort => sort.Add("ProductCategoryOrder").Ascending())

    So this doubled sorting was the true error. ​

     

  11. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 11 Sep 2015 Link to this post

    Hello Mateusz,

    The code you have pasted will create another instance of the TreeList widget over the existing one using the same HTML element. This is not supported.

     If you want to set sort order you should the DataSource API, over the existing DataSource attached to the already created TreeList widget. 

    $("#CategoryTree").getKendoTreeList().dataSource.sort({ field: "ProdcutCategoryOrder", dir: "desc" });


    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready