I have a problem with the dropdown in ui-grid.
This is my cell template where it must be.
{
cellTemplate: '<div>{{ row.entity.deviceType }}</div>',
displayName: $filter('prefixTranslate')('device_type', 'devices'),
field: 'deviceType',
key: 'deviceType',
name: 'column_device_type',
height: 40,
enableCellEdit: true,
enableCellEditOnFocus: false,
editType: 'dropdown',
editableCellTemplate: `
<div>
<form
name="inputForm">
<select
class="my-select"
ng-class="'colt' + col.uid"
ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD"
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">
</select>
</form>
</div>
`,
editDropdownValueLabel: 'deviceType',
editDropdownOptionsArray: [
{ id: 1, deviceType: 'Vertical Tank' },
{ id: 2, deviceType: 'Horizontal Tank' }
]
},
enter image description here
When you dblclick on the cell, the select (1) element appears, then you click on select element and it disappears. This problem can be solved only by fast mouseover on the popup (2)
So when I click on select element it just disappears and the default cell is shown... I don't know why it happens
Thank you for your answers
Related
I am using jqgrid (Guriddo jqGrid JS - v5.1.0)
My field becomes hidden when I add formoptions.
The field is 'hidden:true' because I want it to show on the form and not on the grid. When I remove the formoptions, the field shows on the edit form and hides on the grid.
colModel: [
{
label: 'First Name',
name: 'fname',
editable: true,
hidden: true,
width: 200,
editrules: {edithidden: true, required: true},
formoptions: {elmprefix:'(*)', colpos: 1, rowpos: 1 },
},
Can someone have an Idea what i am not doing right?
I was able to reproduce the problem. This is a bug. The problem is fixed in GitHub of Guriddo. Please check it.
I have a file select field component and a label that I want it to appear next to each other (label to the right). They are both populated inside a function. Is not the label of the field, just a text I want it to warn about file size on the upload field. This is the code:
this.fileUploadField = Ext.widget('filefield',
{
fieldLabel: 'Select a file:',
name:'file',
width: 200,
buttonText: 'Button' });
items.push(
this.fileUploadField,
{
xtype: 'label',
style: 'color:red',
text: 'I'm the label that wants to appear on the right of the file upload field',
name:'fileSizeLimit'
}
);
I would put them into some container and than set layout as hbox.
You can use for example
fieldcontainer
container
fieldset
You can use anything where you can set the layout. You can use the flex config to position your fields correctly.
So the code could look something like this:
xtype: 'fieldset',
title: 'My Fields',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'filefield',
flex: 3,
fieldLabel: 'Select file:'
}, {
xtype: 'label',
style: 'color:red',
flex: 2,
name: 'fileSizeLimit',
text: 'I\'m the label that wants to appear on the right of the file upload field'
}]
Check out this fiddle:
https://fiddle.sencha.com/#fiddle/1ju5
I have a ExtJs Form Panel
{
xtype: 'form',
items: [{
xtype: 'grid',
forceFit: true,
selType: 'checkboxmodel',
collapsible: true,
store: duplicateDataStore,
title: 'Data (' + duplicateDataStore.getCount() + ')',
columns: [
this.getRadioButton()
]
}]
}
...
getRadioButton: function() {
return {
header: 'name',
hideable: false,
renderer: this.renderRadioBox,
formBind: true
};
},
renderRadioBox: function( val, meta, record, rowIndex, colIndex, store ) {
return '<input type="checkbox" id="checkbox" role="checkbox" name="test" value="1" >';
},
After clicking the submit button i select the current form values.
this.lookupReference( 'data' ).down( 'form' ).getForm().getValues();
But i could not get any data from this selection. When i add a checkbox-item to the form, data will be readable, but not from the grid column.
Is there a solution for it?
I have looked at multiple questions on SO and on Git hub:
Set multiple Select2 options
Select2 can't set multiple value
Is initSelection used for select2(val)
But I still cant seem to figure out why the values is not being set.
I am using a jinja2 template, so Ill give the generated html/js:
<div class="form-group">
<label class="control-label col-sm-4" for="message_type">Meassage Type</label>
<div class="col-sm-5">
<input type="hidden" name="message_type" id="message_type" readonly />
</div>
</div>
and the js:
$(function () {
$("#message_type").select2({
placeholder: "Email/SMS/PIMS Modal",
multiple: true,
width: "300px",
tokenSeparators: [',', ' '],
data: [{
id: "email",
text: "Email"
}, {
id: "pims modal",
text: "PIMS Modal"
}, {
id: "sms",
text: "SMS"
}, ],
});
$("#message_type").select2("val", "pims modal");
});
I have also managed to reproduce the result, see example.
The issue occurs because you have set the multiple property to true. In this case to set a value you need to use an array instead of a string.
For example:
$(function () {
$("#message_type").select2({
placeholder: "Email/SMS/PIMS Modal",
multiple: true,
width: "300px",
tokenSeparators: [',', ' '],
data: [{
id: "email",
text: "Email"
}, {
id: "pims modal",
text: "PIMS Modal"
}, {
id: "sms",
text: "SMS"
}, ],
});
$("#message_type").select2("val", ["email"]);
});
A working demo here: http://jsfiddle.net/nww22qoj/19/
Edit: Here is a working jsfiddle using the 4.0.1 version of the plugin http://jsfiddle.net/nww22qoj/20/ (using the full version of the plugin)
I have a KENDO Grid and the fields and columns in that are populated from a datasource which is intern populated from an action.
Now i want to bind a particular cell content in that grid to another controller action and pass that ID of the cell also. How do I accomplish this. Below is the code for my grid. I could find answers in kendo UI docs but they use HTML Helpers to achieve this. I want it in the same style as below. Let us take the readername as the cell content for which this binding is required. Anybody tried this before?
$("#eventsgrid").kendoGrid(
{
dataSource: eventsDataSource,
navigatable: true,
pageable:
{
input: true,
numeric: false
},
columns:[
{
field:"",width:"30px", template:'<input type="checkbox" id="selectevent"/>'
},
{
field:"CardNumber",width:"80px"
},
{
field: "Image", width: "45px", title: "Type", template: "<img src='/Content/Themes/Default/images/AlarmType.png' id='AlarmType'/>"
},
{
field: "Priority", width: "60px", title: "Priroty"
},
{
field: "Origin", title:"Event Time"
},
{
field:"Description", title:"Alarm Title"
},
{
field: "ReaderName", title: "Location"
},
{
field: "", title: "Actions and Interactions", width: "160px", template: '<input type="button" value="Acknowledge" onclick="CheckAck" id="Acknowledge" /><br/><a href="javascript:performActions()" >3 Actions</a>'
},
{
field: "Image", title: "More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails'></div>"
}
],
}).data("kendoGrid");
Now i have a function which calls a $.POST call with the parameters. This function is hooked to the click event of the button. Is there a different way to do this?