How to specify a hyperlink URL 'template' in a GRID

9 posts, 0 answers
  1. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 28 Jul 2018 Link to this post

    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">
  2. Attila Antal
    Admin
    Attila Antal avatar
    590 posts

    Posted 31 Jul 2018 Link to this post

    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.
  3. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 01 Aug 2018 in reply to Attila Antal Link to this post

     
    <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>
  4. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 01 Aug 2018 in reply to robert Link to this post

    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!
  5. Attila Antal
    Admin
    Attila Antal avatar
    590 posts

    Posted 03 Aug 2018 Link to this post

    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.
  6. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 03 Aug 2018 in reply to Attila Antal Link to this post

    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!
  7. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 03 Aug 2018 in reply to robert Link to this post

    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>
  8. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 06 Aug 2018 Link to this post

    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!

  9. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 07 Aug 2018 Link to this post

    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.
Back to Top