Attributes template and regex (Grid columns)

[Karol]

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

[Tsvetomir]

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

[Karol]

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

----

[Karol]

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?

[Karol]

PS 2. Checked with full JS build. same error.

[Karol]

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.

[Tsvetomir]

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

[Tsvetomir]

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

[Karol]

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.

[Tsvetomir]

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