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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Adding a clickable button to a read-only row

Adding a clickable button to a read-only row

Hi,

I was hoping you could tell me if this is possible and provide a sample?

I have a tree grid control that contains various columns - I would like them all to be read-only / non editable.
But I would like to display a button in one of the columns and allow it to be clicked, the event handler being able to identify the row clicked.

Is there a way to achieve this?

Thanks.

4 Replies
JR John Rajaram Syncfusion Team March 13, 2015 07:12 AM UTC 

Hi Neil,
Thanks for using Syncfusion products.

Queries

            Syncfusion Comments

 I have a tree grid control that contains various columns - I would like them all to be read-only / non editable.

We can make the TreeGrid control as non-editable with the help of “EditSettings” property.

Please refer the below code snippets for disabling editing, adding and deleting.

Code Snippet:

@(Html.EJ().TreeGrid("Tree")

//...

.EditSettings(edit =>

       {

           edit.AllowEditing(false);

           edit.AllowAdding(false);

           edit.AllowDeleting(false);

       })

    

       .Datasource((System.Collections.IEnumerable)ViewBag.datasource)

       )

@(Html.EJ().ScriptManager())

But I would like to display a button in one of the columns and allow it to be clicked, the event handler being able to identify the row clicked.

Yes, we can render the new custom columns with buttons using the “ColumnTemplate” and JSRENDER. We can also retrieve the row items of the button clicked and that corresponding row will also get selected while clicking the button.

Please refer the below code snippets to include button custom column and get the clicked row items

Code Snippet:

<body style="position: static; margin: 0px; padding: 2px">

    <script type="text/x-jsrender" id="customColumnTemplate">

        <div style="margin-left:20px;">{{if TaskId}}<button class="clickMe">Get Row</button>{{/if}}</div>

    </script>

@(Html.EJ().TreeGrid("Tree")

//...

 .Columns(co =>

           {

               //...

co.Field("State").headerText("State")

.IsTemplateColumn(true)

.TemplateID("customColumnTemplate").Add();

           }

       )      .Datasource((System.Collections.IEnumerable)ViewBag.datasource)

       )

@(Html.EJ().ScriptManager())

<script>

       $("#Tree").on("click", ".clickMe", function (e) {

           var $tr = $(e.target).closest('tr'),

               treeObject = $("#Tree").data("ejTreeGrid"),

               $gridRows = treeObject._$gridRows,

               rowIndex = $gridRows.index($tr),

               record = treeObject._updatedRecords && treeObject._updatedRecords[rowIndex],

               id = record.item.TaskId,

               name = record.item.TaskName;

           alert("Cliked the button of '" +id+ ". " + name+"' row");

   

       });

      

   </script>

</body>

We have also prepared a sample based on this. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118492/TreeGridButtonColumn165707396.zip

Please let us know if you need more information on this.

Regards,
John. R



NP Neil Partington March 13, 2015 02:57 PM UTC

This is perfect.

Thanks for your excellent support!

NP Neil Partington March 13, 2015 08:25 PM UTC

Ah, I have come across a different issue however...

I replaced "alert" from the sample code you gave me...
           alert("Cliked the button of '" +id+ ". " + name+"' row");


with your dialog using the following...

<script>
           $("#myDialog").ejDialog({
               showRoundedCorner: true,
               enableModal: true
           });
</script>
    <div id="myDialog" title="A Dialog">
    </div>
When I do this the button press will display the dialog once fine, however subsequent presses are ignored. If I use the "alert" then it works as expected.
Is there an issue with the dialog not closing correctly, or being incompatible with the grid?




JR John Rajaram Syncfusion Team March 16, 2015 11:09 AM UTC

Hi Neil,

We have referred your code snippets and would like to let you know that, there are no any incompatibilities or issues in rendering ejTreeGrid with ejDialog or other Syncfusion controls.

We request you to refer the following code snippets for rendering ejDialog whenever button from the TreeGrid’s column is clicked.

Code snippets:

<body style="position: static; margin: 0px; padding: 2px">

<script type="text/x-jsrender" id="customColumnTemplate">

<div style="margin-left:20px;">{{if TaskId}}<button class="clickMe">Get Row</button>{{/if}}</div>

</script>

<div id="myDialog" title="A Dialog">

</div>

@(Html.EJ().TreeGrid("Tree")

//...

.Datasource((System.Collections.IEnumerable)ViewBag.datasource)

)

@(Html.EJ().ScriptManager())

<script>

$("#Tree").on("click", ".clickMe", function (e) {

var $tr = $(e.target).closest('tr'),

treeObject = $("#Tree").data("ejTreeGrid"),

$gridRows = treeObject._$gridRows,

rowIndex = $gridRows.index($tr),

record = treeObject._updatedRecords && treeObject._updatedRecords[rowIndex],

id = record.item.TaskId,

name = record.item.TaskName;

$("#myDialog").ejDialog({

showRoundedCorner: true,

enableModal: true

});

$("#myDialog").ejDialog("open");

});

</script>

</body>

</html>

We have also prepared a sample based on this for rendering the dialog box. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/118492/TreeGridButtonColumnDialog678871221.zip

Please let us know if you need more information on this.

Regards,
John. R


Loader.
Live Chat Icon For mobile
Up arrow icon