This is a migrated thread and some comments may be shown as answers.

Attributes template and regex (Grid columns)

9 Answers 718 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Karol
Top achievements
Rank 1
Karol asked on 26 Nov 2020, 09:35 PM

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

9 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 30 Nov 2020, 09:19 AM

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/.

0
Karol
Top achievements
Rank 1
answered on 30 Nov 2020, 10:09 AM

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

----

0
Karol
Top achievements
Rank 1
answered on 30 Nov 2020, 10:13 AM
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?
0
Karol
Top achievements
Rank 1
answered on 30 Nov 2020, 10:14 AM
PS 2. Checked with full JS build. same error.
0
Karol
Top achievements
Rank 1
answered on 30 Nov 2020, 10:38 AM
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.
0
Tsvetomir
Telerik team
answered on 02 Dec 2020, 09:53 AM

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/.

0
Tsvetomir
Telerik team
answered on 02 Dec 2020, 10:28 AM

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/.

0
Karol
Top achievements
Rank 1
answered on 02 Dec 2020, 10:51 AM

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.

0
Tsvetomir
Telerik team
answered on 03 Dec 2020, 04:27 PM

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/.

Tags
Grid
Asked by
Karol
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Karol
Top achievements
Rank 1
Share this question
or