How to disable button on condicional

[Roberto]

Hi,

I tried to follow the example below, but when I add the line to make disabled = true, my grid does not show any data.

I would like to disable the button under one condition.

It also doesn't show any error messages in the browser

example

Could you help?

@{

    List<object> commands1 = new List<object>();

    commands1.Add(new {  buttonOption = new { content = "Details" } });   

}

<div>

    <ejs-grid id="Grid1"

              locale="pt"

              commandClick="commandClick1"

              allowGrouping="true"

              allowSorting="true"

              dataSource="@ViewBag.dataSource"

              queryCellInfo="queryCellInfo1"

              toolbar="@(new List<string>() { "Add", "Edit", "Delete","Search" })"

              allowPaging="true">

        <e-grid-pagesettings pageSize="40"></e-grid-pagesettings>

        <e-grid-editSettings allowAdding="true"

                             showDeleteConfirmDialog="true"

                             showConfirmDialog="true"

                             allowDeleting="true"

                             allowEditing="true"

                             mode="Dialog">

        </e-grid-editSettings>

        <e-grid-searchSettings fields="@(new string[] { "Numero","Secagem","ClienteNome"})"

                               operator="contains"

                               ignoreCase="true">

        </e-grid-searchSettings>

        <e-grid-columns>

            <e-grid-column field="PedidoId"

                           headerText="PedidoId"

                           isPrimaryKey="true"

                           visible="false"

                           textAlign="Left">

            </e-grid-column>     

            <e-grid-column field="SaldoMadereiro"

                           allowGrouping="true"

                           headerText="Madereiro"

                           visible="true"

                           textAlign="Right">

            </e-grid-column>

      

            <e-grid-column 

                           headerText="Ação"

                           textAlign="Center"

                           commands="commands1">

            </e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

<script>

    function commandClick1(args) {

    }

    function queryCellInfo1(args) {

      

     if (args.column.field === 'SaldoMadereiro' && args.data.SaldoMadereiro === 0) {

            args.cell.querySelector("button[title='Details']").ej2_instances[0].disabled = true;

        }

    }

</script>

[Rajapandi Ravi]

Hi Roberto, 

Greetings from syncfusion support 

Based on your query you want to disable the command button based on some condition. We have prepared a sample based on your requirement through the below way using the queryCellInfo event of the EJ2 grid. Please refer the below Code Example and sample for your reference 

@{ 

 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat style" } }); 

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

 

} 

<div class="control-section"> 

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true" queryCellInfo="onQueryCell" > 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            .  .  .  .  .  .  .  .  .  

            .  .  .  .  .  .  .  .   . 

            <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

<script> 

    function onQueryCell(args) { //queryCellInfo event 

        if (args.cell.classList.contains('e-unboundcell') && args.data.OrderID % 2 == 0) { 

            args.cell.querySelector("button[title='Edit']").classList.add("e-disabled"); 

            args.cell.querySelector("button[title='Delete']").classList.add("e-disabled"); 

            args.cell.querySelector("button[title='Edit']").ej2_instances[0].disabled = true; 

            args.cell.querySelector("button[title='Delete']").ej2_instances[0].disabled = true; 

        } 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/165503/ze/165503-105224066.zip 

Documentation: https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo 

Regards,
Rajapandi R 

[Roberto]

Hi,

It was working.

Thanks

[Rajapandi Ravi]

Hi roberto, 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R