add hyperlink to some cells in treegrid

9 Replies
2 Participants

Created by
HZ Harry Zheng

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
TreeGrid

Created On
Oct 8, 2015 12:58 PM UTC

Last Activity On
Oct 15, 2015 04:03 AM UTC

Want to subscribe?
SIGN IN

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

9 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team 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())

</a>

</script>

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.

HZ Harry Zheng 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>

        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

MK Mahalakshmi Karthikeyan Syncfusion Team 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.

HZ Harry Zheng 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

MK Mahalakshmi Karthikeyan Syncfusion Team 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.

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.

HZ Harry Zheng 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>

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

MK Mahalakshmi Karthikeyan Syncfusion Team 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.

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.

HZ Harry Zheng October 14, 2015 07:40 PM UTC

Hi Mahalakshmi,

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

Regards,

Harry

MK Mahalakshmi Karthikeyan Syncfusion Team 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.

Need More Help?

Get personalized assistance from our support team.

Contact Support

9 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
HZ Harry Zheng
Platform
ASP.NET MVC
Control
TreeGrid
Created On
Oct 8, 2015 12:58 PM UTC
Last Activity On
Oct 15, 2015 04:03 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support