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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

add hyperlink to some cells in treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

120725 Oct 8,2015 12:58 PM UTC Oct 15,2015 04:03 AM UTC ASP.NET MVC 9
loading
Tags: TreeGrid
Harry Zheng
Asked On October 8, 2015 12:58 PM UTC

Hi,

In treegrid, I'd like to have the function like this:
I want to be able to add hyperlink to one cell (for example, customerID) for each row. When I click the cell (customerID) for any row, it should make ajax call and send the data of that row to server.
I wonder if this is supported in treegrid or grid.
I am using asp.net mvc 5, .Net framework 4.5, Syncfusion 13.2.0.39, visual studio 2013, IE 11.

Thank you,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On October 9, 2015 08:43 AM UTC

Hi Harry,

It is possible to populate custom column with hyperlink in TreeGrid Control with the help of Column Template and we can get the current row data with the help of “QueryCellInfo” client side event. Please refer the below code example for details.

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

//…

.Columns(co =>

        {

co.Field("customerID").HeaderText("CustomerID").IsTemplateColumn(true).TemplateID("CustomColumn").Add();

        }

 )

)

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

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

        {{if customerID}}

        <a rel='nofollow' href="#" class="linkbtn">

            {{:#data['customerID']}}

        </a>           

        {{/if}}

    </script>

    <script type="text/javascript">

        function querycellinfo(args) {

            if (args.column.field === "customerID" && args.cellValue != null) {

                $(args.cellElement).find(".linkbtn").click(function () {

                    $.ajax({

                        type: "POST",

                        url: "/TreeGrid/serverMethod",

                        data: args.data,

                        dataType: "json"

                    });

                })

            }

        }

    </script>

Here we have created hyper link column using column Template and bound the click event in the QueryCellInfo client side event.

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120725/ze/TreeGridwithCustomColumn-1697378190.zip

Regards,

Mahalakshmi K.


Harry Zheng
Replied On October 9, 2015 07:00 PM UTC

Hi Mahalakshmi,

Thank you for the solution. I can create hyperlink on customerID column by following your solution, but when I click any customerID, it does not go to
the url  specified in ajax call (url: "/TreeGrid/serverMethod"). The following is my code:

<script type="text/x-jsrender" id="CustomColumn">
        {{if CustomerID}}
        <a rel='nofollow' href="#" class=".linkbtn">
            {{:#data['CustomerID']}}
        </a>
        {{/if}}
    </script>

    <script type="text/javascript">


        function queryCellInfo(args)
        {
            if (args.column.field==="CustomerID" && args.cellValue!=null) {
                $(args.cellElement).find(".linkbtn").click(function(){
                    $.ajax({
                        type:"POST",
                        url:'@Url.Content("~/Forecast/ForecastSplitChildDisplay/")',
                        data:args.data,
                        dataType:"json",
                        success: function(data){
                            alert("Successful!");
                        }
                    });
                })
            }
        }

</script>


Thanks,

Haryy


Mahalakshmi Karthikeyan [Syncfusion]
Replied On October 12, 2015 11:52 AM UTC

Hi Harry,

We must use the same type of argument in the server method that we pass from the client side as data (in the AJAX post “data: args.data.item”) for manipulation to get a success alert from the AJAX call. Please refer the below code example for details.

[CSHTML]

function querycellinfo(args) {

            if (args.column.field === "customerID" && args.cellValue != null) {

                $(args.cellElement).find(".linkbtn").click(function () {

                    $.ajax({

                        type: "POST",

                        url: "/TreeGrid/serverMethod",

                        data: args.data.item,

                        dataType: "json",

                        success: function (data) {

                            alert("Successful!");

                        }

                    });

                })

            }

        }


[CS]

[HttpPost]

        public ActionResult serverMethod(BusinessObject obj)

        {

            // manipulation goes here

            return Json(obj, JsonRequestBehavior.AllowGet);

        }

//…

public class BusinessObject

        {

            public string StartDate { get; set; }

            public int duration { get; set; }

            public int TaskID { get; set; }

            public string TaskName { get; set; }

            public string Progress { get; set; }

            public string customerID { get; set; }

            public List<BusinessObject> Children { get; set; }

        }

Here “args.data.item” is object type data and the argument of “serverMethod” is same object type.

We have also modified the sample and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC5TreeGrid626554149

Regards,

Mahalakshmi K.


Harry Zheng
Replied On October 12, 2015 12:48 PM UTC

Hi Mahalakshmi,

I changed the code accordingly, but still not working. The ajax call did not even trigger the server method.
Let's try another way without ajax call. If I just need that hyperlink linked to another action method, when I click that hyperlink, it pass the args.data.item as argument to that action method, then refresh the whole page. 
How can we accomplish that?

Thanks,

Harry 

Mahalakshmi Karthikeyan [Syncfusion]
Replied On October 13, 2015 12:42 PM UTC

Hi Harry,
Query 1: I changed the code accordingly, but still not working. The Ajax call did not even trigger the server method.
Solution: we were not able to reproduce this scenario. We can able to call server method and we successfully returned the data from server. Can you please modify the below attached sample along with the replication procedure to reproduce the issue.
Query 2:  If I just need that hyperlink linked to another action method, when I click that hyperlink, it pass the args.data.item as argument to that action method, then refresh the whole page. 
Solution: We can call the action method internally in the link button click event with the argument of args.data.item. And we can refresh the TreeGrid With the help of “refresh” public method. Please refer the below code example for details.

<script type="text/javascript">

        function querycellinfo(args) {

            if (args.column.field === "customerID" && args.cellValue != null) {

                $(args.cellElement).find(".linkbtn").click(function () {

                    refreshTreeGrid(args.data.item);

                })

            }

        }

        function refreshTreeGrid(item) {

            var obj = $("#TreeGridContainer").data("ejTreeGrid");

            obj.refresh();

        }

    </script>

We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC5TreeGrid-1921268152
Regards,
Mahalakshmi K.

Harry Zheng
Replied On October 13, 2015 06:47 PM UTC

Hi Mahalakshmi,

Maybe I did not describe clearly. Please ignore my previous description.
Essentially, I want to add hyperlink to the CustomerID column for each row in the treegrid.
That hyperlink should link to my action method (~/Forecast/ForecastSplitChild/), and pass row data as arguments to that method.
My current code is like this(did not work):

<script type="text/x-jsrender" id="CustomColumn">
        {{if CustomerID}}
        <a rel='nofollow' href="#" class=".linkbtn">
            {{:#data['CustomerID']}}
        </a>
        {{/if}}
    </script>

 function queryCellInfo(args)
        {
            if (args.column.field==="CustomerID" && args.cellValue!=null) {
                $(args.cellElement).find(".linkbtn").click(function () {
                    var id = args.data.CustomerID;
                    var year = args.data.Year;
                    var month = args.data.Month;
                    window.location.rel='nofollow' href = '@Url.Content("~/Forecast/ForecastSplitChild/")'+ id +"/" + year + "/" + month;
                    })
            }
        }

This did not work. Could you modify my code and point out where I did wrong?
Thanks,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On October 14, 2015 04:34 PM UTC

Hi Harry,

We cannot return anything from the server by triggering the Action Method with windown.Location.rel='nofollow' href and the recommended way to call the Server method with the help of AJAX post call, we can successfully call the server method in AJAX post and in the success method of AJAX call we have displayed the results returned from the server. Please find the below code example for details.

<script type="text/javascript">


        function querycellinfo(args) {

            if (args.column.field === "customerID" && args.cellValue != null) {

                $(args.cellElement).find(".linkbtn").click(function () {

                    $.ajax({

                        type: "POST",

                        url: "/TreeGrid/serverMethod",

                        data: args.data.item,

                        dataType: "json",

                        success: function (data) {

                            alert("The " + data.TaskID +" Id has been Clicked and the Task Name Of this id is "+ data.TaskName);

                        }

                    });

                })

            }

        }    </script>


[CS]

[HttpPost]

        public ActionResult serverMethod(BusinessObject obj) {           

            return Json(obj, JsonRequestBehavior.AllowGet);

        }

And we have also attached the screen shot of this alert message and that can be find from the following location.

File Location: http://www.syncfusion.com/downloads/support/directtrac/general/ze/screenshot-2078820643

We have also prepared a sample based on this and you can find the sample under the following location

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC5TreeGrid-871349065

if you still face any issue please get back to us by modifying this sample along with the replication procedure to reproduce it.

Regards,

Mahalakshmi K.


Harry Zheng
Replied On October 14, 2015 07:40 PM UTC

Hi Mahalakshmi,

Thank you very much for your solution. It's working!
Regards,

Harry


Mahalakshmi Karthikeyan [Syncfusion]
Replied On October 15, 2015 04:03 AM UTC

Hi Harry,

Thanks for the update.

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.


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.

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

;