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

Conditional Custom Command display in kendo UI grid.

8 Answers 968 Views
Grid
This is a migrated thread and some comments may be shown as answers.
SAJID
Top achievements
Rank 1
SAJID asked on 16 May 2013, 01:41 PM
Hi,

I have to display a custom command based on a condition in Grid and i used the below code.

 columns.Command(command =>
        {
            command.Custom("ViewDetails").Click("showDrops").Text("Drops");
        }).Width(70);
 
function dataBound(e) {

            var grid = $("#OrderByDropCurveGrid").data("kendoGrid");
            var gridData = grid.dataSource.view();
            for (var i = 0; i < gridData.length; i++) {
                var currentUid = gridData[i].uid;
                alert(gridData[i].Flex);
                if (gridData[i].Flex != 'Y') {
                    var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                    var editButton = $(currenRow).find("k-grid-custom");
                   
              alert(gridData[i].Flex);                 
                    editButton.hide();
                }
            }}
I get the alert message. But, the edit button is not hidden. Any help on this is appericated.

Thanks,

8 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 17 May 2013, 07:32 AM
Hello SAJID,

I suspect that the selector for finding the button is not correct : var editButton = $(currenRow).find("k-grid-custom");. If you alert the found buttons /alert(editButon.length);/ it will be 0.

The selector should at least be: 

var editButton = $(currenRow).find(".k-grid-custom");
//or event
var editButton = $(currenRow).find(".k-button");

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mathieu
Top achievements
Rank 1
answered on 30 Jul 2014, 12:25 PM
Hey, I'm facing a similar problem, but I have multiple custom command buttons in the same row that I wish to hide independently.

How do I "find" a button by name ?

($currentRow).find(buttonName) doesn't work:

columns.Command(c => c.Custom("butCreateUser").Text("Gebruiker aanmaken").Click("createUser"));
 
 
function personGridDataBound(e) {
 
        var grid = $("#PersonGrid").data("kendoGrid");
        var gridData = grid.dataSource.view();
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            alert(gridData[i].IsIntertypUser);
            if (gridData[i].IsIntertypUser == true) {
                var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                var createUserButton = $(currentRow).find("butCreateUser");
                createUserButton.hide();
            }
        }
    }

Thanks
0
Mathieu
Top achievements
Rank 1
answered on 30 Jul 2014, 12:33 PM
Got it:

var createUserButton = $(currentRow).find(".k-grid-butCreateUser");
0
DHHS
Top achievements
Rank 1
answered on 16 Jul 2015, 05:07 PM

Hi,

I have custom command in the grid, I am hiding the button conditionally and is working fine. 

But I have only one button in the custom command, when i hide the button, i can see one extra column for custom command with no buttons inside it. Is there a way that i can hide whole custom command, instead of buttons inside the custom command.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorType);
            columns.Bound(p => p.BHSISNum);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ContractorIsAlsoRegion);
            columns.Bound(p => p.ContractorName);
            columns.Bound(p => p.AddressBkNum);
            columns.Command(command => command.Custom("Remove").Text("Delete").SendDataKeys(true).Click("deleteClick"));
 
        })  .Events(e => e.DataBound("onDataBound"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)             
        .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
        )            )
        </div>
    </div>
</div>
 
 
 
function onDataBound(e) {
        var IsView =false;
        IsView = '@(ViewBag.ContractService.IsView)';    
        if (IsView === 'True' || IsView === 'true') {         
            var grid = $("#grid").data("kendoGrid");         
            var gridData = grid.dataSource.view();          
            for (var i = 0; i < gridData.length; i++) {
                var currentUid = gridData[i].uid;              
                var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");              
                var deleteButton = $(currentRow).find(".k-grid-Remove");             
                deleteButton.hide();
            }
        }  
    }

 

Thanks, 

Veena

0
DHHS
Top achievements
Rank 1
answered on 16 Jul 2015, 05:58 PM

one more thing, I have toolbar template for create record. How can i dynamically hide the button/ hide toolbar template using databound event.

 

Thanks,

Veena

0
DHHS
Top achievements
Rank 1
answered on 16 Jul 2015, 10:54 PM

Sorry to ask too many questions, as i will be in different zone, i am asking all the questions i have so that when i come tomorrow i will have some answers.

 I have custom command buttons in hierarchical grid, I am able to hide the custom command buttons successfully on my parent grid, but i am not able to hide the custom command buttons on child grid as i am not able to refer to child grid name

