Forum | Appery.io

I have a grid, which is generated by a service. I map the service response to the grid.

In the grid, there is a label. But depending on what data the grid receives, it should show either just plain text, or a link.

Basically: the service returns a list of contactdetails, for example an emailaddress, next a telephonenumber, next a streetaddress.
In the "edit js" section of the list i have: $('[dsid=lblCommunicatieValue]', element).text(value);

How can i change the label to a link, or make the text on the label appear as a link if i get a telephonenumber? Should be something like a href='tel:'0456654' . But I can not set this as the label text, because then it shows as plaintext.

Can I dynamically delete the label and add a link instead, only if the value is a telephone number?

Try this. Make the mapping to Visible property of Label (not to Text property). And add this JS code to mapping.
precode
function isPhoneNumber(phone) {
var pattern = /\d{7}$&#47 //this pattern is for phone format 1234567. change this pattern for your real phone format
if (pattern.test(phone)) {
return true;
}
return false;
}

if (isPhoneNumber(value)) {
element&#46;html("<a href='tel:" + value + "' class='ui-link'>call:" + value + "<&#47;a>");
} else {
element&#46;text(value);
}

return true;
/code/pre

Sorry, I was not specific enough. The problem is not the filtering of telephonenumbers. Screenshot:

This is the javascript in the "edit js" section of the mobilegrid:

if (value.DIASType_obj == "15587.100001"){
var str=new Array();
str = value.CleanedValue.split(' ');
var telnr;
telnr = "+" + str.pop();
$('[dsid=lblCommunicatieValue]', element).text(telnr);
}
else {
$('[dsid=lblCommunicatieValue]', element).text(value.CleanedValue);
}

So the decision of wether a communicationvalue is a telephone number, is depending on the value of DIASType_obj , so i have to put this decision logic in the "edit js" section of the mobilegrid, and not the label because in the "edit js" of the label i have no access to the DIASType_obj value.

I think I should be able to delete the label with jquery and replace it with a link, anybody has an idea?

You should put this js to "Edit JS" that is near Visibility property of target Label.

Sorry, I was not specific enough. The problem is not the filtering of telephonenumbers. Screenshot:

See 2 posts above (we were crossposting).

This is the javascript in the "edit js" section of the mobilegrid:

if (value.DIASType_obj == "15587.100001"){
var str=new Array();
str = value.CleanedValue.split(' ');
var telnr;
telnr = "+" + str.pop();
$('[dsid=lblCommunicatieValue]', element).text(telnr);
}
else {
$('[dsid=lblCommunicatieValue]', element).text(value.CleanedValue);
}

So the decision of wether a communicationvalue is a telephone number, is depending on the value of DIASType_obj , so i have to put this decision logic in the "edit js" section of the mobilegrid, and not the label because in the "edit js" of the label i have no access to the DIASType_obj value.

I think I should be able to delete the label with jquery and replace it with a link, anybody has an idea?

Ok. It's clear now. Of course you can delete any element and insert another element using jquery (see http://api.jquery.com/category/manipu...). But my advice is to use "html" method instead of "text" and put any html code (including links) inside Label. For example use:
code$('[dsid=lblCommunicatieValue]', element)&#46;html("<a href='tel:" + telnr+ "' class='ui-link'>call:" + telnr+ "<&#47;a>"); /code
This code inserts link with href=tel:telnr inside Label.

Great, thanks!

I have a question on similar lines. I am showing a set of results in a grid. 2 of those columns receive binary data. If either column receives false, I want to highlight the entire row in red color.

The above example enables me to manipulate a particular cell using 'element', but how can I highlight the entire row?

Hello! In mapping to any element incide grid cell you can call entire grid cell like that:
codeelement&#46;parents("tr")&#46;eq(0)/code
To highlight entire line you can apply CSS or add any class with corresponding styles. For example:
codeelement&#46;parents("tr")&#46;eq(0).css("background", "red");/code
or
codeelement&#46;parents("tr")&#46;eq(0).addClass("className");/code

Awesome. You are a life saver!