How to specify a hyperlink URL 'template' in a GRID
1 Answer 1454 Views
robert
Top achievements
Rank 1
robert asked on 28 Jul 2018, 02:11 PM
Hello, I’m trying to figure out how to specify the 'template' format for the “Report Link” below and I’ve tried a number of formats like the following but I get the “Missing attribute name” message and i've attached a word doc that shows the grid data without the template just to show that the grid is showing data, thanks for any pointers on this!

‘template'  : '<a href="#=reportLink#">#=Report Link#</a>'

 

<div id="gridAppUsers" data-role="grid"
                 data-columns="[
                                {
                                    'title'  : 'Report',
                                    'field'  : 'reportLabel'     
                                },
                                {
                                    'title'  : 'Report Link',
                                    'field'  : 'reportLink',
                                 'template'  : '<a href="#=reportLink#">#=Report Link#</a>'
                                }
                         ]"
                 data-editable="inline"
                 data-sortable="true"
                 data-scrollable="true"
                 data-selectable="single, row"
                 data-bind="source: reportDs">

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 31 Jul 2018, 01:43 PM
Hi Robert,

Thank you for the information you have provided, it helped us get a better understanding on the issue.

To work around the issue, try escaping the double quotes with a backslash inside the anchor tag (A) as the example below:
<div id="gridAppUsers" data-role="grid"
     data-columns="[{
                        'title'  : 'Report Link',
                        'field'  : 'reportLink',
                        'template' : '<a href=\"#=reportLink#\">#=Report_Link#</a>'
                     }]">
</div>


When creating template columns, it often contains HTML elements with double quotes and are conflicting with the double quotes of the parent element. 

E.g. data-column="[ 'template' : '<a href="link.html">Link</a>' ]" - parsing this would be different as the application reads from the first double quote to the second and would end up with the following results: First part would be intercepted as "[ 'template' : '<a href=" while the second part as ">Link</a>' ]"

Should you have further queries, please do not hesitate to contact us back.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
robert
Top achievements
Rank 1
commented on 01 Aug 2018, 11:19 AM

 
<a href="http://intweb01/Reports/Pages/Report.aspx?ItemPath=%2fPersonnel+Security%2fAgency+Tier+Reinvestigation+Due+Date+Report&ViewMode=Detail">Report Link</a>
            var dqt = '"';
            kendo.ui.progress($('#app-main'), true);                                            //wrkip-may2018 begin
            $.when(Bip.Svc.BipDa.GetReportModel(1)).done(function (iBipItemData) {
                var bItems = iBipItemData.bipItems;
                var bItemArr = [];
                if (bItems && bItems.length > 0)
                {
                    for (var i = 0; i < bItems.length; i++)
                    {
                        var href = "<a href=" + dqt + bItems[i].reportLink.trim() + dqt + ">Report Link</a>"
                        bItemArr.push({
                            reportId:    bItems[i].reportId,
                            reportLabel: bItems[i].reportLabel,
                            reportLink:  href
                        });
                    }
                }
                kendo.ui.progress($('#app-main'), false);
 
                var ds2 = new kendo.data.DataSource({
                    data: bItemArr,
                    schema: {
                        model: that.createReportModel()
                    }
                });
                that.set('reportDs', ds2);
 
                var xxx = 1;
            }).fail(function (error) {
                kendo.ui.progress($('#app-main'), false);                                       //wrkip-may2018 end
            });
 
            var greportDs = that.reportDs;
 
 
<div class="report-container">
    <div style="margin:5px;">
        <div id="gridAppUsers" data-role="grid"
             data-columns="[
 
                            {
 
                                'title'  : 'Report',
                                'field'  : 'reportLabel'     
 
                             
                            },
                            {
 
                                'title'  : 'Report Link',
                                'field'  : 'reportLink',
                              'template' : 'reportLink' 
                                               
                            }
 
                           ]"
             data-editable="inline"
             data-sortable="true"
             data-scrollable="true"
             data-selectable="single, row"
             data-bind="source: reportDs">
 
        </div>
    </div>
</div>
robert
Top achievements
Rank 1
commented on 01 Aug 2018, 11:24 AM

Hi Attila, I tried many combinations of that template format and so I tried formatting the "href" up front in the code post above this one and then just showing the 'template' : 'reportLink', but no luck there, but i'm wondering if there is a way to format the "href" up front like this so i don't have to build the "href" in the HTML? thanks again Attila!
Attila Antal
Telerik team
commented on 03 Aug 2018, 03:13 PM

Hi Robert,

At this point I would advise you isolate the problem into a sample project and send it back to us via a formal support ticket where the support team will investigate the issue further and provide you with a follow-up on that. Once the solution is found, we can share that in this forum thread to make it available for everyone.

We look forward to hearing from you.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
robert
Top achievements
Rank 1
commented on 03 Aug 2018, 04:19 PM

Hi Attila, I will try to create a project but I've never created one before, especially an "inline" project which seems to be a different syntax format than most of the examples i've seen, but in the mean time, I created the complete hyperlink URL reference before getting to the HTML page, so it should just be a matter of referencing a field, so please take a look at the attachment and let me know if this approach might simply the 'template' : format ok? thanks again Attila!
robert
Top achievements
Rank 1
commented on 03 Aug 2018, 07:08 PM

Ok Attila, i'm going to see if I can convert this http://dojo.telerik.com/oceZO example into the same syntactical format i'm using:
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
    $(function() {
       
      $("#grid").kendoGrid({
        dataSource: {
          data: [{
            Id: 1,
            FirstName: "John",
            LastName: "Doe",
            Address: "First St."
          },{
            Id: 2,
            FirstName: "Jane",
            LastName: "Doe",
            Address: "Second St."
          }]
        },
        columns: [{
          field: "Id"
        }, {
          field: "FirstName",
          template: "<a href='\\\#' class='name-link'>#= FirstName #</a>"
        }, {
          field: "LastName"
        }]
      }).on("click", "a.name-link", function() {
        var tr = $(this).closest("tr");
        var dataItem = $("#grid").data("kendoGrid").dataItem(tr);
         
        window.alert(dataItem.Address);
      });
       
    });
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>
robert
Top achievements
Rank 1
commented on 06 Aug 2018, 02:04 PM

Hi Attila, i was able to get the hyperlink page popup working by using the 'edit' button and associated 'save:' functionality and now i'm trying to figure out how to change the 'edit' button title to 'link' and also not have the "Update" button pop up?

Here's the title of the new post: "How to modify the GRID 'Edit' button and save: functionality?", thanks again Attila!

Eyup
Telerik team
commented on 07 Aug 2018, 01:16 PM

Hello Robert,

I'm glad you've managed to resolve the initial issue. 
You will get a reply to the remaining questions in the other thread and I suggest that we continue this technical conversation there.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
robert
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or