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

edit and delete lock


How to hide/lock the edit and delete tool in grid  if i select a particular column on the grid at code begaind. 

6 Replies

GV Gowthami V Syncfusion Team March 21, 2016 12:33 PM UTC

Hi Alavudeen,

Thanks for using Syncfusion products.

From your query we suspect that you want to dynamically disable the tollbaritems from the grid which is already discussed in the below KB link,

https://www.syncfusion.com/kb/5450/how-to-disable-or-enable-toolbar-items-in-the-grid

Before proceed with your requirement “Disable toolbaritems by selecting the column” we need below details,

1.       Are you want to disable the toolbar item based on the HeaderText/Field name or particular cell value of the selected column?

2.       You have mentioned like code behind, did you expect to disable the tool bar items using server side events?

3.       Kindly explain your scenario clearly and share the code example that you have tried in your application.

4.       Screenshot of the your requirement.

The provided information will help to analyze the issue and provide you the response as early as possible.

Regards,

Gowthami V.



AL alavudeen March 21, 2016 03:06 PM UTC

FIRST THANK FOR YOUR REPLAY.

I want to
disable the toolbar item especially delete and edit icon based on  particular cell value of the selected column at server side which means 

(server side events).

hear i attach my old asp grid i want to replace to  syncfusion grid.

i want same functionality in syncfusion grid.

PLEASE REFER THE ATTACHMENT I THINK IT CAN EXPLAIN MY PROBLEM  CLEARLY.



Attachment: Capturedddddddddddddddddddd_71453e14.7z


GV Gowthami V Syncfusion Team March 22, 2016 11:48 AM UTC

Hi Alavudeen,

We can disable the toolbar items using “disableItem” method of the ejToolbar in the RowSelecting event as follows,

<ej:Grid ID="Grid" runat="server" AllowPaging="True">

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

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

. . . .
. . . .

         <ClientSideEvents RowSelecting="rowselect"/>
     </ej:Grid>

<script type="text/javascript">

function rowselect(args)

        {

            //Gets the ToolBar.

            var $toolbar = $("#<%= Grid.ClientID %>_toolbarItems");

            if (!args.data.Verified) {

                // Enables or disables the call based on the status.

                $toolbar.ejToolbar("disableItem", $("#<%= Grid.ClientID %>_edit"));

                $toolbar.ejToolbar("disableItem", $("#<%= Grid.ClientID %>_delete"));

            }

            else {

                // Enables or disables the call based on the status.

                $toolbar.ejToolbar("enableItem", $("#<%= Grid.ClientID %>_edit"));

                $toolbar.ejToolbar("enableItem", $("#<%= Grid.ClientID %>_delete"));

            }

        }
</script>


In the above code example we have disabled the toolbar item using “disableItem” method and enable the toolbar item using “enableItem” method.

[OR]

If you want to use the command column concept as you have used in your previous grid like edit and delete button in the column then we can disable the button based on the row value as follows,


    <ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true" AllowFiltering="true" AllowSorting="true">

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

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

        <Columns>

<ej:Column HeaderText="Manage Column" IsUnbound="True" Width="130">

                    <Command>

                        <ej:Commands  Type="edit">

                            <ButtonOptions ContentType="ImageOnly" PrefixIcon="e-edit" Text="Edit"></ButtonOptions>

                        </ej:Commands>

                        <ej:Commands Type="delete">

                            <ButtonOptions ContentType="ImageOnly" PrefixIcon="e-delete" Text="Delete"></ButtonOptions>

                        </ej:Commands>

                        <ej:Commands Type="save">

                            <ButtonOptions ContentType="ImageOnly" PrefixIcon="e-update" Text="Save"></ButtonOptions>

                        </ej:Commands>

                        <ej:Commands Type="cancel">

                            <ButtonOptions ContentType="ImageOnly" PrefixIcon="e-cancel" Text="Cancel"></ButtonOptions>

                        </ej:Commands>

                    </Command>

                </ej:Column>                <ej:Column Field="OrderID" IsPrimaryKey="true"   Width="90" />

                <ej:Column Field="Verified" Width="100" />

            
         </Columns>
. . . .

<ClientSideEvents  RowDataBound="dataBound" Create="create" ActionComplete ="complete"/>

     </ej:Grid>

 

    <script type="text/javascript">

        function dataBound(args) {

            //Adding custom class for the ejButton based on the field Verified

            if (args.data.Verified)

                args.row.find("td.e-unboundcell").find(".e-button").addClass("greenClass");

            else

                args.row.find("td.e-unboundcell").find(".e-button").addClass("redClass");

        }


        function customizeButton() {

            //Customize the background-colur and text for the ejButton

            $(".greenClass").ejButton({ enabled:true });    

            $(".redClass").ejButton({ enabled:false });    

        }

        function create(args)

        {

            customizeButton();

        }

     

        function complete(args) {

            customizeButton();

        }

        </script>
   


In the above code example we have disabled the button based on the Verified column value and disabled the editing.

We have created a sample with the above two scenarios and the same can be downloaded from the following link.

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_(2)1490350751.zip

Regards,

Gowthami V.



AL alavudeen March 22, 2016 12:18 PM UTC

THANK YOUUUUUUUUUUUU  Gowthami. I got a answer is perfectly fit to my recruitment.
i have a another question how to create a tabitems using sql server.


AL alavudeen March 22, 2016 12:20 PM UTC

sry requirement


GV Gowthami V Syncfusion Team March 23, 2016 02:15 PM UTC

Hi Alavudeen,


Query 1: I got an answer is perfectly fit to my requirement.


Thanks for your update.


Get back to us if you need further assistance.

Query 2: how to create a tabitems using sql server.

We have provided solution for this query in F123476. So kindly follow-up with the specified forum for more details.


Regards,


Gowthami V.


Loader.
Live Chat Icon For mobile
Up arrow icon