Hide detail Indicator / Detail Grid

[David Edwards]

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"
                            }
                        ]
    });

[Alexander Valchev]

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

[Brian]

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!

[Marcin Butlak]

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

       }

    });

}

[Brian]

That works great, thanks!

[John]

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

[Alexander Valchev]

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

[Sanjay]

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

[Alexander Valchev]

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

[Sanjay]

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

[Alexander Valchev]

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

[Sanjay]

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

[SandyPapa]

Hello Friends,

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

Hope it helps,

Thanks,
Stu

[Abdul]

Awesome!

[Simon]

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

[Dimo]

Hello Simon,

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

Regards,
Dimo
Telerik

 

 

[Simon]

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.

[Dimo]

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

 

 

[Simon]

Thanks, my bad, I should have known that.

[Nithin Reddy]

[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]

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]

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