Currently I am yadcf on the following DOM node:
<a data-csrf="" data-pk="2031" data-role="x-editable" data-step="any" data-type="text" data-url="./ajax/update/" data-value="0" href="#" id="remaining_account_budget" name="remaining_account_budget" class="editable editable-click editable-empty">Empty</a>
with the following options:
column_data_type: "html"
column_number:7
filter_type:"range_number"
html_data_type:"value"
Is there a way to tell yadcf to use the value in data-value instead?
You can use the html5_data feature of yadcf
column_number:7,
filter_type:"range_number",
html5_data: "data-filter"
html5_data Required: false Type: String Default value: undefined Possible values: data-filter /
data-search / anything that is supported by datatables Description:
Allows to filter based on data-filter / data-search attributes of the
element, read more:
http://www.datatables.net/examples/advanced_init/html5-data-attributes.html
Take a look at the yadcf docs :)
Related
Please suggest a way for me to add link/anchor tag to the value of objects property in vue.js.
I.e. I want the word journey in the title property to have a link. Coudn't able to find a solution since I am new to vue.
My template:
<blog-post v-bind="post"></blog-post>
Vue Script:
post: {
id: 1,
title: 'My Journey with Vue'
}
You can inject HTML code into an HTML component with:
post: {
id: 1,
title: 'My Journey with Vue'
}
<span v-html="post.title"></span>
But, this method is dangerous because, if the post title value comes from an unreliable source, like an user input, it can lead to becoming the cause of possible XSS attacks.
Use v-html carefully.
The goal:
generate form fields from JSON/CMS
have a param in the JSON that allows two fields to sit next to each other on a single line
The solution so far:
I’m using Vue Formulate's schema API to generate fields. In Vue Formulate's options, I can conditionally add a class to the outer container based on a parameter in the context.
classes: {
outer(context, classes) {
if (context.attrs.colspan === 1) {
return classes.concat('col-span-1')
}
return classes.concat('col-span-2')
},
I’m using Tailwind, which requires no classname concatenation and actually want the default to be col-span-2, so if you’re inclined to copy this, your logic may vary.
With a few classes applied to the FormulateForm, this works really well. No additional wrapper rows required thanks to CSS grid:
<FormulateForm
v-model="values"
class="sm:grid sm:grid-cols-2 sm:gap-2"
:schema="schema"
/>
The schema now looks something like this:
[
{
type: 'text',
name: 'first_name',
label: 'First name',
validation: 'required',
required: true,
colspan: 1,
},
The problem/question
Vue Formulate’s schema API passes all attributes defined (other than some reserved names) down to the input element. In my case, that results in:
<div
data-classification="text"
data-type="text"
class="formulate-input col-span-1"
data-has-errors="true"
>
<div class="formulate-input-wrapper">
<label
for="formulate-global-1"
class="formulate-input-label formulate-input-label--before"
>
First name
</label>
<div
data-type="text"
class="formulate-input-element formulate-input-element--text"
>
<input
type="text"
required="required"
colspan="1" <--------------- hmm…
id="formulate-global-1"
name="first_name"
>
</div>
</div>
</div>
I recognize that I can name my attribute data-colspan so that I’m not placing a td attribute on an input, but I think of colspan as metadata that I don’t want applied to the template. Is there a way to prevent this from being applied to the input—perhaps a reserved word in the schema API that allows an object of metadata to be accessed via context without getting applied to v-bind="$attrs"?
The vue-formulate team helped me out on this one. Very grateful. Much love.
There is a way to prevent it from landing on the input, and that's to use the reserved outer-class property in the schema:
[
{
type: 'text',
name: 'first_name',
label: 'First name',
validation: 'required',
required: true,
'outer-class': ['col-span-1'],
},
This means that I don't need to do this at all:
classes: {
outer(context, classes) {
if (context.attrs.colspan === 1) {
return classes.concat('col-span-1')
}
return classes.concat('col-span-2')
},
vue-formulate supports replacing or concatenating classes via props. I managed to overlook it because I didn't recognize that everything you pass into the schema API is ultimately the same as applying a prop of that name.
Classes can be applied to several other parts of the component as well—not just the outer/container. More information here:
https://vueformulate.com/guide/theming/customizing-classes/#changing-classes-with-props
I have this html element:
Link text
I want to add data-tooltip and title attributes dynamically by condition:
Link text
Is there any way in VueJS to add multiple dynamic attributes at same time:
<!-- instead of this: -->
Link text
<!-- something like this: -->
<a href="javascript:" ...tooltipAttributes >Link text</a>
You could take advantage of v-bind on the DOM element you wish to apply multiple attributes to based on some dynamically changing condition.
Here's a Plunker example demonstrating how you might go about it.
Take note of the object returned:
computed: {
multiAttrs() {
return this.showAttrs ? {
'data-toggle': 'tooltip',
title: 'Some tooltip text',
} : null;
}
}
You should be able to use v-bind="tooltipAttributes"
the docs here https://v2.vuejs.org/v2/api/#v-bind have more info, but the key part is under usage
Dynamically bind one or more attributes, or a component prop to an expression.
From the Docs:
1. You can dynamically bind multiple attributes/props to a single element by using v-bind:
(no colon, no extra attribute, just v-bind)
<a href="#" v-bind="tooltipAttributes" >Link text</a>
2. And then declare the variable in the computed section:
(you can also declare it in the data section, but that would require manual direct value changes)
computed() {
return {
tooltipAttributes: {
title: 'Title',
'data-toggle': this.toggle === true && !disabled
}
}
}
Note: Attributes with dashes/hyphens - in them (e.g. data-toggle) need to be a string because Javascript doesn't recognize - as a valid symbol in variable naming.
This is THE SAME AS:
<a href="#" title="Title" :data-toggle="this.toggle === true && !disabled" >Link text</a>
I am using yadcf to create a filter with "select_type":"chosen"in a separate large container. As the chosen-Dropdown was rendered too small, I added "select_type_options":"width:200px;" but that has not had any effect. Does that info need to be provided in a different format - or have I hit a bug?
Its not a bug, select_type_options property type is an object, so you should feed it an object value with key/value
Fix your code from
"select_type_options":"width:200px;"
into
select_type_options: { width: '200px;' }
See from docs:
* select_type_options
Required: false
Type: Object
Default value: {}
Description: This parameter will be passed "as is" to the Chosen/Select2 plugin constructor
You can also find this in the showcase code snippet
I am loving this yadcf plugin an all its options. But for some reason, I cannot get it to filter my data. I want to type in data and have it filter on the fly. I have looked through all the examples on the yadcf site and followed them to the best of my knowledge. I am using JQuery 2.1.4, DataTables 1.10.10, and yadcf 0.8.9.beta.26.
Here is my relevant javascript:
$(document).ready(function() {
'use strict';
var table = $(".stocks").DataTable({
paging: false,
searching: false,
info: false
});
yadcf.init(table, [
{
column_number : 4,
filter_container_id: 'industrySearch',
filter_default_label: "Type industry",
filter_type: "text",
text_data_delimiter: ","
}]);
Let me know if any other code is needed.
You must remove the searching: false, from your datatables init code.
Setting searching to false disables datatables searching abilities, and since yadcf uses datatables search api under the hood that it wont work.
Read here more about this option