I have a simple grid containing an editable column with phone numbers.
I would like to add a small icon that the user can click on containing a "tel: link" so that their "phone hardware" can pick it up from there.
I have prepared a simple demo -> https://dojo.telerik.com/ogAgURep/2
Goal: When clicking the Phone-Button do not enter "Edit Mode" ..otherwise enter "Edit Mode"
Problem: Clicking Phone-Button enters "Edit Mode"
In the schema set your "Tel" column to editable false.
schema: {
model: {
fields: {
firstColumn: { editable: false },
name: { validation: { required: true } },
tel: { editable: false }
}
}
},
To make it so the column is still editable except when the phone icon is clicked, you could change icon to a javascript function that exits edit mode as well as the original action:
template: function(args){
if(args.tel==null){ return ''; }
return args.tel + '<span class="k-cell-link-i"> </span>';
}
function call(e){
var grid = $('#grid').data('kendoGrid');
grid.cancelChanges();
//other logic originally in the template
}
Related
In storybook (React), I have set-up the following control that correctly displays iconClass as a select. I want it to provide those three "most used" options, but also give the user the ability to input a custom value. How to get this hybrid select / input text control? Thanks
argTypes: {
iconClass: {
control: {
type: 'select',
options: [
'fa-arrows-alt-v',
'fa-arrows-alt-h',
'fa-link',
]
},
}
}
I've got a bunch of charts showing on a single page via the HighCharts cloud inject code. Because the data for each chart is quite large, the page gets massive if the user selects View data table from the menu - which I'm fine with, but I would prefer the user be able to Toggle the table triggered by the same menu button. Is there any way I could do this via the custom code?
I've figure dout how to change the text in the menu to Toggle data table, but can't figure out how to apply the toggle code.
This is what I have so far:
exporting: {
buttons: {
contextButton: {
enabled: true,
text: 'Download',
menuItems: ["printChart",
"separator",
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"downloadSVG",
"separator",
"downloadCSV",
"downloadXLS",
{
textKey: 'viewData',
text: 'Toggle data table',
onclick: function() {
this.viewData()
}
}]
}
}
It seems that Highcharts doesn’t offer any method for hiding the data table. The workaround is to put the following logic in onclick event:
onclick: function() {
if (this.dataTableDiv && this.dataTableDiv.style.display !== 'none') {
this.dataTableDiv.style.display = 'none';
} else {
this.viewData();
this.dataTableDiv.style.display = '';
}
}
Live demo: http://jsfiddle.net/BlackLabel/2t1w4pu9/
Cloud doesn’t include export-data module in its editor but the generated inject-script does. So the functionality works outside the Cloud (e.g. on jsfiddle).
I have started to use ExtJs 4. I have grid with buttons in one column. I can't manage to get button click for button in selected cell by controller. I would like to get click and then details for row in order to open extra window with details.
Code:
Ext.define('AP.controller.List', {
extend : 'Ext.app.Controller',
stores : ['Users'],
models : ['User'],
views : [ 'List', 'Details' ],
init : function() {
console.log("users");
this.control({
'viewport > listPanel > userlist' : {
itemdblclick : this.userDbCClicked
},
'viewport > listPanel button AND WHAT MORE ?' : {
click : this.statusButtonClicked
}
});
},
userDbCClicked : function(grid, record) {
console.log("user db clicked");
},
statusButtonClicked : function(grid, record) {
// Here I would like to get row details after click on button in column
console.log("statusButtonClicked clicked ");
}
});
What should be put instead this code:
'viewport > listPanel button AND WHAT MORE?' : {
click : this.statusButtonClicked
}
Of course it dosen't work. How to get row by click on button in cell ?
Thanks in advance for help.
ExtJs is very powerfull framework but first steps are realy difficulted sometimes.
Bogus
put an action:'statusbutton' in your button config
then use 'viewport > listPanel > button[action=statusbutton]'
What Chris says is true. You can also you a name property on your button, it's just a way of querying your components. Explained here:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
{
xtype: 'button',
name: 'statusbutton'
}
'viewport > listPanel > button[name=statusbutton]'
Here is a good starting guide for Ext.Apps:
http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1
and another one:
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
I'm trying to open a details popup to show more details about a record in a kendoUI grid.
I've seen this sample: http://demos.kendoui.com/web/grid/detailtemplate.html
But instead of a grid, i'd like to open a popup passing the ID of the selected record.
How can I do this?
Have you seen the custom popup example?
http://demos.kendoui.com/web/grid/custom-command.html
The Kendo Grid has its own popup edit form that takes care of that and can also be customized with a template.
http://demos.telerik.com/kendo-ui/grid/editing-popup
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template
Pretty straightforward. Subscribe to the onChange event and alert the selected id. I assume you mean the attribute id. :
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).attr("id");
});
alert(selected);
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 5
},
change: onChange,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "Age"
}
]
});
});
I have a dojo grid which is using some editable dijit form fields. All is well, until I try ot implement an country (multi) select cell as an Tooltip Dialog; i.e., show a drop down button which opens the tooltip dialog populated with a checkbox array to select one or more country. Once checked and clicked OK, the cell should update with a list of selected countries. Obviously I'll take care of updating the server via the store later on.
I've implemented a country select tooltip dialog which works fine like so:
dojo.provide("CountrySelector");
dojo.declare(
"CountrySelector",
[dijit.form.DropDownButton],
{
label: 'Countries',
dropDown: new dijit.TooltipDialog({ execute: function() {
console.log("EXECUTE : ", arguments[0]);
this.value = arguments[0].country;
}, href:'/cm/ui/countries' }),
postCreate: function() {
this.inherited(arguments);
this.label = this.value;
dojo.connect(this.dropDown, 'onClose', function() { console.log('close'); });
console.log("CountrySelect post create", this);
},
}
);
And the grid cell is typed as:
{ name: 'Countries', field: 'targeting.countries', editable: true, hidden: false, type:dojox.grid.cells._Widget, widgetClass: CountrySelector },
All is working fine but I can't figure out how to update cell's content and store once the widget is executed. As well, I don't seem to have the row id of the updated row.
Any ideas?
Thanks,
Harel
//Layout:
gridLayout: {rows: [{name: 'Coll Name',field: 'colField', type: dojox.grid.cells.ComboBox, editable:'true', width:'8%',options: [], alwaysEditing:false}]}
//Grid Store:
this.gridStore = new dojo.data.ItemFileReadStore({data: {items: data}});
//
var setOptions = function(items, request){
this.gridLayout.rows[0].options.push('Val 1','Val 2');
this.gridLayout.rows[0].values.push('1','2');
dojo.connect(this.gridLayout.rows[0].type.prototype.widgetClass.prototype, "onChange",this, "_onComboChange");
}
this.gridStore.fetch({onComplete: dojo.hitch(this,setOptions)});
_onComboChange: function (selectedOption) {
console.info("_onComboChange: ",selectedOption);
},
// If you need to populate combos with different values you can use onItem
var getArray = function(item, request){
// populate one by one
// attach an event to each combo
}
this.gridStore.fetch({onItem: dojo.hitch(this,getArray)});
This is what i used to update my grid
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
More detail
every row is identified by its identifier
yourGrid.store.fetchItemByIdentity({
identity: <yourIdentity>,
onItem: function(item){
// Update your attributes in the store depending on the server response
// yourGrid.store.setValue(item, <attribute>,<value>);
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
}
});
I didn't set up a test with your code but you should be able to do it by just creating a method named getValue in your widget that returns the value.
Take a look at the other examples (like dojox.grid.cells.ComboBox) to get an idea of what getValue should look like.