Kendo ListView grouping issue

[Mohan]

Hi there,

 

We are using the Kendo ListView control. In this control we are trying to use a grouping option.

While using this option we are facing a few issues listed below.

 

1. We are making a field with hyperlink, that means if a user clicks the hyperlink, it should redirect or get specific details. Now that fails here.

 

2. Also we are making a hyperlink which is grouped by one item, If the user clicks any one specific item, that should open in a new tab. Again we are not able to get that specific item position.

 

3. And we need to group by 2 items. For example, We have 1 set of results and with that we need to group by 2 fields like one by User & Department.

 

​We are using the Tojo link below for our reference.

https://demos.telerik.com/kendo-ui/listview/grouping​

[Neli]

Hello Mohan,

1) and 2) - Llinked here you will find an example where a hyperlink is included in the ListView template. When you click on the hyperlink a new tab is opened in the browser. Could you please modify the example in order to replicate the issue in your scenario and send it back for review?

3) The grouping in the ListView is achieved with the help of the template. When you have multiple groupings, the data becomes more nested. You need to iterate over the innermost items in order to render the individual values. Here you will find a dojo example where grouping by multiple fields is demonstrated.

Regards,
Neli
Progress Telerik

[Mohan]

Hi Neli,

Thanks for your response.

 

For point #1 & #2 - I tried and I have few more points on this.

For point #3 - I'm still checking your response.

 

In this example, if we click on the country name hyperlink (class name: TitlelnkClick), we need to retrieve the selected data item and perform some action.

Similarly, if we click on the URL (class name: lnkClick), we should also retrieve the specific selected data item and perform a related action. I have Modified the dojo and Attached for your reference

 

https://dojo.telerik.com/enedituD

[Neli]

Hi Mohan,

To retrieve the dataItem for the card you need to set data-uid on the k-card item

 <div class="k-card" style="width: 15em; margin:2%" data-uid="#:data.items[i].uid#">

Then, you can access the dataItem as follows:

$(".lnkClick").click(function (ev) {
                ev.preventDefault();
               
                var lv = $("#listView").data("kendoListView");
                var uid = $(this).closest(".k-card").data("uid"),
                dataItem = lv.dataSource.getByUid(uid);
});

Regarding the entire group, you can try to access the group by key for example:

 $(".TitlelnkClick").click(function (ev) {
                ev.preventDefault();
                var listview = $("#listView").data("kendoListView");
                var groupKey = $(this).data("value");
                var groupItem = listview.dataSource.view().find(f => f.value === groupKey);

                console.log(groupItem); 
 });

Here you will find the modified Dojo example.

I hope you will find the provided information helpful.

Regards,

Neli

[Mohan]

Hi Neli,

I wanted to express my gratitude for providing us with the example. It has been extremely helpful, and I am pleased to inform you that it is working perfectly for me.

Once again, thank you so much for your assistance.

 

Thanks

Mohan

[Neli]

Hi Mohan,

Thank you very much for the great feedback. It is always nice to hear that the suggestions and information we provide are helpful.

Regards,

Neli