In the editOptions for select dropdown we pass some static values after the instantiate of the grid_data. Everything works fine until we choose editing. As the data remains constant and static.
All the dropdown remains same. But this should not happen, it has to load the appropriate data to the rows which should be dynamic.
var data = {
"id" : "cityGrid",
"grid_data" : response,
"colNames" : ['City Name','Select State','local'],
"colModel": [
{"name":'cityName',"index":'cityName', "width":150,"editable": true,"editoptions":{"size":"20","maxlength":"30"}},
{"name":'selectState',"index":'selectState',"width":90,"editable": true,"edittype":"select","editoptions":{"value":"TN:Tamilnadu;AP:Andhrapradesh;MP:MAdhyapradesh",
"class":"chosen-select","width":200,"custom":true,"custom_func":util.applyChosen}},
{"name":'local',"index":'local', "width":70, "editable": true,"edittype":"checkbox","editoptions": {"value":"Yes:No"},"unformat": "aceSwitch"}
],
"editurl": "/dummy.html",
"caption": "City Information"
};
"editoptions":{"value":"TN:Tamilnadu;AP:Andhrapradesh;MP:MAdhyapradesh"
I also came across dataUrl passing after few search results. But it was not upto the mark as i need to send a param with it which is not possible there.
And even thought of taking the value of one particular row data and make it select on top and load rest of with static as i use the chosen form of data which triggers on keypress and my problem would get solve. The problem here is with editing with two types one with single row and multirow.
This is a phase where i got struck. Has anybody solved this problem. Any new version of jQgrid has a answer to this problem?
Thanks in advance
First of all you do can generate dataUrl dynamically based. The easiest way would be to define dataUrl as callback function: dataUrl: function (rowid, value, name) { ... }.
On the other side it seems that you need to generate select with <option> where value is not the same as the displayed text: <option value="TN">Tamilnadu</option>. In the case the value TN will be saved in the column after editing and so you should probably hold (to fill) the corresponding column with data like TN, AP, MP instead of Tamilnadu, Andhrapradesh, MAdhyapradesh. You should use formatter: "select" (see here) to display input values TN, AP, MP like Tamilnadu, Andhrapradesh, MAdhyapradesh. The formatter formatter: "select" uses formatoptions.value or (it it's not defined) the editoptions.value value. So one have to be able to set editoptions.value (or formatoptions.value or both) before the grid content will be created, so before the server response will be processed by jqGrid.
To be able to set the editoptions.value dynamically one can use setColProp method. If you loads the data from the server one can include all column property with exception name property in the server response. One can do this inside of beforeProcessing callback for example. The answer this one and this one describe the approach detailed. The answer shows how one can use common column name property ("c1", "c2", "c2") and uses jsonmap to read the relatively common named data. One can set jsonmap instead of name property if it's needed.
Related
I integrated on my application, datatables, to give more functionalities to my HTML tables. It works correctly, however, when I want to perform a search, through an input, I would like to save the state of the table, at the page change, but also the associated filter, in the input. To do this, here is the code that works (provided that it is put in each HTML file containing a table):
stateSaveParams: function( settings, data ) {
data.**col1_filter** = $('#**col1_filter**').val()
},
stateLoadParams: function( settings, data ) {
$('#**col1_filter**').val(data.**col1_filter**)
},
What I want to do now, is to generalize this code, within a "script.js" file, so that the next time I create a table, I just have to apply the "datatable" class, and everything is done directly.
My question is : how can I specify the name of the input field, for "stateSaveParams" and "stateLoadParams", instead of mentioning in hardcopy the name of the field (which is not named the same each time) ?
Thank you very much in advance,
I want to specify, that I did not find a solution, despite my multiple searches, before this post.
I would like to find a way of writing a SELECT statement which includes using the column name as a search criteria in a data_glossary table.
Example SQL statement
SELECT field1, field2, field3
FROM table1
I want to include field_definition from a table called tbl_data_glossary using WHERE data_reference = 'field1' whenever I run a script. So I should get two data sets, the first one has the data, the second has what the data set values mean.
I hope that makes sense, I want to implement this in a way where a BI tool could not only pull values but include the information required to provide help for business users.
I have tagged this as SQL and Javascript but maybe you have a better way of approaching this.
I wonder if I need to setup my select statement using an array of variables somehow and then also use the same array in a WHERE data_reference IN [array] type statement.
So, if one of the fields in my SELECT statement is reference_definition_name I want a sub query or separate query to look up that column name as a value which is held in the column called reference_code in tbl_reference_data
Here's the tbl_reference_data table which contains the data glossary with example data:
(reference_def_id,
reference_def_name,
reference_def_created,
reference_def_last_updated,
dataset_category,
dataset_type,
reference_code,
reference_name,
reference_description,
reference_status,
reference_lang)
Example data:
('8f603ffe-6800-11ea-bc55-0242ac130003', 'Data Origin Identifiers', '17/03/2020 16:34', '17/03/2020 16:34', 'Reporting', 'data-glossary', 'reference_definition_name', 'Definition Name', 'This is the name of the reference data set related to the purpose of the reference definitions.','ACTIVE','EN')
Thanks, Matt
as far as I understand there is only the callback dataFiltered, which is used for the whole table. It is triggered by all filters indifferently.
Is it possible to get a callback for a specific single header filter?
So that I can call a function as soon as a certain header filter becomes active?
I imagine it to be something like this:
{title:"Name", field:"name", headerFilter:true, headerdataFiltered:function()}
Is there possibly a workaround?
Thanks a lot!
(I would be especially grateful for non-jquery solutions)
Thanks also for this realy wonderful tool Tabulator.
Thanks for your kind words, it is always great to hear that Tabulator is appreciated.
The reason it is called when any filter is applied is because multiple filters can be applied at once, with Complex Filtering a complex and/or filter set can be applied so it would be hard to isolate down to specific columns in all cases.
The dataFiltered callback does get passed a list of all currently active filters so you can see if your affected column is in that:
var table = new Tabulator("#example-table", {
dataFiltering:function(filters){
//filters - array of filters currently applied
},
});
If you need to see if the column has just been filtered you can store a copy of the previous value of this object outside the callback and then compare the old and new values on the next call.
The other option would be to use a custom editor in the header filter then you could manually decide when the success function is called that initiates the filter and then reference an external function from there
I have some issues with a project I inherited that is using DataTables and it's filter functionality.
The issue is that in the main function which populates the table, it has the following code:
var rowPos = mainTable.fnAddData(tableData, false)[0];
var rowData = mainTable.fnSettings().aoData[rowPos];
$(rowData.nTr).attr("id", "UID" + id); // Since the id doesn't always match the row
rowData.ID = id;
Now I know that the 3rd line is pretty much useless unless the 'false' argument of the fnAddData is set to 'true'. This is because the HTML elements don't actually exist in the DOM when set to 'false' so there is no way of setting the 'id' attribute.
I can't use 'true' because it will render the table in about 4 seconds when adding several hundred rows to the table. But when I use 'false' it renders the table almost instantaneously (less than a second). So using the 'true' flag in 'fnAddData()' is not even an option.
I see the last line seems to be doing something, but I've tried to find documentation for that on the DataTables web site but can't seem to find anything of value. I'm assuming it allows someone to bind a UID (unique record ID) to the actual row number, which is essential what is wanted.
The code I have also makes use of the 'fnRowCallback', which tries to set the 'id' attribute at this time, such as:
var id = mainTable.fnSettings().aoData[tablePos].ID;
$(row).attr("id", "UID" + id); // Since the id doesn't always match the row
The main problem is that it does not seem to work! If I apply a table filter and purposely filter out all records except the record which should be 'UID' 3, in the 'fnRowCallback', my 'id' variable is set to 0. So the attribute set is always 'UID0' and causes all sorts of bad references.
Is there a way to properly assign my database record ID to table row's? And then refer them later on, such as in the 'fnRowCallback' function? Or is there some other trick someone has managed to figure out?
Thanks in advance for your time and responses!
Update: 2012.11.01 12:33 - I've added an answer below based on various findings so far!
I've been doing a bit of digging and here are my conclusions so far...
Using a JavaScript object inspection that I found on this SO page (by 'goreSplatter') I was able to dump various DataTables objects.
I realized that my 'rowData' object was a tiny container, as expected. And realized that the 'rowData.ID' property did not originally exist in this data structure. I guess the application developer inserted it himself and it makes sense.
From the 'fnRowCallback()' function, I did the same object inspection to try and find the initial 'rowData' that I initialized my 'ID' on. I found it as follows:
var rowData = mainTable.fnSettings().aoData[tablePos];
And when I dump the value of 'rowData.ID' I realized that my 'ID' value was properly set as expected.
The problem occurs when I do my filter! The 'rowData.ID' seems to always be '0' for some reason. It seems like the DataTables takes a copy of the object but does not set any properties it does not know and thus results in '0'.
So it is definitely a bug (at least, in my opinion)! I will contact the DataTables people to see how they would expect users to bind custom application data to their rows and see if they can also set these properties during a filtering process.
I will report any further findings later on.
I have a collection of objects in my view model. I'm experiencing an issue when binding a value to select control. The value is a JS object and not a primitive type. When I have more than one object in the bound collection and change the select control, all of the other object's values update to the newly selected one. It's like all of the values are bound to the same instance inside the foreach binding. The error only seems to happen when new rows are inserted, not when simply editing existing ones.
I have striped out a lot of the complexities and have an example showing the issue on JSFiddle.
http://jsfiddle.net/zero21xxx/5vgDy/
Steps to see the Error
Select Settle Type from the drop down of row 1
Select "Two" from the new drop down to the right.
Select Settle Type from the drop down of row 2
Both row 1 and row 2 will now both be set to "One" in the select box.
I would expect that a change in one row would not effect any of the other rows.
It's all a bit complicated how you have it setup, however, I think the problem is, that your ids are not what you expect,
function getValues(tabId) {
console.log("tabId " + tabId);
if (lookUp[tabId]) {
if I add that to your code, it show's the same tabId, which means you are dealing with the same objects by the looks of it.
if I change getValues so each time it does
function getValues(tabId) {
console.log("tabId " + tabId);
return [new DatabaseField(nextId(), "Name", "Attorney Name", DataType.STRING.id),
new DatabaseField(nextId(),
"Type", "Settle Type", DataType.DROPDOWN.id)];
}
also I changed all the observables with [] to observable arrays...
then it seems to work. fiddle... http://jsfiddle.net/keith_nicholas/wmxJX/
Each time that you choose a different selectedDatabaseField it rebuilds the availableOptions.options. Each of the rows are bound against these same options as choices. When the options are rebuilt, then each row's selected value is no longer a valid choice.
Even if the object looks exactly the same it is not equal unless it is a reference to the same object.
So, since the options have changed and the currently selected value is no longer valid, the value binding will assign the first option as the value (unless you have an optionsCaption specified).
So, you probably don't want to rebuild the options, if they are already built or you would want separate options for each row rather than binding against the same database field object.