[Solved] Hide column in detail grid?

[Garry]

Hi,

Does anyone one know how to hide a column in a detail grid?

Thanks,

George

[Dimiter Madjarov]

Hello George,


You could enable the columnMenu option of a detail Grid as in a regular one. Is this the case that you are referring to? If you want to programatically hide a column, the detail Grid instance should be retrieved first in order to invoke the hideColumn method of the Grid API.

Regards,
Dimiter Madjarov
Telerik

 

 

[Garry]

Hi Dimiter,

Thanks for your suggestion.

What I need to do is hide the column programmatically. I have got this working like this;

function detailInit(e) {







       id = e.data.officeId;







        $("<div class='child-grid' />").appendTo(e.detailCell).kendoGrid({



           dataSource: {



               type: "json",



               transport: {



                   read: "@HtmlExtensions.GetAppUrl("/api/office/getOfficeContacts")",



                   parameterMap: function (data, action) {



                       if (action === "read") {



                           return {



                               pagingInfo: data,



                               officeId: id



                           }



                       }



                   }



               },



               serverPaging: true,



               serverSorting: true,



               serverFiltering: true,



               pageSize: 20



           },



           dataBound: function () {



               onDataBound(e);



           },



           toolbar: [



           {



               template: '<input type="button" class="btn btn-primary btn-xs" ng-click="openContactDialog(\'officeContactWindow\',Id=#=id#\)" name="bAddContact" value="Add Contact" />'



           }],



           selectable: "row",



           change: onSelect,



           scrollable: false,



           sortable: true,



           pageable: true,



           columns: [



               {



                   field: "firstName",



                   title: "First Name"



               },



               {



                   field: "delete",



                   command: { className: "btn btn-primary btn-xs", text: "Delete", click: deleteContact }, title: " ", width: "70px"



               },



               {



                   template: '<input type="button" class="btn btn-primary btn-xs" ng-click="openContactDialog(\'officeContactWindow\',Id=#=contactId#\,\'open\')" name="bEditContact" value="Edit" />',



                   width: "60px"



               }



           ]



       });



   }











   function onDataBound(e) {



       var child = $(e.detailCell).children().data('kendoGrid');



       child.hideColumn("delete");



       e.sender.tbody.find(".btn-primary").removeClass("k-button");





   }

Is there away of referencing the child grid outside of the databind method? I want to hide the delete column from within an angular controller based on user permissions. I would like to do something like;

$("#childgrid").hideColumn("delete");

how do I give the detail grid a name?

Many thanks,

George

[Dimiter Madjarov]

Hello George,


In the current case you should be aware of the parent Grid row, for which the child Grid should be retrieved. I am not aware of the exact use case, but for example if the uid of the parent item is available you could use the following code to retrieve the child Grid.
E.g.

var parentUid = "...";
var parentRow = $("#grid").find("tr[data-uid='" + parentUid + "']");
var childGrid = parentRow.next(".k-detail-row").find("[data-role='grid']").data("kendoGrid");

Regards,
Dimiter Madjarov
Telerik