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

Conditional Custom Command display in kendo UI grid.

8 Answers 3259 Views

Grid

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

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

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

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>

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

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>

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

}

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!