Having same issue as in thread below but I didn't want to comment on a 2 year old question.
yadcf - custom_select selectize bizarre behavior
I am using yadcf filter type multi select and I am trying to Initialise bootstrap_select as a custom_ select plugin. The custom select is being created fine but I am having the following issues: On page load it looks like this. When you select an option, it duplicates the two list boxes each time like this. See code below. Note: I am using the most recent version of yadcf.
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({});
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
});
Is there any solution to this issue or is it yet to be resolved.
I was able to solve this myself. See below for anyone trying to use bootstrap_select with yadcf custom_select.
Initialise initSelectPluginCustomTriggers like below.
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({});
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
});
And for your column using multi_select, have as below:
yadcf.init(table, [
{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: 'multi_select',
select_type: 'custom_select',
style_class: 'selectpicker',
filter_default_label: 'Filter Value',
filter_reset_button_text: false,
}
]);
I was just missing the style class 'selectpicker' in column 0. Silly.
See here for more bootstrap-select methods that can be used in the initSelectPluginCustomTriggers for init, refresh and destroy functions.
Related
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I'm using the pdf button from jquery datatables which is essentially the pdfmake library. The problem that I'm having is that I would like to add an additional paragraph right above my table when the user clicks the button to export the table. I have tried using the "message" parameter but for the life of me I cannot retrieve additional information right before the pdf will download. I tried doing this.
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
message:function() { $("#HeaderDesc").text()}
}
]
But I have been unsuccessful in my attempts. Does anyone have any ideas on how to accomplish this?
There is another easy solution to this.
I accomplished this by using splice property. You can do like this inside customize function.
doc.content.splice(0, 1, {
text: [
{ text: 'I am loving dataTable and PdfMake \n',bold:true,fontSize:15 },
{ text: 'You can control everything.',italics:true,fontSize:12 }
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
This will splice at the first position [0 index] as well as replace 1 value with the above content.
Happy coding!!!!
You cannot. The config literal for the button is read once, and message does not support function type.
However, you can change the message in the not so well documented customize() callback. This is called just before dataTables pass the generated document to pdfmake. If you have defined a message, then there will exists message section(s) in the content nodes, and those nodes have a text attribute holding the actual message :
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = 'this is a late created message'
}
})
}
As mentioned, you must define message before this will work. If you have not defined message, there will be no styles of type message you can manipulate. Your pdfhtml5 settings could look like this :
buttons: [
{
message: '__MESSAGE__',
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = $("#HeaderDesc").text()
}
})
}
}
]
demo -> https://jsfiddle.net/xx5f5z6x/
I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.
$.validator.setDefaults({
ignore: []
});
The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.
Is there an example out there somewhere or has anyone gotten it to work?
I'm not certain I'm doing this right but here's what I've tried to add it manually.
$.validator.setDefaults({
ignore: [],
errorClass: "input-validation-error",
errorElement: "input",
highlight: function (element, errorClass) {
$(element).addClass(errorClass)
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass)
}
});
I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().addClass('input-validation-error');
} else {
element.addClass('input-validation-error')
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().removeClass('input-validation-error');
} else {
element.removeClass('input-validation-error')
}
}
});
I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.
I'd like to put together a StoryMap app using Initiative (second level) portfolio items as the backbone (columns). To do this the app needs to query for all the second level portfolio items, and then use each PI as a column header in the rallycardboard.
I've gotten the cardboard to display the column headers correctly, but I have not been able to get it to display the cards, which should be the first level of portfolio items (PortfolioItem/Feature).
Here is my code so far:
launch: function() {
this._getInitiativeStore();
},
_getInitiativeStore: function() {
this.initiativeStore = Ext.create('Rally.data.wsapi.Store', {
model: 'PortfolioItem/Initiative',
fetch: ['Name', 'Children'],
autoLoad: true,
listeners: {
load: this._createCardBoard,
scope: this
}
});
},
_createCardBoard: function(store, records) {
var initiativeColumns = [];
Ext.each(records, function(record) {
initiativeColumns.push({
xtype: 'rallycardboardcolumn',
columnHeaderConfig: {
xtype: 'rallycardboardcolumnheader',
fieldToDisplay: 'Name',
record: record,
},
cardConfig: {
xtype: 'rallycard',
record: 'PortfolioItem/Feature'
},
fields: ['Name', 'Parent'],
valueField: 'Parent',
value: record.get('_ref') // BUG FIXED HERE. Was: record.get('Parent')
});
}, this);
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['PortfolioItem/Feature'],
columns: initiativeColumns,
attribute: 'Parent',
};
var cardBoard = this.add(cardBoardConfig);
console.log('cardboard', cardBoard);
}
I realize I am using this perhaps a bit differently than the authors have planned for, but I'm willing to extend the rallycardboard and rallycolumnheader objects with Ext.define if that's what it takes. I'm starting to look at the Rally source code but its slow going so far.
I was able to figure out the problem by using Ext.define() to override the cardboardcolumn getStoreFilter function to print out its filter value. Probably for somebody good with a browser debugger that would not have been necessary, but I'm not and it pinpointed the problem right away: The "value" field of the initiativeColumn configs should have been record.get('_ref'), not record.get('Parent'). I'll edit the code above so it works.
Now the basic board works great as a story map with portfolio items! Next step is to see if I can incorporate the concept of releases into the map.
Also, I think I found a bug in the 'rallycardboard' constructor-- if I pass it a context reference like: context: { project: 'project/XXX'} where XXX is an OID, it crashes. Instead I need to instantiate a context object and pass that. But that's inconsistent from other items like the wsapi store. Workaround is easy, but it is a bit annoying.
Having an issue getting the selected value from the ReleaseComboBox.
I am trying to get this value to use as a filter, so my _onChange event looks something like this:
_onReleaseComboboxChanged: function () {
var config = {
storeConfig: {
filters: [
{
property: 'ScheduleState',
value: 'Defined'
},
{
property: 'Release.Name',
value: this.iterationCombobox.rawValue
}
]
}
};
this.cardBoard.refresh(config);
},
So this works great most of the time, EXCEPT the combobox is truncating the longer release names, so if your release is named Release 2 - Cool new feature to production, the rawValue = something like "Release 2 - Cool new feature to...". Obviously, this makes my query return 0 records...
I have looked all through the object in debug, checked docs, I am just not seeing it.
Surely I am missing something here, i checked comboBox to see if there is a truncate property, but dont see that either.
Any suggestions?
You should always be able to get the currently selected record using the getRecord() method.
var selectedIteration = this.iterationCombobox.getRecord();
var iterationName = selectedIteration.get('Name');