This is a migrated thread and some comments may be shown as answers.

Hide detail Indicator / Detail Grid

19 Answers 1741 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David Edwards
Top achievements
Rank 1
David Edwards asked on 09 Nov 2012, 02:40 PM
I am working with the grids, and I would like to hide the detail grid and indicator when the the datasource returns empty.  Looking through the forums, I found the suggestion of 

"After the grid is populated(i.e DataBound event is triggered) you can remove the css class for desired.k-master-row>.k-hierarchy-cell>a element. That is the only way to hide the expand/collapse arrow"

Can someone point me to a code sample where this is working?  This seems like something that I would need to do inside the detail grid, but I cannot figure out where.  Below is my function in case it is needed.

Thanks for your help.

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: "/DashController/GetMoreReports?Id=" + e.data.ReportId
            },
            serverPaging: true,
            serverSorting: true,
            pageSize: 10,
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
                            {
                                template: '<a href="/ReportId=#=ReportId#">#=ReportNumber#</a>',
                                title: "Report"
                            },
                            {
                                field: "Summary"
                            }
                        ]
    });

19 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Nov 2012, 12:29 PM
Hi David,

To achieve that please hook up to the dataBound of the details grid and use the following code:
dataBound: function(e) {
    if(this.dataSource.data().length === 0) {
        var masterRow = this.element.closest("tr.k-detail-row").prev();
        $("#grid").data("kendoGrid").collapseRow(masterRow);
        masterRow.find("td.k-hierarchy-cell .k-icon").removeClass();
    }
},

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 10 Dec 2012, 07:38 PM
Hi, I tried this, but the problem is that the detail DataBound event doesn't fire until the detail is expanded. So, when the main grid is loaded, the detail indicators are shown. When I click on a detail indicator that contains an empty data source, the indictor then disappears.
How can I get the indicator to hide when loading the main grid?
Thanks!
0
Marcin Butlak
Top achievements
Rank 2
answered on 11 Dec 2012, 11:11 AM
Try this one I used it to block and change the styles of the indicator it looks much better than an empty cell:
// you must define it in your master grid
dataBound:
function() {
    var dataSource = this.dataSource;         
    this.element.find('tr.k-master-row').each(function() {
       var row = $(this);            
       var data = dataSource.getByUid(row.data('uid'));
                // this example will work if ReportId is null or 0 (if the row has no details)
       if (!data.get('ReportId')) {
         row.find('.k-hierarchy-cell a').css({ opacity: 0.3, cursor: 'default' }).click(function(e) { e.stopImmediatePropagation(); return false; });
       }
    });
}
0
Brian
Top achievements
Rank 1
answered on 11 Dec 2012, 05:24 PM
That works great, thanks!
0
John
Top achievements
Rank 1
answered on 05 Feb 2013, 03:05 PM
This works great; I was wondering how would I go about breaking out the code into a named function as I'd like to re-use it in different places ? 

Thanks Again

John
0
Alexander Valchev
Telerik team
answered on 08 Feb 2013, 08:17 AM
Hi John,

I am afraid that your question is not directly related to KendoUI, but to general JavaScript knowledge.
Generally speaking you can put the logic in a named function and pass it as a handler of the dataBound event. As an example:
dataBound: onDataBound
 
//where onDataBound is a function
function onDataBound(e) {
    //the logic
}

I hope this will help. Please let me know in case I misunderstood the question.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sanjay
Top achievements
Rank 1
answered on 17 Dec 2013, 06:12 PM
I have built a mvc kendo grid with hierarchy. Everything is working fine but the expand/collapse icon in the top level is not shown. When I go to the place where the icon is supposed to be, the cursor turns to a hand and I can expand or collapse a particular row.

I have copied the code from http://demos.kendoui.com/web/grid/hierarchy.html and made changes to the columns and data source.

Could you tell me what am I missing here? It must be a simple thing but I can't figure it out.

I appreciate any help in this matter.

Thanks,
Sanjay
0
Alexander Valchev
Telerik team
answered on 18 Dec 2013, 09:04 AM
Hi Sanjay,

Did you included the sprite which contains the icons in the project?
Please copy the whole content of the styles folder from the distribution archive to your project - it contains sub folders with names that correspond to the theme name. Sprites are located in those sub folders.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sanjay
Top achievements
Rank 1
answered on 18 Dec 2013, 10:47 AM
Hi Alex,

Thank you for getting back to me. I am using VS 2013 with MVC 5. I have the following folder structure - Content/Kendo. Under Kendo, I have a bunch of folders for the different themes. I am using 'BlueOpal' theme. There is a folder - Content/Kendo/BlueOpal folder which has the sprites you mentioned. It has sprite.png and sprite_2x.png.

I am using the BundleConfig.cs which has the following:
            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
            "~/Scripts/kendo/kendo.all.min.js",
            "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

            bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
            "~/Content/kendo/kendo.common-bootstrap.min.css",
            "~/Content/kendo/kendo.bootstrap.min.css",
            "~/Content/kendo/kendo.blueopal.min.css"));

What is the path it's looking for? Hope this helps to figure out the problem.

