<i class="fa-trash-o fa" /> ( from http://fortawesome.github.io/Font-Awesome/icons/ )
I want the above class to be the result for a column icon:
<xp:this.iconSrc><![CDATA[#{javascript:var class = "fa-trash-o fa";
if (rowData.isDocument() && rowData.getDocument()!= null) {
var formName = rowData.getDocument().getItemValueString("Form");
if ( formName == "Aform") {
// How can I reffer to the class? => The icon from the class will be shown. }
]]></xp:this.iconSrc>
You then shouldn't use the iconSrc / view icon setting of the column. Instead you have to compute your own HTML as a value in that column and set the FA-class depending on your column value(s). Make sure you set the content type for the column to "HTML" and not "Text".
Related
I have an array of objects, where each object has a textValue, an active, info, etc. This arrangement I walk through and show buttons for each element. To each button inside I add a div and inside 3 paragraphs, I'm trying to add classes and display some of the paragraphs by condition to each button. I add an event to the button and pass it an id, with this I set the active to true and show information, this for each different id. Clicking on a button makes an active class and shows a quantity, clicking outside or on the button itself eliminates the class and the quantity (p), when I click on a button information opens, here I have a button that when clicking, the div with the information is hidden (I already do this) and I want to keep the class visible and the paragraph visible, I'm using conditionals for this, but I can't do it, this is the code:
<button
v-for="filter in addedFilters"
:key="filter"
:value="filter.textValue"
#click="(e) => {openInfoFiltro(filter, e)}"
:class="{'filter-active': filter.active && !optionButtonValue.includes(filter.textValue), 'active-filter-options': filter.active && optionButtonValue.includes(filter.textValue)}">
<div>
<p v-if="filter.active && filter.textValue !== 'Uso de suelo' && filter.textValue !== 'Amenidades' && filter.textValue !== 'Clasificación de la tierra' & filter.textValue !== 'Vocaciones'" class="m-0">
{{ $filters.numeralFormatBtnInfo(filter.info[0]) }} - {{$filters.numeralFormatBtnInfo(filter.info[1]) }}
</p>
<p v-else-if="filter.active || filter.textValue === 'Uso de suelo' && filter.textValue === 'Amenidades' && filter.textValue === 'Clasificación de la tierra' && filter.textValue === 'Vocaciones'" class="m-0 amount">
<span v-if="filter.info">({{filter.info === 0 ? '' : filter.info }})</span>
</p>
<p class="m-0">{{filter.textValue}}</p>
</div>
</button>
function when clicking on the button and setting the active of the object to true
const openInfoFiltro = (id,e) => {
selectedFilter.value = addedFilters.value.find(val => val.textValue === id.textValue);
console.log(selectedFilter.value)
if(selectedFilter.value){
selectedFilter.value.active = !selectedFilter.value.active
}
}
array where i have the different text Value
const optionButtonValue = ['Uso de suelo', 'Amenidades', 'Clasificación de la tierra', 'Vocaciones' ]
In another component I go through provide and reject the ref, where I pass the selected filter (selectedFilter) and here I have a function where when clicked, I want the button to remain active and depending on the optionButtonValue, show one paragraph or the other, but leave it active, right here I pass the active to false to hide the information of each button
const showResults = () => {
console.log('Mostrar resultados')
landsStore.lands = []
landsStore.landsadd = []
selectedFilter.value.active = false
landsStore.fetchLands('', { filters: filtersStore.getAllFiltersAlgoliaFormat, facetFilters: filtersStore.getAllFacetFilterFormat })
}
Actually, v-if waits from you only true and false. But you are use in v-if text definition. This is not correctly. Firstly, you can change v-if only conditionally like v-if="{filter.active || filter} " also in your p tag you can type define directly change text {{ filter.active && 'bla bla' }}
I have an input component that when registered in the parent, the value is tied to a variable 'searchText'. searchText holds the text value of the search input. When I watch the {{searchText}} in the template, the variable will be updating accordingly. I'm also trying to set the value of the input through a button click. I have a list of locations and when I select one of the locations I want to update the value of the input. My issue is that although the value {{searchText}} is updating according to the text of the item I clicked, it does not update the text in my input.
How can I also set the text of the input as the text of the updated clicked item?
Search.vue
//Template
<div class="location-search-wrapper">
{{searchText}} // This updates both when I type and also when I select the item
<SearchInput :type="'text'"
:value="searchText"/> // Here the value does not update when I click the item
<div v-if="LocationSuggestionBox" class="search-suggestions">
<LocationSuggestionBox :popular-suggestions="popularSuggestions"
:city-list="searchResults"
:select-location="selectLocation"/>
</div>
</div>
//Script:
// Here the value of search text is updated according to the location selected
function selectLocation(location) {
if (location) {
searchText.value = location
}
}
SearchInput.vue
//Template
<input ref="inputField"
:type="type"
:id="fieldName"
:name="fieldName"
:placeholder="placeholder"
v-model="input"
class="form-input"/>
// Script:
const input = ref('');
(function setValueOnCreate() {
if (props.value) {
input.value = props.value;
}
})();
LocationList.vue
//Template
<div class="location-suggestion-box">
<div v-for="(city, i) in cityList"
:key="i"
:value="city"
#click="selectLocation(city)"
class="suggestion-item">
{{ city }}
</div>
</div>
// script:
props: {
cityList: {
type: Array,
required: false
},
selectLocation: {
type: Function,
required: false
}
},
Try to watch the value prop instead of using IIFE :
import {watch,ref,.....} from 'vue'
....
const input = ref('');
watch(()=>props.value,(val){
if(val){
input.value = val;
}
})
I am trying to make table cell editable after clicking on icon in another cell , for that I need to get index of element so the editor will open in the correct row , which icon belongs to.
My issue is that I dont know the way i should get the prop value of table DOM element here is code for for clearify
a part of dom tree generated with react:
<tbody>
{stepsDone.map(function(step,idx) {
let content = step;
const editing = this.state.editing;
if(editing){
content = (
<form onSubmit={this._save}>
<input type="text" defaultValue={step} />
</form>
);
}
return(
<tr key={idx}>
<td className="step" data-step={'step'+idx}>{content}</td>
<td className="icRow">
<Icon className="edit" onClick={this._showEditor} rownum={idx}/>
<Icon className="remove"/>
<Icon className="trash outline"/>
</td>
</tr>
)
},this)}
show editor function:
_showEditor(e){
this.setState({
editing:{
row:e.target.rownum
}
});
console.log(this.state.editing);
}
After execution of showedtior function console logs :
first click = null , which is normal i think
more clicks = undefined , and thats whats brings a trouble i want to receive idx from map function.
here is code from Icon.js
import React from 'react';
import classNames from 'classnames';
export function Icon(props) {
const cssclasses = classNames('icon', props.className);
return <i className={cssclasses} onClick={props.onClick}/>;
}
if you want to reveive the idx from the map function you should pass it to the function _showEditor so your code must be like this :
<Icon className="edit" onClick={this._showEditor(idx)}/>
and the function definition should be :
_showEditor = (idx) => (event) => {
this.setState({
editing:{
row:idx
}
});
console.log(this.state.editing);
}
or if you don't want to use the arrow functions for some reason, just replace
onClick={this._showEditor(idx)}
with
onClick={this._showEditor.bind(this,idx)}
and its definition becomes
_showEditor(idx){...}
Problem Statement: I want to change the display name of labels(#Html.LabelFor) in Razor view of MVC based on the display names which i get from db.
I have added the dropdown list of languages in the _Layout.cshtml
<li>#Html.Action("Index", "LanguageDropdown", new { languageid = Request["languageId"] })</li>
I have created one partial view for drop down:
#model ALCMS.Web.Models.Master_or_Configuration.LanguageDropdownModel
<script type="text/javascript">
function GetLanguage() {
var languageId = $('#LanguageId').val();
var Url = "#Url.Content("~/MasterConfigGeneral/GetLanguage")";
$.ajax({
url: Url,
dataType: 'json',
data: { LanguageId: languageId },
success: function (data) {
}
});
}
</script>
<div style="display:inline-block">
#Html.DropDownListFor(l => l.LanguageID, new SelectList(Model.Languages, "Value", "Text"), "Select Language", new { id = "LanguageId" ,onchange="GetLanguage()" })
</div>
Partial View Controller:
public ActionResult Index(string languageId)
{
//return View();
var languages = dbEntity.LookupLanguages;
var model = new LanguageDropdownModel
{
LanguageID = languageId,
Languages = languages.ToList().Select(l => new SelectListItem
{
Value = Convert.ToString(l.LanguageID),
Text = l.Name
})
};
return PartialView(model);
}
In Controller Json Result method:
public JsonResult GetLanguage(int languageID)
{
JsonResult jsResult = new JsonResult();
objdbGlobalTenant.ddlLanguage = (from lsr in dbEntity.LocaleStringResources
where lsr.LanguageID == languageID
select new SelectListItem()
{
Text = lsr.ResourceValue,
Value = lsr.ResourceName
}).Distinct().ToList<SelectListItem>();
//ViewBag.Language = objdbGlobalTenant.ddlLanguage;
jsResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return jsResult;
}
Now everything is working fine.I'm able to get the selected langaugeID in Json Result method in Controller based on the change event of Language dropdown. Based on this Language ID i'm getting display names(ResourceValue) which i need to apply for the particular view.
Problems:
1>After getting the display names from db how to change display names
of particular view when language change event triggers.?? For
ex:Currently i'm seeing the Create.CSHTML. Now if i change the
language dropdown it should trigger Json Event in controller and
after getting values it should apply the values on the view which it
got from db.
Note: Dropdown is in Layout.cshtml(like master in .aspx)
2>Drop-down which i placed in Layout.cshtml is getting refreshed
every time new view is loaded which inherits(layout.cshtml).How to
make the controller to retain it's state during postback??
3>How to get the selected drop-down item from the layout in multiple
Controllers,to change the display name in each view based on the langaugeid
of dropdown in layout
How to do this??If i'm doing wrong suggest me some other ways...
Below are the suggestions :
Issue 1 :
You may keep one attribute in each label which identifies them uniquely.
Your HTML should render like following
<!-- For English -->
<label label-unique-name="Name">Name</label>
<label label-unique-name="Surname">Surname</label>
<!-- For French -->
<label label-unique-name="Name">nom</label>
<label label-unique-name="Surname">nom de famille</label>
<!-- For Spanish -->
<label label-unique-name="Name">nombre</label>
<label label-unique-name="Surname">apellido</label>
Here label-unique-name is your attribute, which will remain fixed for each language. Now when you change the language from dropdown you will bring the values like below.
<!-- For English -->
<label-unique-name:"Name",label-value:"Name">;<label-unique-name:"Surname",label-value:"Surname">
<!-- For French -->
<label-unique-name:"Name",label-value:"nom">;<label-unique-name:"Surname",label-value:"nom de famille">
<!-- For English -->
<label-unique-name:"Name",label-value:"nombre">;<label-unique-name:"Surname",label-value:"apellido">
Please note : this is for understanding only, it's not a JSON.
Now using jQuery go through each label and replace the label's value. Hope it'll help you.
Issue 2 :
You can save the selected language's value in session, and generate your dropdown accordingly.
#Html.DropDownListFor(l => l.LanguageID, new SelectList(Model.Languages, "Value", "Text"), !string.isNullorEmpty(HttpContext.Current.Sessions["Language"]) ? HttpContext.Current.Sessions["Language"] : "Select Language", new { id = "LanguageId" ,onchange="GetLanguage()" })
I have the following in my view, using a span to show a readonly view and an input to show an edit view.
<span data-bind="{ ifnot:IsEditing, text:SystemName }"></span>
<input type="text" id="SystemName" data-bind="{ if:IsEditing, value:SystemName }" />
The IsEditing observable is evaluating to false. I'm returning JSON that has the following hierarchy.
Project
.
.
Systems (collection)
SystemName
I'm loading the value in via JQuery, creating the observable model using the following:
$.ajax({
type: "get",
url: "..",
success: function (d) {
var pList = [];
for (var p = 0, plen = d.Data.length; p < plen; p++) {
var proj = d.Data[p];
var systems = proj.Systems;
var sList = [];
proj = ko.mapping.fromJS(proj);
for (var s = 0, slen = systems.length; s < slen; s++) {
sList.push(ko.mapping.fromJS(systems[s]));
}
proj.Systems = ko.observableArray(sList);
pList.push(proj);
}
window["model"].projects(pList);
},
error: function (e) {
debugger;
alert("An error occurred");
}
});
On load, whenever the model is loaded and this expression is evaluated, both elements always show up, instead of showing the span and hiding the input. When I change this to the visible binding, only the span shows. Why is the input showing with the if binding, when IsEditing is evaluating to false?
If your IsEditing an observable the if binding should evaluate it correctly.
However the if binding should be applied on "container like" elements e.g. on elements which can have child elements.
The documentation a little bit confusing and talks about contained markup:
The if binding, however, physically adds or removes the contained markup in your DOM,
Because the input cannot have child elements the if cannot remove anything from the input. You need to wrap your input into a div and apply there the if or you can use the container-less binding syntax:
<!-- ko if: IsEditing -->
<input type="text" id="SystemName" data-bind="{ value: SystemName }" />
<!-- /ko -->
Demo JSFiddle.