Using javascript to popup a webpage withing a grid

1 Answer 114 Views
Grid
GORAN
Top achievements
Rank 1
Iron
GORAN asked on 10 May 2023, 02:30 PM | edited on 10 May 2023, 08:43 PM

Good day all!

trying to pop up to a new webpage from a grid. I want to pop it up in a controlled manner meaning not new window or tab rather just set the parameters of the window; hence I am using a javascript to do the window popup. 

 

Anyways here is how I am building it:

 


columns.Bound(p => p.Tracking).ClientTemplate(
    "<a style='text-decoration:underline' target='_blank' href='javascript:popWindow('../myHinkleyCust/HLI_Tracking.aspx?Close=1&HideMenu=1&o= #= OrderNumber # ')'>Tracking" + "</a>"
    ).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "fw-bold text-center" }).Width(125);

However the script doesn't build correctly and my javascript looks like this: 

In other words it breaks at the first ' 

 

Any help would be much appreciated :)

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Anton Mironov
Telerik team
answered on 15 May 2023, 07:01 AM

Hi Goran,

Thank you for the code snippet, image, and details provided.

Could you please share more details on the requirements? I am not sure which parameters should be used and how the window should work.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

GORAN
Top achievements
Rank 1
Iron
commented on 15 May 2023, 08:38 PM

Sorry for the delay. Yes the link in question is the one called tracking and it should look like this: 

 


javascript:popWindow('/hli/myHinkleyCust/HLI_Tracking.aspx?Close=1&HideMenu=1&o=%203260606%27)

And the JavaScript is this: 


 function popWindow(theURL) {
        var width = 1024
        var height = 768
        newWindow = window.open
            (theURL, '_blank', 'toolbar=no,menubar=no,resizable=yes,scrollbars=yes,status=no,location=yes,width=' + width + ',height=' + height);
    }
Thanks! 
Anton Mironov
Telerik team
commented on 18 May 2023, 12:26 PM

Hi Goran,

Thank you for the code snippets and additional details provided.

I assume, there is a link that should be opened in a new browser window(small popup). In the new window, a specific link should be opened, depending on a property of the dataItem. The property could not be presented in the Grid if needed. However, it is available for the case.

If this is the case, I would recommend using the following approach.

Let's say, we have the following populated Model for the Grid:

		public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
		{
			var result = new List<OrderViewModel>();

			OrderViewModel order1 = new OrderViewModel() { OrderID = 1, TrackingSite = "https://www.google.com/" };
			OrderViewModel order2 = new OrderViewModel() { OrderID = 2, TrackingSite = "https://www.telerik.com/" };
			OrderViewModel order3 = new OrderViewModel() { OrderID = 3, TrackingSite = "https://docs.telerik.com/kendo-ui/introduction" };
			OrderViewModel order4 = new OrderViewModel() { OrderID = 4, TrackingSite = "https://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods" };
			OrderViewModel order5 = new OrderViewModel() { OrderID = 5, TrackingSite = "https://feedback.telerik.com/themes" };

			result.Add(order1);
            result.Add(order2);
            result.Add(order3);
            result.Add(order4);
            result.Add(order5);


            return Json(result.ToDataSourceResult(request));
		}

The "TrackingSite" property keeps the link for the item.

In the Grid, we could set the following command column:

columns.Command(command => command.Custom("Tracking").Click("showTracking")).Width(180);

In the Click Event of the custom command button, we could get the value of the property per the item and open it in a browser window as follows:

    function showTracking(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        window.open(dataItem.TrackingSite, "", "width=400,height=500");
    }
Attached is a sample project that I prepared for the case. It implements the approach above.

Feel free to make the needed tests on your side and let me know if this is the desired result.

 

Best Regards,
Anton Mironov

GORAN
Top achievements
Rank 1
Iron
commented on 31 May 2023, 02:15 PM

Thanks man! That worked for me! Much appreciated! 
Anton Mironov
Telerik team
commented on 05 Jun 2023, 07:43 AM

Hi Goran,

Thank you for the kind words!

If further information or assistance is needed, do not hesitate to contact me and the team.

Best Regards,
Anton Mironov
Tags
Grid
Asked by
GORAN
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or