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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding a clickable button to a read-only row

Thread ID:

Created:

Updated:

Platform:

Replies:

118492 Mar 12,2015 04:23 PM UTC Mar 16,2015 11:09 AM UTC ASP.NET MVC 4
loading
Tags: TreeGrid
Neil Partington
Asked On March 12, 2015 04:23 PM UTC

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.

John Rajaram [Syncfusion]
Replied On 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



Neil Partington
Replied On March 13, 2015 02:57 PM UTC

This is perfect.

Thanks for your excellent support!

Neil Partington
Replied On 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?




John Rajaram [Syncfusion]
Replied On 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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;