Attributes template and regex (Grid columns)

10 posts, 0 answers
  1. Karol
    Karol avatar
    9 posts
    Member since:
    Oct 2020

    Posted 26 Nov 2020 Link to this post

    Hi

    I have custom columns defined for Grid table:

    columns: [
    {
    field: "ID",
    width: 50,
    filterable: false,
    attributes: {"data-test":'#=ID#'},
    media: "(min-width: 900px)"
    },
    {
    field: "IDstatus",
    width: 50,
    filterable: false,
    attributes: {"data-status": '#=Status#'},
    media: "(min-width: 600px and max-width: 900px)"
    },

     

    What I would like to do is to change 'Status" in attributes by taking out parts of code/text from it, but when I try to get this to work in this way:
    attributes: {"data-status": '# var z = Status; var re = /<span.*?<\/span>/gm; z = String(z).replace(re, ""); # #=z#'},
    … it throws "Invalid template" error.

    I was trying to escape quotations, add quotations or remove them, even using non-regex replace but with no success.

    Is it possible to just get "review" from this cell to fill in "data-status" attribute?

     

    Status cell is rendered on PHP page as:
    <td><span class="k-icon k-i-track-changes-enable"></span> review</td>

     

    -- 

     

    Thank you in advance for your reply,

    Karol Kaminski

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    847 posts

    Posted 30 Nov 2020 Link to this post

    Hi Karol,

    Thank you for the provided details and examples. I have created a sample where the value was not replaced as expected due to the fact that the RegEx returns the fully matched string "<td> value</td>". It appears that this might have caused the error on your side. 

    Nevertheless, I slightly modified the snippets and achieved the desired scenario. Please take a look at the following Dojo sample:

    https://dojo.telerik.com/IZEPaTeW

    I hope you find this helpful.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Karol
    Karol avatar
    9 posts
    Member since:
    Oct 2020

    Posted 30 Nov 2020 in reply to Tsvetomir Link to this post

    Hi

     

    Thank you for help but there are issues still :(

    Developer tools show that attribute is filled correctly:
    ----
    <tr class="old">
    <td>36</td>
    <td data-status="review" style="display: none;">36</td><td data-order="0"><img src="images/noimage-op.png" title="thumbnail missing" width="64px"></td>
    <td>Test title</td>
    <td><span class="k-icon k-i-file-txt"></span> News story</td>
    <td><span class="k-icon k-i-track-changes-enable"></span> review</td>
    <td>kakamins</td><td style="display: none;">Items</td>
    </tr>
    ----
    But I am seeing lot of errors in console:
    ----
    jquery.min.js:2 Uncaught TypeError: Cannot read property '1' of null
        at Object.eval (eval at compile (kendo.custom-index.min.js:1), <anonymous>:3:526)
        at i (jquery.min.js:2)
        at init._rowsHtml (kendo.custom-index.min.js:16)
        at init._renderContent (kendo.custom-index.min.js:17)
        at init.refresh (kendo.custom-index.min.js:16)
        at init.i (jquery.min.js:2)
        at init.trigger (kendo.custom-index.min.js:1)
        at init._process (kendo.custom-index.min.js:3)
        at init.success (kendo.custom-index.min.js:3)
        at Object.success (kendo.custom-index.min.js:3)
    eval @ VM8520:3
    i @ jquery.min.js:2
    _rowsHtml @ kendo.custom-index.min.js:16
    _renderContent @ kendo.custom-index.min.js:17
    refresh @ kendo.custom-index.min.js:16
    i @ jquery.min.js:2
    trigger @ kendo.custom-index.min.js:1
    _process @ kendo.custom-index.min.js:3
    success @ kendo.custom-index.min.js:3
    success @ kendo.custom-index.min.js:3
    read @ kendo.custom-index.min.js:2
    (anonymous) @ kendo.custom-index.min.js:3
    _queueRequest @ kendo.custom-index.min.js:3
    read @ kendo.custom-index.min.js:3
    query @ kendo.custom-index.min.js:3
    _query @ kendo.custom-index.min.js:3
    fetch @ kendo.custom-index.min.js:3
    _continueInit @ kendo.custom-index.min.js:12
    init @ kendo.custom-index.min.js:12
    (anonymous) @ kendo.custom-index.min.js:2
    each @ jquery.min.js:2
    each @ jquery.min.js:2
    e.fn.<computed> @ kendo.custom-index.min.js:2
    (anonymous) @ index.php:558
    e @ jquery.min.js:2
    t @ jquery.min.js:2
    setTimeout (async)
    S.readyException @ jquery.min.js:2
    (anonymous) @ jquery.min.js:2
    e @ jquery.min.js:2
    t @ jquery.min.js:2
    setTimeout (async)
    (anonymous) @ jquery.min.js:2
    c @ jquery.min.js:2
    fireWith @ jquery.min.js:2
    fire @ jquery.min.js:2
    c @ jquery.min.js:2
    fireWith @ jquery.min.js:2
    t @ jquery.min.js:2
    setTimeout (async)
    (anonymous) @ jquery.min.js:2
    c @ jquery.min.js:2
    fireWith @ jquery.min.js:2
    fire @ jquery.min.js:2
    c @ jquery.min.js:2
    fireWith @ jquery.min.js:2
    ready @ jquery.min.js:2
    B @ jquery.min.js:2
    [Violation] Forced reflow while executing JavaScript took 36ms

    ----

  4. Karol
    Karol avatar
    9 posts
    Member since:
    Oct 2020

    Posted 30 Nov 2020 in reply to Karol Link to this post

    PS. Link to kendo JS I use:
    https://fenixproductions.pl/files/temp/kendo/kendo.custom-index.min.js

    Maybe I need some additional controls for it?
  5. Karol
    Karol avatar
    9 posts
    Member since:
    Oct 2020

    Posted 30 Nov 2020 in reply to Karol Link to this post

    PS 2. Checked with full JS build. same error.
  6. Karol
    Karol avatar
    9 posts
    Member since:
    Oct 2020

    Posted 30 Nov 2020 Link to this post

    Hi

    I've made small page with my errors:
    https://fenixproductions.pl/files/temp/kendo/kendoerror.zip

    In line #185 I have commented out your solution to show you how table should behave (filtering with own templates).
    If I comment i#184 and uncomment #185… everything breaks (no pager, no filters) despite the data-status being set properly for hidden second column.
  7. Tsvetomir
    Admin
    Tsvetomir avatar
    847 posts

    Posted 02 Dec 2020 Link to this post

    Hi Karol,

    Thank you for the provided sample project. I am currently investigating the issue and I would require additional time to find out exactly what is the root of the problem. I will get back to you immediately I have any resolutions.

    Thank you for your patience.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  8. Tsvetomir
    Admin
    Tsvetomir avatar
    847 posts

    Posted 02 Dec 2020 Link to this post

    Hi Karol,

    I have closely investigated the problem and I have noticed that the data used in the example differs from the one that you have provided in your previous post. The previous one had TD tags in the values, hence, I built the RegExp based on the TD element. Since the real data does not contain such values, the RegExp did not match the correct values, therefore, leading to a JavaScript error. 

    What I have come up with as a solution is the following:

    1. Add the following JavaScript function that removes the unnecessary HTML elements:

    		function stripHtml(html)
    		{
    			let tmp = $("<div></div>");
    			return tmp.html(html).text().trim();
    		}

    2. Call the function from the attributes section of the column:

    attributes: {"data-status": "#=stripHtml(Status)#"},
    

    Give this approach a try and let me know how it works out for you.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  9. Karol
    Karol avatar
    9 posts
    Member since:
    Oct 2020

    Posted 02 Dec 2020 in reply to Tsvetomir Link to this post

    Works now Thank you.

     

    Looks like simplest solution is the best.

    Dunno why instead of new function "outside" I had insisted in making everything inside columns definition.

     

    Thank you very much.

  10. Tsvetomir
    Admin
    Tsvetomir avatar
    847 posts

    Posted 03 Dec 2020 Link to this post

    Hi Karol,

    It is possible for you to include the JavaScript function inside the attributes option, however, this might lead to poor readability and slightly more difficult debugging. More information on how to include it in the template can be found in the following article:

    https://docs.telerik.com/kendo-ui/framework/templates/overview#template-syntax

     

    Best regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top