Thanks,
Sanjay
0
Alexander Valchev
Telerik team
answered on 18 Dec 2013, 02:11 PM
Hello Sanjay,

Does the icons of other widgets show up as expected? For example if you initialize Kendo Calendar are you able to see its icon?

Is it possible for you to isolate the issue in a sample project with mock data which I can run and examine locally? In this way I will be able to determine where exactly the problem comes from and advice you further.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sanjay
Top achievements
Rank 1
answered on 18 Dec 2013, 09:16 PM
Hi Alex,

I created another project and it worked fine there. Then I realized that something in my project is causing this. After spending few hours on this, I finally figured out what is causing the icons to disappear. The following in my style sheet is the culprit:

   a:link, a:visited,
    a:active, a:hover {
        color: #294779;
        background: none;
        outline: none;
        text-decoration: none;
    }

I removed that and it started working. Just wanted to let you know. I really appreciate your time on this.

Thanks,
Sanjay
0
SandyPapa
Top achievements
Rank 1
answered on 29 Oct 2014, 11:14 AM
Hello Friends,

Just comment this line:
//detailTemplate: false,
And it will automatically remove icons as well as detail grid.

Hope it helps,

Thanks,
Stu
0
Abdul
Top achievements
Rank 1
answered on 31 Oct 2014, 09:02 AM
Awesome!
0
Simon
Top achievements
Rank 1
answered on 18 Jun 2015, 08:06 AM

Sorry for revisiting a thread that's a few years old!

Is the method posted 11 Dec 2012 still the best way of achieving this? I've tried it, and it works on initial display. But if I edit the row and click on Cancel, the indicator reappears. I've tried hiding it again in the Cancel event, and stepping through the code this appears to work, but whatever it is that is redisplaying it seems to run after this event has finished, so the end result is that it displays again.

 

Thanks

0
Dimo
Telerik team
answered on 23 Jun 2015, 07:07 AM
Hello Simon,

Use setTimeout() in the cancel event handler, because the event is fired before the edited row is re-rendered.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Simon
Top achievements
Rank 1
answered on 23 Jun 2015, 08:48 AM

Thanks. Here's my code - where should I place the setTimeout?

cancel: function (e) {
                var dataSource = this.dataSource;
                this.element.find('tr.k-master-row').each(function () {
                    var row = $(this);
                    var data = dataSource.getByUid(row.data('uid'));
                    if (data.get('isHomeCurrency')) {
                        row.find('.k-hierarchy-cell a').remove();
                    }
                });
 
            },

I tried putting it round the whole thing, and it fails because this.element.find() returns null. But putting it rouind row.find().remove, I get the same problem as before.

0
Dimo
Telerik team
answered on 25 Jun 2015, 12:52 PM
Hello Simon,

You should wrap the whole event handler body in a setTimeout, but before that, you need to save a reference to "this", because setTimeout changes the script context and "this" will point to a different object inside and outside setTimeout.

http://stackoverflow.com/questions/2130241/pass-correct-this-context-to-settimeout-callback

An alternative option is to use "e.sender" instead of "this" for getting the dataSource and widget element.

http://docs.telerik.com/kendo-ui/basics/events-and-methods#event-handler-argument

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Simon
Top achievements
Rank 1
answered on 25 Jun 2015, 01:10 PM
Thanks, my bad, I should have known that.
0
Nithin Reddy
Top achievements
Rank 1
answered on 13 Apr 2020, 07:23 PM
[quote]Marcin Butlak said:Try this one I used it to block and change the styles of the indicator it looks much better than an empty cell:
// you must define it in your master grid
dataBound:
function() {
    var dataSource = this.dataSource;         
    this.element.find('tr.k-master-row').each(function() {
       var row = $(this);            
       var data = dataSource.getByUid(row.data('uid'));
                // this example will work if ReportId is null or 0 (if the row has no details)
       if (!data.get('ReportId')) {
         row.find('.k-hierarchy-cell a').css({ opacity: 0.3, cursor: 'default' }).click(function(e) { e.stopImmediatePropagation(); return false; });
       }
    });
}

[/quote]

 

This works

vishal
Top achievements
Rank 1
commented on 18 Feb 2022, 11:56 AM

i want a two detail grid on two different rows in the parent of kendo grid if this is not possible then if we want to call a detail init function with two different data source how can be done?

 

Neli
Telerik team
commented on 23 Feb 2022, 10:46 AM

Hi Vishal,

You could have a condition in the detailedTemplate and render a different Grid. Below is an example:

 <script type="text/x-kendo-template" id="template">
      		# console.log(data) #
          # if(data.Country == "USA") { #
            <div class="orders"></div>
          # }else{ #
             <div class="orders2"></div>
          #}#
</script>

Here is a Dojo example where the approach is demonstrated.  

Regards,

Neli

Tags
Grid
Asked by
David Edwards
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Brian
Top achievements
Rank 1
Marcin Butlak
Top achievements
Rank 2
John
Top achievements
Rank 1
Sanjay
Top achievements
Rank 1
SandyPapa
Top achievements
Rank 1
Abdul
Top achievements
Rank 1
Simon
Top achievements
Rank 1
Dimo
Telerik team
Nithin Reddy
Top achievements
Rank 1
Share this question
or