Using javascript to popup a webpage withing a grid

[GORAN]

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 :)

 

[Anton Mironov]

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

[GORAN]

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]

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]

Thanks man! That worked for me! Much appreciated! 

[Anton Mironov]

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