Id to custom popup

[Mateusz]

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 );                                                      })​

[Rosen]

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

[Mateusz]

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

[Mateusz]

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? 

 

 

[Rosen]

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

[Mateusz]

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.

 

 

 

[Rosen]

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

[Mateusz]

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.

 

 

[Mateusz]

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. ​

 

[Rosen]

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