My parent grid
 
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorType);
            columns.Bound(p => p.BHSISNum);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ContractorIsAlsoRegion);
            columns.Bound(p => p.ContractorName);
            columns.Bound(p => p.AddressBkNum);
            columns.Command(command => command.Custom("Remove").Text("Delete").SendDataKeys(true).Click("deleteClick"));
 
        })  .Events(e => e.DataBound("onDataBound"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)             
        .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
        ) )
        </div>
    </div>
</div>
 
My child grid/detail template
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
            .Name("grid_#=Id#")
            .Columns(columns =>
            {
                columns.Bound(o => o.Id).Width(50);
                columns.Bound(o => o.ServiceId);
                columns.Bound(o => o.ServiceType);
                columns.Bound(o => o.AdultChild);
                columns.Bound(o => o.Qualifier);
                columns.Bound(o => o.CodeModifier);
                columns.Bound(o => o.ServiceModifier);
                columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClickServices"));
            }) .Events(e => e.DataBound("onDataBoundServices"))
             .ToolBar(toolbar =>
{
    toolbar.Template(@<text>
        <div class="toolbar">
            <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Add Services</button>           
        </div>
    </text>);
})
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                                      .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))
                    )
                    
 
                    .Pageable()
                    .Sortable()
                    .ToClientTemplate()
 
    )
</script>
 
 
parent grid databound
 
    function onDataBound(e) {
        var IsView =false;
        IsView = '@(ViewBag.ContractService.IsView)';    
        if (IsView === 'True' || IsView === 'true') {         
            var grid = $("#grid").data("kendoGrid");         
            var gridData = grid.dataSource.view();          
            for (var i = 0; i < gridData.length; i++) {
                var currentUid = gridData[i].uid;              
                var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");              
                var deleteButton = $(currentRow).find(".k-grid-Remove");             
                deleteButton.hide();
            }
        }  
    }
 
child grid databound / I have tried something below but it is throwing error grid is null
 
 function onDataBoundServices(e) {
        var IsView =false;
        IsView = '@(ViewBag.ContractService.IsView)';    
        if (IsView === 'True' || IsView === 'true') {         
            var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");         
            var gridData = grid.dataSource.view();          
            for (var i = 0; i < gridData.length; i++) {
                var currentUid = gridData[i].uid;              
                var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");              
                var deleteButton = $(currentRow).find(".k-grid-Delete");             
                deleteButton.hide();
            }
        }  
    }

0
Rosen
Telerik team
answered on 20 Jul 2015, 12:03 PM

Hello DHHS,

- Generally speaking you could use the hideColumn method of the Grid to hide column if all of the buttons are hidden. Note that you may need to manually show the column once hidden when a button needs to be shown.

- You should find the element within the toolbar and hide it as appropriate. For example:

 

function dataBound() {
  var toolbar = this.wrapper.find(".k-grid-toolbar");
  toolbar.find(".k-grid-add").hide();
}

- Most probably the error is cause by the fact that dataBound event does not have dataRow as argument field. Thus, you should change the code to directly reference the grid widget (which is the context in of the event handler)

 

function onDataBoundServices(e) {
      var IsView =false;
      IsView = '@(ViewBag.ContractService.IsView)';   
      if (IsView === 'True' || IsView === 'true') {        
          var grid = this; //e.detailRow.find("[data-role=grid]").data("kendoGrid");        
          var gridData = grid.dataSource.view();         
          for (var i = 0; i < gridData.length; i++) {
              var currentUid = gridData[i].uid;             
              var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");             
              var deleteButton = $(currentRow).find(".k-grid-Delete");            
              deleteButton.hide();
          }
      
  }

On a side note, as your questions are not directly related to the initial topic and in order to more clearly track them, I would ask you, to open a separate support request if additional questions arise.

 

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jeff
Top achievements
Rank 1
answered on 28 Jan 2016, 05:45 PM

If anyone else sees this thread please visit this URL and vote for this feature to be implemented.

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/9411468-conditional-for-grid-columns-and-buttons

Tags
Grid
Asked by
SAJID
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Mathieu
Top achievements
Rank 1
DHHS
Top achievements
Rank 1
Rosen
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or