[Solved] How to specify a hyperlink URL 'template' in a GRID

[robert]

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">

[Attila Antal]

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

[robert]

<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]

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]

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

[robert]

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]

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>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.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]

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]

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