i have next code
<div className={"aside-minus " + (item.quantity > 1 ? '' : 'remove')}
onClick={() => this.props.subQuantity(item.product._id)}>
</div>
The condition if item.quantity > 1 I 'not add class'
But i have function subQuantity.
The question
If item.quantity > 1 onClick function = subQuantity , else onClick function = remove
How make?
Thaks very much
You can conditionally invoke any function you want in a callback function, it is just a function after all.
<div
className={"aside-minus " + (item.quantity > 1 ? '' : 'remove')}
onClick={() => {
if (item.quantity > 1) {
this.props.subQuantity(item.product._id);
} else {
// call remove function
}
}
/>
With a turnary
<div className={"aside-minus " + (item.quantity > 1 ? '' : 'remove')}
onClick={item.quantity > 1 ? () => this.props.subQuantity(item.product._id) : () => this.remove()}>
</div>
Is there a way to customize the tooltip in the Ext.grid.column.Action? I'd like to set the autoHide to false.
Thanks in Advance
You can by overriding or extending the ActionColumn.
You can see from the QuickTipManager docs that if you set a data item, data-hide="user" is the equivelent of autoHide=false.
The ActionColumn doesn't expose that functionality, it just uses the defaults, so we have to override the ActionColumns's defaultRenderer.
The defaultRenderer is a protected template function, so we can provide our own renderer and a custom config.
Start by copying the existing defaultRenderer source from the ActionColumn and then adding a few lines to handle our new config.
We can add a custom tooltipAutoHide config to the action config. Then in the defaultRenderer, we can read that config, defaulting to true, and render out data-hide="user" if tooltipAutoHide:false is set.
Here is an example. The relevant lines are
Read the config
//Get custom 'tooltipAutoHide' config from tip
tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
Render out 'data-hide="user"' if false
// write data-hide=user == autoHide:false
(!tooltipAutoHide ? ' data-hide="user"' : '') +
In column definition, set tooltipAutoHide:true
{
xtype:'myactioncolumn',
enter code here items:[{
tooltip: 'Edit',
tooltipAutoHide: false
}]
}
Here is the full sample
Ext.define('Ext.ux.column.MyActionColumn', {
extend: 'Ext.grid.column.Action',
xtype: 'myactioncolumn',
defaultRenderer: function (v, cellValues, record, rowIdx, colIdx, store, view) {
var me = this,
scope = me.origScope || me,
items = me.items,
len = items.length,
i, item, ret, disabled, tooltip, altText, icon, glyph, tabIndex, ariaRole;
// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
// Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
// we will pass an incorrect value to getClass/getTip
ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (i = 0; i < len; i++) {
item = items[i];
icon = item.icon;
glyph = item.glyph;
disabled = item.disabled || (item.isDisabled ? Ext.callback(item.isDisabled, item.scope || me.origScope, [view, rowIdx, colIdx, item, record], 0, me) : false);
tooltip = item.tooltip || (item.getTip ? Ext.callback(item.getTip, item.scope || me.origScope, arguments, 0, me) : null);
//
//Get custom 'tooltipAutoHide' config from tip
tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
console.log(tooltipAutoHide);
altText = item.getAltText ? Ext.callback(item.getAltText, item.scope || me.origScope, arguments, 0, me) : item.altText || me.altText;
// Only process the item action setup once.
if (!item.hasActionConfiguration) {
// Apply our documented default to all items
item.stopSelection = me.stopSelection;
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
item.hasActionConfiguration = true;
}
// If the ActionItem is using a glyph, convert it to an Ext.Glyph instance so we can extract the data easily.
if (glyph) {
glyph = Ext.Glyph.fly(glyph);
}
// Pull in tabIndex and ariarRols from item, unless the item is this, in which case
// that would be wrong, and the icon would get column header values.
tabIndex = (item !== me && item.tabIndex !== undefined) ? item.tabIndex : me.itemTabIndex;
ariaRole = (item !== me && item.ariaRole !== undefined) ? item.ariaRole : me.itemAriaRole;
ret += '<' + (icon ? 'img' : 'div') +
(typeof tabIndex === 'number' ? ' tabIndex="' + tabIndex + '"' : '') +
(ariaRole ? ' role="' + ariaRole + '"' : ' role="presentation"') +
(icon ? (' alt="' + altText + '" src="' + item.icon + '"') : '') +
' class="' + me.actionIconCls + ' ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +
(disabled ? me.disabledCls + ' ' : ' ') +
(item.hidden ? Ext.baseCSSPrefix + 'hidden-display ' : '') +
(item.getClass ? Ext.callback(item.getClass, item.scope || me.origScope, arguments, undefined, me) : (item.iconCls || me.iconCls || '')) + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') +
// write data-hide=user == autoHide:false
(!tooltipAutoHide ? ' data-hide="user"' : '') +
(icon ? '/>' : glyph ? (' style="font-family:' + glyph.fontFamily + '">' + glyph.character + '</div>') : '></div>');
}
return ret;
}
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'myactioncolumn',
width: 50,
items: [{
iconCls: 'x-fa fa-cog',
tooltip: 'Edit',
tooltipAutoHide: false,
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});
Here's a working Sencha Fiddle example.
I have a sorting issue in my project. After sorting I got a result like this in the image
<td className="dashboard_table-cell" title={'Created Date: ' + Queue.CreatedDate}>{Queue.CreatedDate}</td>
what format will I apply to my code to display the correct sorting order?
I found it in my own way,
sort(event){
if(event.target.id === 'CreatedDate'){
gridData = _.orderBy(gridData, (o) => moment(o[event.target.id])._d,
order[event.target.id] ? 'asc' : 'desc');
}
else
gridData = _.orderBy(gridData, (o) => typeof o[event.target.id] === 'string' ? o[event.target.id].trim().toLowerCase() : o[event.target.id], order[event.target.id] ? 'asc' : 'desc');
}
<th id="CreatedDate" className="dashboard_table-head" onClick={this.sort}>Created Date {order.CreatedDate ? <i id="CreatedDate" className="fa fa-sort-asc" /> : <i id="CreatedDate" className="fa fa-sort-desc" />}</th>
..............................................................
<td className="dashboard_table-cell" title={'Created Date: ' + Queue.CreatedDate}>{moment(Queue.CreatedDate).format('MM-DD-YYYY HH:mm:ss')}</td>
you should try sort by time like
createdDate.getTime()
so for every date, you will have you will compare
createdDate.getTime() of each item.
for every Date() the value we get from .getTime() will be unique and be incrementing.
I have a Kendo Grid with check box column. I want to check all check boxes in the grid and keep it across the pages. I have a method CheckAll(), but it checks only the first page of Kendo Grid. How to check all check boxes by one click on the link or button? My code is here:
<div style="text-align:right; font-size: 0.9em;height:28px;position: relative;">
<span style="float:left;text-align:left;">
Check All
Uncheck All
<a class="k-button k-button-icontext k-grid-Patient" id="hrefCheckedPatients" href="#" onclick="getChecked();">Export to PDF</a>
Download Generated PDF
<label id="checkedMsg" style="color:red;display:none;"></label>
</span>
</div>
#(Html.Kendo().Grid<RunSummary>()
.Name("CheckedPatients")
.DataSource(datasource => datasource
.Ajax().PageSize(25)
.Sort(sort => sort.Add("UniqueId").Ascending())
.Read(read => read.Action("GetRunSummaries", "PatientReport")))
.Columns(columns =>
{
columns.Bound(c => c.UniqueId).Title(ELSORegistry.Resources.Views.Home.HomeStrings.UniqueId)
.ClientTemplate("<input type='checkbox' class='primaryBox' id='#= UniqueId #'>#= UniqueId #</input>");
columns.Bound(c => c.RunNo).Title(SharedStrings.Run);
columns.Bound(c => c.Birthdate).Title(SharedStrings.Birthdate).Format("{0:g}").Filterable(true);
columns.Bound(c => c.customAge).Title(SharedStrings.Age)
.Filterable(
filterable => filterable
.UI("AgeFilter")
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear().IsEqualTo("Is equal to"))
)
);
columns.Bound(c => c.TimeOn).Title(PatientStrings.DateOn)
.Format("{0:g}")
.Filterable(true);
columns.Bound(c => c.TimeOff).Title(PatientStrings.DateOff)
.Format("{0:g}")
.Filterable(true);
columns.Bound(c => c.DischargedAlive).Title(PatientStrings.DischargedAlive).Filterable(true).ClientTemplate("#= DischargedAlive ? 'Yes' : 'No' #");
columns.Bound(c => c.ShowSubmitted).Title(PatientStrings.Submitted).Filterable(true).ClientTemplate("#= ShowSubmitted ? 'Yes' : 'No' #");
columns.Bound(c => c.SupportTypeEnum).Title(PatientStrings.SupportType).Filterable(true);//.ClientTemplate("#= SupportType ? 'Yes' : 'No' #");
}
)
.Pageable(p => p.PageSizes(new[] {10, 25, 50, 100}))
.Sortable()
.Filterable( )
.Events( e => e.FilterMenuInit("FilterMenuFuncWithAge") ) // apply x [closing box] on pop up filter box
)
<script type="text/javascript">
function checkAll() {
$('input').prop('checked', 'checked');
}
function uncheckAll() {
$('input').removeAttr('checked');
}
</script>
You need to update datasource property not the view.
Try something like that in CheckAll function:
var dataSource =('[name]="CheckedPatients"').data('kendoGrid').dataSource;
var data = dataSource.data();
var totalNumber = data.length;
for(var i = 0; i<totalNumber; i++) {
var currentDataItem = data[i];
currentDataItem.set("ShowSubmitted", "true");
}
UPDATE
// here all filtered/sorted data as in grid.
var view = dataSource.view();
Here you can read kendo docs about datasource object
UPDATE2
here solution for get all data from paged datasource:
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var data = query.filter(filters).data;
I have data to be displayed in KendoUI grid. There is some boolean data and I want it to be displayed as check boxes. Also, when the user clicks the check box I need to do something so I need the onclick event for each row of data. How do I do this in KendoUI grid? How do I give each check box a different name and fire onclick events? My code:
#(Html.Kendo().Grid((IList<M.TS.DomainModel.C>)ViewData["peoplefind"])
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.User).Title("Email");
columns.Bound(p => p.City);
columns.Bound(p => p.TimeStamp).Title("Testdate").Format("{0:MM/dd/yyyy}");
columns.Command(command => command.Custom("Info").Click("showDetails")).Title("Info");
columns.Bound(p => p.CheckOK).ClientTemplate(
"<input type='checkbox' value= '#= CheckOK #' " +
"# if (CheckOK) { #" +
"checked='checked'" +
"# } #" +
"/>"
);
})
.Sortable()
.Scrollable(scr => scr.Height(300))
.Groupable()
.Selectable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false))
.Resizable(resize => resize.Columns(true))
)
OK so I figured it out. I added class='c-ok' in the template of the check box and added the following code to get the click event.
$('.c-ok').click(function (e) {
if ($(this).is(':checked')) {
alert('checked');
cokclick();
} else {
alert('not checked');
}
});