Grid tool bar button add button disable - enable

[Pratheep]

Hi

It's possible when  page load if   hfproduct (hidden field)  is empty grid(GridProduct) toolbar Add button disable or if not empty Add button enable


 <input id="hfproduct" type="hidden"  class="hfproduct" runat="server"/>

<ej:Grid ID="GridProduct" runat="server" ClientIDMode="Static" AllowPaging="True" AllowFiltering="false" Width="920px">

 <ClientSideEvents ActionComplete="productcomplete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" ActionBegin="begin" />

  <Columns>

  <ej:Column Field="str_product_code" HeaderText="str_product_code" IsPrimaryKey="true" TextAlign="Right" Visible="false" />

  <ej:Column Field="str_product_name" HeaderText="str_product_name" IsPrimaryKey="true" TextAlign="Left" Visible="false" />

</Columns>

<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

 </ej:Grid>

Thanks

Pratheep

[Prasanna Kumar Viswanathan]

Hi Pratheep, 

Thanks for contacting Syncfusion support. 

To achieve your requirement, use dataBound event of ejGrid.  In this event we check the condition of input textbox value and disable the toolbarAdd button.  

Find the code example and sample:  

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">   

   

 <input id="hfproduct" type="hidden" class="hfproduct"  runat="server" /> 

 

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 

    <div> 

         <ej:Grid ID="FlatGrid" runat="server" ClientIDMode="Static" AllowPaging="True" AllowFiltering="false" Width="920px"> 

            <ClientSideEvents ActionComplete="productcomplete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" ActionBegin="begin" DataBound="databound" /> 

             <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

             <EditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" /> 

            --------------------------------------- 

       </ej:Grid> 

    </div> 

 

<script type="text/javascript"> 

    function databound(args) { 

        if($(".hfproduct").val().length == 0) 

            $("#" + this.element.attr("id") +"_add").addClass("e-disable"); 

    } 

</script> 

</asp:Content> 

Sample: http://www.syncfusion.com/downloads/support/forum/130050/ze/Sample-1173361824 

Refer to the Help document for the dataBound event.  

https://help.syncfusion.com/api/js/ejgrid#events:databound 

Regards, 

Prasanna Kumar N.S.V 

[Pratheep]

Hi

Thanks for your supporting

it's possible button click event grid add button enable ?

$("

#Button").click(function(){

   $("#" + FlatGrid+ "_add").addClass("e-enable");

});

Thanks
Pratheep

[Prasanna Kumar Viswanathan]

Hi Pratheep, 

Query : “it's possible button click event grid add button enable ?” 

Yes, it is possible to enable the toolbar add button in the button click event.  

Find the code example and sample:  

<input type="button" id="Button" value="Button"></input> 

 

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 

    <div> 

         <ej:Grid ID="FlatGrid" runat="server" ClientIDMode="Static" AllowPaging="True" AllowFiltering="false" Width="920px"> 

            <ClientSideEvents ------ DataBound="databound" /> 

             <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

             -------------------------------------- 

        </ej:Grid> 

    </div> 

 

<script type="text/javascript"> 

     

    function databound(args) { 

        if ($(".hfproduct").val().length == 0) 

            var $toolbar = $("#" + this.element.attr("id") + "_toolbarItems"); 

            var toolbar = $("#" + this.element.attr("id") + "_add"); 

            $toolbar.ejToolbar("disableItem", toolbar); 

    } 

 

    $("#Button").click(function () { 

        var grid = $("#FlatGrid").ejGrid("instance"); 

        var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems"); 

        var toolbar = $("#" + grid.element.attr("id") + "_add"); 

        $toolbar.ejToolbar("enableItem", toolbar); 

    }); 

</script> 

</asp:Content> 

Sample: http://www.syncfusion.com/downloads/support/forum/130050/ze/Sample_(2)1140698967 

Note: In above sample we disable or enable the ToolBar item by using the disableItem or enableItem method of the ejToolbar 

Regards, 

Prasanna Kumar N.S.V