add hyperlink to some cells in treegrid

[Harry Zheng]

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]

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]

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]

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]

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]

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]

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]

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]

Hi Mahalakshmi,

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

Regards,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

Thanks for the update.

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

Regards,

Mahalakshmi K.