I intend to build a text with the text of labelField and textfield value
In my fiddle example the text of the fieldLabel is created dynamically.
what I want to achieve is to generate a text with the text of fielLabel and the value of the textfield.
https://fiddle.sencha.com/#fiddle/1icj
As is the fiddle displays "Homer, Simpson"
What I want to achieve: "Name Homer, Last Name Simpson"
It seems to me there is no method which gives the value of fieldLabel.
How to achieve this?
It is possible in some way, using binding?
What if I use a custom property, it is possible to obtain its value?
buttons: [{
text: 'GetValues',
handler: function() {
var formValues = this.up('form').getForm().getValues();
console.log(formValues);
var finalValues = [];
var needsLineBreak = false;
if (formValues != null) {
var form=this.up('form'),
index=0;
Ext.iterate(formValues,function(key,val){
finalValues += form.getComponent(index).getFieldLabel()+':';
finalValues += val + ',';
index++;
});
finalValues=finalValues.slice(finalValues.lenght,-1);
}
console.log(finalValues);
}
}],
you can use getter/setter to achieve this functionality
items: [{
fieldLabel: labelName,
name: 'first',
get value(){
return this.fieldLabel +' Homer';
},
allowBlank: false,
myCustomProp: labelName
},{
fieldLabel: labelLastName,
name: 'last',
get value(){
return this.fieldLabel +' Simpson';
},
allowBlank: false
}],
Related
var ColDef = [{
headerName: "colA",
field: 'colA',
rowGroup: true
},
{
headerName: "colB",
field: 'colB',
pivot: true,
enablePivot: true
},
{
headerName: "colC",
field: 'colC',
rowGroup: true
},
{
field: 'colD',
aggFunc: 'first',
valueFormatter: currencyFormatter,
tooltip: function(params) {
return (params.valueFormatted);
},
},
{
field: 'comment'
},
{
field: 'colF'
}
];
function currencyFormatter(params) {
return params.value;
}
above code is from different question. it works but i want to use different 'comment' field as tool tip to current 'colD' . also this is a group and pivot agGrid,if it is normal grid this is not a problem. I would appreciate any ideas for group and pivot agGrid?
Not sure if there is good way for the grid to get the data in your scenario then, as your rows and columns are different than original model after pivot.
Maybe you can consider retrieve this information outside of grid. Assume you also want some aggregated information displays in the tooltip, the tooltip function may eventually look like this:
tooltip: params => {
const country = params.node.key;
const year = params.colDef.pivotKeys[0];
const athletesWithNumbers = this.state.rowData
.filter(d => d.year == year)
.filter(d => d.country === country)
.filter(d => d.gold > 0)
.map(d => d.athlete + ': ' + d.gold);
return athletesWithNumbers.join(', ');
}
See this plunker for what I am talking about - again, not sure if this is what you want but just an FYI.
just use tooltipValueGetter
{
field: 'message',
headerName: 'Message',
headerTooltip: 'Message',
width: 110,
filter: 'agSetColumnFilter',
tooltipValueGetter: (params) => `${params.value} some text`
}
or just use the same method for tooltipValueGetter
UPDATE:
Okay, I understood
but it also easy
Ag-grid has property tooltipField - where you can choose any field from grid
For example here - in the column of 'sport' I am showing tooltip of the previous column
Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08
OR
You can easily manipulate with data for each field by tooltipValueGetter
with next construction:
tooltipValueGetter: function(params) {
return `Country: ${params.data.country}, Athlete: ${params.data.athlete}, Sport: ${params.data.sport}`;
},
Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08
Result:
UPDATE 2
Hey Man! I do not understand was is wrong
I just used your code snippet and my solution
And it works as you want
Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08
UPDATE 3
A little bit of manipulation and I can get the data
{ field: 'gold', aggFunc: 'sum',
tooltipValueGetter: function(params) {
var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
return model.allLeafChildren[0].data.silver;
},
},
The Last:
https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview
var ColDef = [{
headerName: "colA",
field: 'colA',
rowGroup: true
},
{
headerName: "colB",
field: 'colB',
pivot: true,
enablePivot: true
},
{
headerName: "colC",
field: 'colC',
rowGroup: true
},
{
field: 'colD',
aggFunc: 'last',
tooltipValueGetter: commentTooltipValueGetter
},
{
field: 'comment'
},
{
field: 'colF'
}
];
function commentTooltipValueGetter(params) {
const colB = params.colDef.pivotKeys[0];
var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
for (var i = 0; i < model.allLeafChildren.length ; i++) {
if (model.allLeafChildren[i].data.colB=== colB) {
return model.allLeafChildren[i].data.comments;
}
}
}
This is what i had to do for my question. It is combination of answers from #wctiger and #shuts below. So please also refer them for more context
I've been having problem trying to implement exact match searching in a column inside a table using datagrid-filter.
For example:
Under column Name if I search "Name 1" the search result would only display only Name 1.
Can anyone teach me how to do it?
I'd really appreciate your help.
$(function(){
var rows = [];
for(var i=1; i<=800; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
$('#tt').datagrid({
view : scrollview,
striped : true,
pagination : false,
pageSize : 50,
singleSelect : false,
autoRowHeight: false,
remoteFilter : false,
remoteSort : true,
multiSort : true,
});
$('#tt').datagrid('enableFilter', [{
field:'amount',
type:'numberbox',
options:{
precision:0
},
op:['equal','notequal','less','greater']
}])
$('#tt').datagrid('loadData', rows);
});
Please refer to this jsfiddle:
http://jsfiddle.net/6u2b8pyp/
Add following at the beginning on document ready to avoid case sensitive behavior
$.fn.datagrid.defaults.operators =
{
equal: {
text: 'Equal',
isMatch: function(source, value){
return source.toLowerCase() == value.toLowerCase();
}
}
};
Replacing
$('#tt').datagrid('enableFilter', [{
field:'amount',
type:'numberbox',
options:{
precision:0
},
op:['equal','notequal','less','greater']
}])
to
$('#tt').datagrid('enableFilter', [{
field:'amount',
type:'numberbox',
options:{
precision:0
},
op:['equal','notequal','less','greater']
},{
field:'name',
type:'textbox',
options:{
precision:0
},
defaultFilterOperator: 'equal'
}])
will do Your fiddle mod
According to the docs, you can specify a default operator for your filters, like this:
$('#tt').datagrid({
(...)
defaultFilterOperator: 'equal'
});
This uses exact, case-sentitive matches, which may or may not be what you want ("name 1" will not work if the name is "Name 1"). I did not see a case-insensitive option.
I have a BootstrapTable select box. I know you can use a function to populate the values in the select box. I'd like that function to change which array it provides based on the value of a second column (called Text_example).
So in my example, if Text_example for that row is 1, the select box should have the following data: [{1:1}]. if Text_example for that row is 2, the select box should have the following data: [{2:2}]
I think my problem is that I don't know how to pass just the row's data to the function get_values as my method seems not to be working.
Full Fiddle: http://jsfiddle.net/goxe6ehg/
var data = [{"Text_example": 1},{"Text_example": 2}];
function get_values(data) {
if (data['Text_Example'] === 1) {
return [{1:1}];
}
else {
return [{2: 2}]
}
}
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select',
source: get_values($('#table').bootstrapTable('getData'))
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
EDIT: I over-simplified my example. Rather than having a static field for text_example I need it to be a select box, where the value for select_example changes based on what the user has selected in text_example.
Updated JSFiddle: http://jsfiddle.net/4wwv18Lq/4/
You can use the oninit handler on the bootstraptable library.And add the editables by iterating through the data object.
var data = [{"Text_example": 1},{"Text_example": 2}];
$('#table').on('editable-init.bs.table', function(e){
var $els = $('#table').find('.editable');
$els.each(function(index,value){
$(this).editable('option', 'source', data[index])
});
});
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select'
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
JSfiddle link
http://jsfiddle.net/km10z2xe/
my multiple column in mvc returns undefined.
what do i missed? or there is wrong with my code? pls help.
Controller
public ActionResult EmployeeIDSearch(string term)
{
// Get Tags from database
using (var ctx = new DASH_FAEntities())
{
var tags = (from e in ctx.EmployeeMasters
where e.EMT_EmployeeID.ToLower().Contains(term.ToLower().Trim())
select new
{
EmployeeID = e.EMT_EmployeeID.Trim(),
FullName = e.EMT_FirstName.Trim() + " " + e.EMT_LastName.Trim(),
Department = e.EMT_Department.Trim()
}).ToArray();
return Json(tags, JsonRequestBehavior.AllowGet);
}
}
View
#Html.TextBox("EmployeeID", null, new { #class = "form-control", #placeholder = "Employee ID", #id="employeeid" })
Jquery
function customRenderItem(ul, item) {
var t = '<span class="mcacCol1">' + item[0] + '</span><span class="mcacCol2">' + item[1] + '</span><span class="mcacCol3">' + item[2] + '</span>',
result = $('<li class="ui-menu-item" role="menuitem"></li>')
.data('item.autocomplete', item)
.append('<a class="ui-corner-all" style="position:relative;" tabindex="-1">' + t + '</a>')
.appendTo(ul);
return result;
}
var columns = [{ name: 'Employee ID', minWidth: '100px' }, { name: 'Full Name', minWidth: '100px' }, { name: 'Department', minWidth: '100px' }]
$("#employeeid").mcautocomplete({
showHeader: true,
columns: columns,
source: '#Url.Action("EmployeeIDSearch", "Home")',
select: function (event, ui) {
this.value = (ui.item ? ui.item[0] : '');
return false;
}
});
mcautocomplete.js
I already checked the jsfiddle file of this plugin. I only just change the source and added another column. But still undefined when I look for the employee id.
I break point my controller where I get my source and it has a value every time I time for employee id.
Also I've already googled and i found nothing. It's been yesterday and I don't know what to do. I don't want to use other plugin because my web would be slow for using different plugin.
Please Help.
From the documentation, the syntax your using for the columns property is only suuitable if the source is an array of arrays. For example it would work it the data was
[['1', 'Joe Blogs', 'Administration'], ['2', 'John Doe', 'Finance']]
but your controller method is returning an array of objects, so you need to also specify the valueField property. Change the columns definition to
var columns = [{ name: 'Employee ID', minWidth: '100px', valueField: 'EmployeeID' },
{ name: 'Full Name', minWidth: '100px', valueField: 'FullName' },
{ name: 'Department', minWidth: '100px', valueField: 'Department' }]
where the value of valueField match the property name.
Edit
Since you now adding objects, not arrays, you also need to change
this.value = (ui.item ? ui.item[0] : '');
to
this.value = (ui.item ? ui.item.EmployeeID : '');
in order to display the selected value in the textbox (refer updated fiddle for a working example).
i have two Ext Combo boxes here, i need to change values of second combobox when select event of combobox1 invokes, my problem is i don't know how to change model of a combobox.
items: [{
xtype:'combo',
fieldLabel: 'Course',
afterLabelTextTpl: required,
store: new Ext.data.SimpleStore({
data: [
[1, 'Bsc CS'],
[2, 'MSc CS'],
],
id: 0,
fields: ['value', 'text']
}),
name: 'first',
listeners:{
select: function( combo, records, eOpts )
{
if(this.getValue()=="Bsc CS")
{
// Ext.get('semcombo').getStore.loadData(msc);
}
else if(this.getValue()=="MSc CS")
{
}
}
},
editable:false,
allowBlank: false
},{
xtype:'combo',
fieldLabel: 'Semester',
id : 'semcombo',
afterLabelTextTpl: required,
name: 'last',
allowBlank: false,
}
For the second combobox, configure a combobox for each model type. Hide or show the appropriate combobox as a selection is made in the first combobox.
If you need to change the data completely (JSFiddle)
select: function(checkbox,records) {
comp.clearValue();
comp.bindStore(Ext.StoreMgr.lookup(records[0].data.store));
// you can change the value field if needed
comp.displayField = 'petname';
// you can change the display field if needed
comp.valueField = 'id';
// you can change the display template if needed
comp.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
'</tpl>'
);
comp.picker = null;
}
If you just need to filter (load) the data in second combox you can do something like this
On the select event of the first combobox prepare the second one to filter the data
combobox2.queryData = [{ property: 'fieldName', value: value}];
combobox2.reset();
combobox2.doQuery(combobox.queryData);
where combobox2 is a reference to the activated combo and value a propertyvalue from the combo. To ensure the use of your new query use
combobox2.on('beforequery', function (e) {
e.query = e.combo.queryData;
});