We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid tool bar button add button disable - enable

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



3 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team April 19, 2017 09:07 AM UTC

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> 



Refer to the Help document for the dataBound event.  


Regards, 
Prasanna Kumar N.S.V 



PR Pratheep April 20, 2017 07:29 PM UTC

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





PK Prasanna Kumar Viswanathan Syncfusion Team April 21, 2017 08:48 AM UTC

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> 



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 


Loader.
Up arrow icon