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"
}
]
});
});
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 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
}
I'm having a list of contact details. User can select, add and remove those contact details.(Please see the fiddle JSfiddle ) whenever the user click an add button, a new contact model item will be add to the DOM.
var ContactModel = {
ContactData : [
{ 'ContactKey': 12323, 'Ref': 'Reference-Marsh', 'ContactName': 'Marsh Global' },
{ 'ContactKey': 44234, 'Ref': 'Reference-AON', 'ContactName': 'AON Co' },
{ 'ContactKey': 65343, 'Ref': 'Reference-Europ', 'ContactName': 'Europ Ltd' },
{ 'ContactKey': 78555, 'Ref': 'Reference-ECB', 'ContactName': 'ECB Tradings' },
{ 'ContactKey': 24242, 'Ref': 'Reference-Jersey', 'ContactName': 'New Jersey Inc' }
],
Items: ko.observableArray(),
MainContacts : ko.observable(),
AddItem: function () {
ContactModel.Items.push(new Contact([]));
},
Remove: function (line) {
ContactModel.Items.remove(line);
}
}
please see the rest of the code in the fiddle
when the user click a radio button, that selected radio button line data considered as main contact.I have to save all of the line items data. this is because when the user revisited the page,I'll bring all the line item with selected main contact.
when the user change the select list, the selected item object having the properties of ContactKey,Ref and ContactName according to that the other observable are updated.
but if the radio button is selected only the main contact will be updated. I've achieved that using pure jquery. but the value radio button value binding bit confusing for me. can any one help me to sort that issue.
If i understood your intentions right, my modifications to the fiddle shall present you a solution, basically:
I gave names to the radio buttons so that they are exclusive.
I moved logic from the view to the ischecked observable that is now a computed.
I changed the binding logic for the main contact.
Some small tweeks that can be seen in the fiddle.
Here's the fiddle: http://jsfiddle.net/QmQy9/4/
If theres something different from what you intended, just let me know.
Regards.
I have column with buttons like this:
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
header: 'Issue',
renderer: function(val){
return '<input type="button" class="btnissue" value="Issue" />';
},
dataIndex: 'btn', width: 49
}
],
renderTo: Ext.get('Issuing')
});
And I want to fire click events for this buttons.
If I write :
Ext.getCmp('btnissue').on('click',function(){
alert("message");
});
It says that the button does not exist.
So how can I fire this event?
getCmp looks up an ExtJS component. As YOU create the button you should use get instead.
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.