Needed a searchable select dropdown box and found a TomSelect library that has it all set up. I added in the required library. More specifically, this solution here.
<link href="https://cdn.jsdelivr.net/npm/tom-select#2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select#2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>
added in the JS code
new TomSelect("#select-state",{
create: false,
sortField: {
field: "text",
direction: "asc"
}
});
and everything works fine as intended until I realised that TomSelect filters out my text in said HTML dropdown selection.
If one of my dropdown selection was meant to say: 1 - this is option "hello" then after implementing the TomSelect, it says instead this is option, I assume filtering out elements before and after keys like - and ".
Would love to know to disable this filter, or at least modify it so that the whole text of the option is displayed otherwise the point of a dropdown is sort of defeated.
I was thinking of maybe tackling the attributes such as field: "text" but I have no idea where to begin or what other options could be. What would these SoftField option be?
Did you try to render your list with escaping?
new TomSelect("#select-state",{
create: false,
sortField: {
field: "text",
direction: "asc"
},
optionClass: 'option',
itemClass: 'item',
render:{
option: function(data, escape) {
return '<div>' + escape(data.text) + '</div>';
},
item: function(data, escape) {
return '<div>' + escape(data.text) + '</div>';
},
dropdown:function(){
return '<div></div>';
},
},
});
Related
I'm trying to customize the category field text of my Kendo Chart.
The text is too long so I wanted to make part of it bold to distinguish what was written
The Chart looks like this: What I have now
But what I want should look like this: Expected result
My code for the chart looks like this:
var seriesConfig = [{
field: "Duration",
categoryField: "AlarmDescription",
axis: "duration",
name: textJSLayout["Duration"],
type: seriesType,
tooltip: {
template: "${series.name} : #=mpm.functionHelper.time.getFormattedTime(value)#" +
"<br> #=textJS['PercentageString']# : ${dataItem.Pareto} %" +
"<br> #=textJSLayout['Occurrences']# : ${dataItem.Occurrences} "
},
labels: {
template: "${dataItem.Occurrences}",
visible: true
}
}];
I also tryed using a template but it looks like there is no such a thing for the categoryField...
Any solutions?
The only way that I can see you doing this would be to leverage the categoryAxis' Label's Visual property: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryaxislabelsvisual
You would do this by appending the text with a new kendo.drawing.Text with bolded font. See this example: https://dojo.telerik.com/oGulOZim
The issue that you will run into is when to break the bolding font and when to start the normal font. That will need to take some trial and error on your part.
I am using angular 2 multiselect, I want to disable the header click in case of group selection. I need grouping just for logical grouping not for selection, so please suggest how can I disable header click, its should not select child items.
This is the plugin I am using https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby
<angular2-multiselect [data]="otherSkillList" formControlName="otherskills" [(ngModel)]="selectedotherSkill" [settings]="otherSkillSettings" (onSelect)="onOtherSkillSelect($event)" (onDeSelect)="onOtherSkillDeSelect($event)" (onSelectAll)="onotherSkillSelectAll($event)"
(onDeSelectAll)="onOtherSkillDeSelectAll($event)">
</angular2-multiselect>
this.otherSkillSettings = {
singleSelection: false,
text: 'Select ' + this.adminPage.OtherSkillsOtherServices,
enableCheckAll: false,
enableFilterSelectAll: false,
searchPlaceholderText: 'Search ' + this.adminPage.OtherSkillsOtherServices,
enableSearchFilter: true,
badgeShowLimit: 5,
limitSelection: 8,
groupBy: "category",
disabled: false
};
Somehow, using CSS, I tried removing the checkbox for all the the headers, but the header itself is still clickable. In below, "Front-End Skills" is still clickable & selects all below items in that group.
I am using bootstrap multiselect in my angular application. (Bootstrap 2.3)
http://davidstutz.github.io/bootstrap-multiselect/index-2-3.html#examples
I want to convert the same thing in to bootstrap typeahead but still the user can multiselect values in search results.
I am using the highlighter function of bootstrap typeahed to add check-boxes to results.
I am referring to the this plnkr http://plnkr.co/edit/szO2An1oslDyGftnshyR?p=preview but I am still unable to make my code work.
Old Code for multiselect:
to check last selected values
$scope.selectOptions = function () {
var index = fetching the index of checked values;
var selectedAttrFound = index>-1;
if (selectedAttrFound == true) {
angular.element("#attr-value-selector")
.multiselect('select', $scope.filterAttributes[index].attributeValues);
}
};
to populate the multiselect
$scope.attrValuesWidget = angular.element("#attr-value-selector")
.multiselect({
numberDisplayed: 2,
enableFiltering: true,
maxHeight: "300",
onChange: function (element, checked) {
$scope.attributeActionValue = {
attribute: $scope.attributeSelected,
value: element.val(),
checked: checked
};
$scope.$apply();
}
})
.multiselect('dataprovider', $scope.configAttributeValuesList);
The Select box
<select id='attr-value-selector' multiple='multiple' ></select>
Although you can easily add checkboxes in your highlighter function..
highlighter: function( item ){
var bond = bondObjs[ item ];
return '<div class="bond">'
+'<input type="checkbox" class="mightBeRequiredToCollectTheSelectedResult">'
+'<img src="' + bond.photo + '" />'
+'<br/><strong>' + bond.name + '</strong>'
+'</div>';
}
The problems are;
typehead.js automatically closes its result after you click one of
the search result. You need to override this first.
Then you also need to list the selected values into the textfield.
If you check typehead.js github issues page, issue #254 mentioned that they don't have plan to support multi select, at least for now.
Now I might get downvoted for this, but If I were you I'll consider other alternatives as well.
https://github.com/isteven/angular-multi-select: pure AngularJS, ability to rest selection.
http://ivaynberg.github.io/select2/: rich configuration options
Or the old reliable "chosen" library (I can't post more links)
Hope it helps. Cheers.
I'm using the jqGrid columnChooser, like so:
jQuery(grid).jqGrid(
'navButtonAdd',
pagerDiv,
{
caption: "Columns",
buttonicon: "ui-icon-newwin",
title: "Hide/Show Columns",
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
$(this).jqGrid('remapColumns', perm, true);
}
},
modal: true,
width: 400,
height: 300,
classname: 'column-chooser-select'
});
}
}
);
and was wondering if there was a way to specify an event handler on the columnChooser (using the jQuery UI Multiselect plugin that comes w/ jqGrid) that fires any time a column is either added or removed. So I guess it's a two-part question:
does the jQuery UI Multiselect support such a thing?
if so, is there a way to hook it up without altering the jqGrid source?
A bit of background on what I'm trying to achieve:
My default grid configuration hides many columns. Some of these columns are not populated from the db - they are obscure, rarely used data elements that if populated would dramatically decrease the query execution performance (multiple joins involving tables with 100 million plus records).
Should a user pick one of these columns for display i'd like to warn them that another roundtrip to the server is required and it could take a while - and give them the option to cancel the column addition.
Thanks
I think I understand your problem and find your question interesting, so I wrote the demo for you which shows how one can solve the problem.
columnChooser uses jQuery UI Multiselect plugin internally which uses jQuery UI Sortable. So I suggest to use sortreceive event of the jQuery UI Sortable to catch the information needed.
The code can be the following
$("#grid").jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
.bind("sortreceive", function (event, ui) {
alert('column "' + ui.item.text() + '" is choosed');
});
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
.click(function () {
alert('column "' + $(this).parent().text() + '" is choosed');
});
}
});
See the demo here.
The code bind 'click' event on the "+" for the initial list of the columns which was in the column chooser at the initialization time of the dialog. I think it would be sufficient for you. If needed you can easy modify the code to support the 'click' on the "+" for the columns which will be removed from the left list during the work with the columnChooser.
I almost forget to mention that I used in the demo improved version of the columnChooser (see the answer), but my above suggestion works with the original version of columnChooser too.
I am using the below code in JqGrid for column chooser plug-in. when i tick the select All check box in the grid. I want to exclude particular column ( by default it should not display in my grid).
I used hidden=True property in col model. buy i want to handle these in column chooser also.
function Properties_Columnchooser() {
$('#btn_setColumns').click(function () {
jQuery('#grid-tableProperties').jqGrid('columnChooser',{
"shrinkToFit" : true,
"autowidth" : true,
done : function(perm) {
w = $(window).width();
// alert('done ' + w);
if (perm)
{
this.jqGrid("remapColumns", perm, true);
this.setGridWidth(w - 30, true);
$('.ui-search-input').show();
}
else
{
}
}
}
);
});
}
My flexigrid is setup. All I need is an event that gets called when the user clicks on a row. From there, I will send the user to another page based on the data contained in that row. But I can't seem to find any examples on how to do this.
I'm looking for a clear example on how to handle row onclick events using flexigrid.
I'm also interested in any other javascript table frameworks that could be used in this situation. I've been taking a peek at DataTables and it looks like it may be a better alternative (and the project appears to be more active)
In the initial setup for the flexigrid, add the attribute process: procMe to the column model. Example:
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
and then create a callback:
function procMe( celDiv, id ) {
$( celDiv ).click( function() {
alert( id );
});
}
A better solution
Adding process to colModel didnt work for me.
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
this solution below is what I'm using:
var gridRows = $("#data-grid tbody tr");
gridRows.click(function (event) {
displaySelectedItem($(this).attr('id').substr(3));
return false; //exit
});
Flexigrid column as link
colModel: [
{
display: 'DomainName', name: 'DomainName', width: 180,
sortable: true, align: 'left',
process: function (col, id)
{
col.innerHTML = "<a href='javascript:domainEdit(" + id + ");'
id='flex_col" + id + "'>" + col.innerHTML + "</a>";
}
}]
Link Function
function domainEdit(domainID) {
alert('domainID' + domainID);
}
I think this variant little better than whoabackoff
$('.TableName').click(function(event){
$('.res').html('dbl');
alert('dbl');
});
does this help? http://www.flexigrid-asp.net/demo/updatepanel.aspx
you can have a look at it with firebug, to see where the event is hooked.
keep in mind that the flexigrid.js file is a bit different than the one from the official project.