Hide detail Indicator / Detail Grid

19 posts, 0 answers
  1. David Edwards
    David Edwards avatar
    6 posts
    Member since:
    Aug 2009

    Posted 09 Nov 2012 Link to this post

    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"
                                }
                            ]
        });
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Nov 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    4 posts
    Member since:
    Sep 2012

    Posted 10 Dec 2012 Link to this post

    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!
  5. Marcin Butlak
    Marcin Butlak avatar
    26 posts
    Member since:
    Dec 2012

    Posted 11 Dec 2012 Link to this post

    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; });
           }
        });
    }
  6. Brian
    Brian avatar
    4 posts
    Member since:
    Sep 2012

    Posted 11 Dec 2012 Link to this post

    That works great, thanks!
  7. John
    John avatar
    6 posts
    Member since:
    Sep 2012

    Posted 05 Feb 2013 Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 08 Feb 2013 Link to this post

    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!
  9. Sanjay
    Sanjay avatar
    3 posts
    Member since:
    Oct 2013

    Posted 17 Dec 2013 Link to this post

    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
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2013 Link to this post

    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!
  11. Sanjay
    Sanjay avatar
    3 posts
    Member since:
    Oct 2013

    Posted 18 Dec 2013 Link to this post

    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
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2013 Link to this post

    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!
  13. Sanjay
    Sanjay avatar
    3 posts
    Member since:
    Oct 2013

    Posted 18 Dec 2013 Link to this post

    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
  14. SandyPapa
    SandyPapa avatar
    1 posts
    Member since:
    Oct 2014

    Posted 29 Oct 2014 Link to this post

    Hello Friends,

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

    Hope it helps,

    Thanks,
    Stu
  15. Abdul
    Abdul avatar
    5 posts
    Member since:
    Sep 2014

    Posted 31 Oct 2014 in reply to Marcin Butlak Link to this post

    Awesome!
  16. Simon
    Simon avatar
    17 posts
    Member since:
    May 2015

    Posted 18 Jun 2015 in reply to Alexander Valchev Link to this post

    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

  17. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 23 Jun 2015 Link to this post

    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!
     
  18. Simon
    Simon avatar
    17 posts
    Member since:
    May 2015

    Posted 23 Jun 2015 in reply to Dimo Link to this post

    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.

  19. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 25 Jun 2015 Link to this post

    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. This is general Javascript programming knowledge.

    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!
     
  20. Simon
    Simon avatar
    17 posts
    Member since:
    May 2015

    Posted 25 Jun 2015 in reply to Dimo Link to this post

    Thanks, my bad, I should have known that.
Back to Top
Kendo UI is VS 2017 Ready