I am using setColProp to dynamically load values into a select edittype.
I have the values successfully load whenever I call:
loadComplete: function() {
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
},
However it only works here, and only once. If I change the value of contract_list and try to update the jqgrid by calling
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
again from anywhere (from a button click, from afterSubmit, or even reloading table) it does nothing at all.
Is there something that I'm doing wrong?
edit:
Here is a better explanation of what I'm trying to do.
I have a jqGrid table with the id #profile_table.
This is part of the colModel in the jqGrid code:
colModel:[
{name:'contract_num',index:'contract_num', editable: true, hidden: false, width:30, edittype: "select", editrules: {required: true}},
]
Initially the contract_num edit field in the edit/add forms has no values in its select box. I load initial values from a javascript variable called contract_list that is created before the table gets created. I load these values initially by using:
loadComplete: function() {
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
},
This works fine, however it is possible that the values of contract_list will change whenever a user changes something else on the page that this table is displayed on. So I am trying to dynamically update the options inside of the select box for the contract_num field inside of the edit/add forms for this table. I successfully change the values inside of contract_list, however I cannot get the actual select box to update to the new values.
I am trying to update it by calling:
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
and then reloading the grid whenever someone changes the values for contract_list, however the table is not being updated.
I think your main problem will be solved if you would use recreateForm: true options of the form editing (see here an example of the usage). I recommend you to set the setting as the default before you call navGrid (see here the corresponding code).
Moreover from the information which you wrote in comments I think that you should better use dataUrl instead of value of the editoptions. So jqGrid can loads the list of the values directly from the server during creating of the edit form. Sometimes the usage of buildSelect is useful. It help you to provide the data from the server in for example JSON format and construct the <select><option value="...">...</option>...</select> HTML fragment based on the server data inside of buildSelect. Additionally it could be required to set ajaxSelectOptions: { cache: false } jqGrid option (see here or here) or to force re-validation of the previous server response on the dataUrl with respect of HTTP header "Cache-Control: private, max-age=0" (see here and here)
Related
We are using Tablulator v4.6.3 for creating an interface in one page with the table and having one field is to make a selection by the user from the list of values like below.
editor: "select", editorParams: { values: ["Start", "Draft", "Save", "Submit", "Close"] }
In another page, we are displaying these saved data to allow modifications for these earlier selected values, how do we make these selected values are selected automatically in the column and allowed for further selection (to modify existing selection).
As a test , we are setting this values statically using below
rowFormatter: function (row) { row.getCell("status").setValue('Draft'); },
but if fails some way and shows errors in browser with this test code.
Can anyone please help us on this.
Thank you.
I am trying to view the selected entry from the grid panel into the textfield box.The textfield box is in some other file and the code to select the entry are in other file.
{
xtype: 'textfield',
name: 'file',
fieldLabel: 'type',
id: 'type',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
}
this is generating a text field of field "type".How should i get the selected value in the grid to the textfield type
you can do this with or without a form, but i agree forms make things easier
check out this fiddle:
https://fiddle.sencha.com/fiddle/31le
hint: try to not use using id:'type' configs is dangerous as you can only have on id with that name in the WHOLE application, you should be using itemId:'type' which you can find
I hope I understand you correctly but you have a grid and want to display the record in another component?
I did something similar for another question but I think this might work for you aswell.
If you happen to have a grid and you want to display the selected record, you should wrap your fields inside a Ext.form.Panel (https://docs.sencha.com/extjs/6.0.1/classic/Ext.form.Panel.html).
Now you have 2 components. A grid and a form panel. Now when you select a record inside a grid you can search for your Ext.form.Panel (Or create it inside an Ext.window.Window to display it on the fly) and use the loadRecord method from the Ext.form.Panel to display your data inside it.
Here is a working example:
https://fiddle.sencha.com/#view/editor&fiddle/31fr
I'm using X-Editable to give users the possibility to edit values inline. This works great, but I now want to use it for some money values which are localized in a "European way" (e.g.: € 12.000.000,00). When I click edit, I want the input to only contain 12000000 though.
Is there a way that I can sanitize the value in X-editable before it gets displayed in the X-Editable input? All tips are welcome!
See the plunker http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b. From X-editable documentation it is evident you can use value property of configuration to format the value you want to send to the editor as shown below.
Element displaying money value in your HTML:
12.000.000,00
Javascript code in your HTML:
<script type="text/javascript">
$(document).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function(input) {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
}
});
});
</script>
If you want to format the value back for display after editing you can do that in display property of the configuration hash like this:
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function() {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
},
display:function(value) {
//var formattedValue = formatTheValueAsYouWant(value);
//$('#money').text(formattedValue);
}
});
Seems like there is no callback function available for what you want.
so You need to make it outside of the library.
here is how to do it.
$(document).on("focus",".form-control.input-sm",function(){
//remove all characters but numbers
var _val = $(this).val().match(/\d/g).join("");
//set it.
$(this).val(_val);
});
replace the part of .form-control.input-sm into your case.
I just tested this on the library's demo site's first demo fieled named "Simple text field" with chrome developper tools
http://vitalets.github.io/x-editable/demo-bs3.html
Since x-editable form would be generated right before showing up.You need to hook an event to document and wait for input field inside of x-editable form gets focus which is the time x-editable shows up and edit the value into whatever you want.
and Yes, This method works AFTER the input field shows up but It's hardly possible to notice that value is changing after it gets displayed.
This is my first time working with datagrids so please forgive anything that is unclear.
I have json text that is being implemented in a dojo datagrid (dojox.grid.DataGrid).
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xAgent.xsp"});
var layout = [
{cells:[ [
{field:'firstname', name:'First'},
{field:'lastname', name:'Last'},
{field:'policy', name:'Policy'},
{field:'lastaccessed', name:'Last Accessed'}
] ], noscroll:false
}
];
grid = new dojox.grid.DataGrid({
store: jsonStore,
structure: layout,
rowsPerPage: 50,
autoHeight: 50
}, '#{id:gridNode}');
grid.startup();
The grid itself is created perfectly fine and all data is displayed as desired, but I would like for one of the fields (the 'policy' field to be specific) to link towards another page. I need to include the information within the 'policy' field when I redirect as the policy number will be used in the next page.
In other words, I want all of the policy fields within my table to have their own unique external link that will contain the policy number from that respective field. The easiest way I can think of doing that is by changing the layout variable that feeds into the DataGrid's structure parameter, but there might be an easier way. If anyone has any ideas I would be very grateful.
Thanks in advance.
You can use formatter to create links, dojo buttons etc inside the grid.
Formatter is a JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML or even a dijit widget.
So in your case, add a formatter to policy column
{field:'policy', name:'Policy', formatter: createLink},
Then define the function with necessary external link. For example:
function createLink(data){
return (""+data+"");
}
Reference: http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#id3
I am currently using bootstrap editable for the front end of my application.
See plugin: http://vitalets.github.io/x-editable/index.html
What I am doing is loading data onto a page via Ajax and allowing each item on the page to be editable. For example; I load a user onto a page and allows for his first name, last name and date of birth to be editable.
Because I am loading via Ajax, when a second user is loaded for example or third and i try to edit the first name etc, I keep getting the values of the first user loaded initially.
I am presuming it may be cache. I have tried setting display on the function and even auto-text.
Is there anyway I can reset or clear the editable form?
see sample code below:
function editable(obj) {
$('#title, #lastName, #firstName).editable('option', {
pk: obj.lId,
placement: 'bottom',
emptytext: 'Empty',
display: function(value) {
$(this).text(value);
},
validate: function(value) {
if ($.trim(value) === '') {
return 'This field is required';
}
}
});
}
Assuming that obj is your new user, and it contains the title, last name, and first name of the new user, all you have to do is set the values of the x-editable objects:
$('#title').editable('setValue', obj.title);
$('#lastName').editable('setValue', obj.lastName);
$('#firstName').editable('setValue', obj.firstName);
The reason why your example is not working is because x-editable separates the display from the actual value. Your display function is called whenever the user changes an x-editable value. By default, x-editable displays whatever the value is set to. But perhaps the internal value is different from a displayed value, that is what the display function is used for - it has no impact on the actual value, just the display of the value.
X-Editable has a lot of different methods you can take advantage of, you can find them on the 'Methods' tab here: http://vitalets.github.io/x-editable/docs.html#editable