I have this problem in which I have a Datatable with a "columnDefs" attribute that contains 4 column definitions in which each column defines a "target" that calls a column index (i.e "targets": 1). That is fine. However, I also want to create a datatable editor (bubble editor to be exact) that has a "fields" attribute containing "label" and "name". How can I tie up the "label" field of my editor to the datatable which only has "columnDefs" attribute without declaring a "column" attribute ? Thanks in advance.
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
Related
Good day,
I have a datatable with the jQuery plugin that makes it editable and transform to text all the table rows.
Need to create a dropdown menu to select and store on database what is selected.
Everything is fine, since the plugin have an option to create a row with select options, the problem here is that the field that i have on the database is based on VARCHAR and the plugin only stores data with ENUM on the selected dropdown field.
So i cannot change the database field to ENUM because its going to delete or alter the already exixting data and could be a problem.
Example of what i see when i click on EDIT and see the dropdown options:
When i hit on SAVE button it shows this on the database:
This happens because the column type on the database is VARCHAR and the plugin needs it to be ENUM to read the data as text.
This is the code to draw the table and the edit plugin data:
$(document).ready(function(){
var dataTable = $('#tabla_clientes').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
},
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fectch.php",
type:"POST"
}
});
$('#tabla_clientes').on('draw.dt', function(){
$('#tabla_clientes').Tabledit({
url:'action.php',
deleteButton: false,
autoFocus: false,
buttons: {
edit: {
class: 'btn btn-sm btn-primary',
html: '<span class="glyphicon glyphicon-pencil"></span>   Editar',
action: 'edit'
}
},
dataType:'json',
columns:{
identifier : [0, 'id_customer'],
editable:[[1, 'customerID'], [2, 'RFC'], [3, 'firstname'], [4,'lastname'],[5,'email'],[6, 'tipo_cliente','{"1":"CONTADO","2":"CREDITO"}']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
}
});
});
I already did some research on the internet but i cannot find anyone with a solution or with this problem.
Like i said, i cannot simply change the field to ENUM because there is a LOT of information that may be changed or deleted because of the type change.
Does anyone know a solution to store the value as text with the VARCHAR type when selecting the dropdown info?
Thanks for the time and patience. Have a excelent day.
I already found a workaround very simple for this.
Instead of adding directly the value as number on database.
Added an IF to compare the number and store text on a variable.
$tipo_cliente = $_POST['tipo_cliente'];
$sitio = $_POST['sitio']
if ($tipo_cliente == 1) {
$tipo_cliente = 'CONTADO';
} else
{
$tipo_cliente = 'CREDITO';
}
I have created a table with few columns getting data from Odata and i have created another column will have just check box.
My Code is
var oTable = new sap.ui.table.Table("Brand",{
title: "Brand List",
// visibleRowCount: 10,
//firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None,
navigationMode: sap.ui.table.NavigationMode.Paginator,
fixedColumnCount: 10,
width:"700px"
});
oTable.addColumn(new sap.ui.table.Column({
// visible: false,
label: new sap.ui.commons.Label({text: "Country"}),
template: new sap.ui.commons.TextView().bindProperty("text", "COUNTRY_ID"),
sortProperty: "COUNTRY_ID",
filterProperty: "COUNTRY_ID",
flexible : false,
width:"1px"
}));
//Define the columns and the control templates to be used
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Brand"}),
template: new sap.ui.commons.TextView().bindProperty("text", "BRAND"),
sortProperty: "CUSTOMER",
filterProperty: "CUSTOMER",
width:"250px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "2013",textAlign:"Center"}),
template: new sap.ui.commons.CheckBox().bindProperty("checked","checked"),
sortProperty: "checked",
filterProperty: "checked",
width: "100px",
hAlign: "Center"
}));
It works fine when the table length is 10 ( defined in the table creation statement). But if my brand list is more than 10 ( some times it can be more than 100) , still the no. of check boxes is created is 10. so in the table if go to next page (paginator mode ) , the check boxes are still the same.
So if i select a brand in first page and select a brand in third page , the check box remains same. Its not creating check boxes except for the first page.
Please help me on this issue.
Thanks
Sathish
Attempt 2. This time, I'll try answer the question. Sathish, it appears as though your model does not account for the checkbox property. Your OData service is returned data to you (using JSON notation for simplicity) like this:
data : [{
"COUNTRY_ID" : "USA",
"BRAND" : "Nike"
},{
"COUNTRY_ID" : "GER",
"BRAND" : "Adidas"
},{
"COUNTRY_ID" : "ITA",
"BRAND" : "Lotto"
}]
But you are using the returned model as if there is a third property in each object, named 'checked'. E.g.
data : [{
"COUNTRY_ID" : "USA",
"BRAND" : "Nike",
"checked" : false
},{
"COUNTRY_ID" : "GER",
"BRAND" : "Adidas",
"checked" : false
},{
"COUNTRY_ID" : "ITA",
"BRAND" : "Lotto",
"checked" : false
}]
If this property is not part of the model, then you effectively have nothing to bind your checkbox to. Because the property does not exist in the model, the check box column is not bound to anything. When the table is initialised to 10 rows, that is the number of checkbox controls you've created, no more. Once you begin paginating, the number rows never changes, but the pagination binds the next 10 rows of your OData dataset to the table rows and columns. Because the dataset doesn't contain the property 'checked' (my assumption), the column listing the checkboxes is not rebound to the model's data, thus the checked checkboxes never change.
I would suggest you do one of two things - update the OData service to include this additional property (checked), and bind the checkbox column to that property, or two, copy the model data to a new model, add the 'checked' property to each object in the collection, and then bind your table to this new model. Either way, you need to ensure that the model has a property to which you can bind the checkboxes.
This link to an editable Table control demonstrates the principal I'm referring to:
Editable Table control
In this example, the author is making a table editable by using the 'editable' property in each object in his collection. This property, which exists for every entry in the model's data, is bound to the TextField control in the table's second column.
template: new sap.ui.commons.TextField({
value: '{lname}',
editable: '{edit}' // Binding editable property of text field to 'edit' attribute of Model
}),
You'll need to do something very similar, but for the Checkbox, ensuring the model has a property to bind to.
Good luck.
I'm in the AngularJS environment, and trying to get a jqWidgets TreeGrid working.
I have the dataAdapter all wired up with the Json formatted data, however the grid renders only one row.
I also have a test treeGrid on the same page, and with sample data, which is working fine.
I'm putting the final Json data setting side-by-side to try and determine where I'm going wrong.
I've used this page as a guide to wire up the treegrid settings, etc. http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm
Here is the html showing the jqx treegrid directive for the "bad" grid:
<jqx-tree-grid jqx-instance="jqGridHierObj" jqx-settings="vm.jqGridHierSettings"></jqx-tree-grid>
And the "bad" Json data tree settings binded vm.jqGridHierSettings (too large to post inline):
http://www.bobmazzo.com/grid/TreeGrid_Data_Bad.txt
and here is the "good" grid with Employee test data :
HTML:
<jqx-tree-grid jqx-instance="jqGridEmpObj" jqx-settings="vm.jqGridEmpSettings"></jqx-grid>
vm.jqGridEmpSettings Json data :
http://www.bobmazzo.com/grid/TreeGrid_Data_Good.txt
and from my Angular controller code, a snippet of the javascript with Json data bindings :
I need help to figure out why the "bad" grid is not working ! And why it only renders one row, where is should be showing a hierarchy of data.
thanks.
Bob
I found the solution. You must define the “children” as an array type in the 'source' object; that is, prior to passing that object into the dataAdapter. See the dataFields property below :
var source = {
dataType: "json",
dataFields: [
{
"name": "id",
"type": "number"
},
{
"name": "field0",
"type": "string"
},
{
"name": "field1",
"type": "number"
},
{
"name": "field2",
"type": "number"
},
{
name: 'children', // MUST DEFINE CHILDREN AS ARRAY TYPE
type: 'array'
},
],
hierarchy: {
root: 'children'
},
id: 'id',
localData: myData
};
var dataAdapter = new $.jqx.dataAdapter(source);
I use the dijit.form.select with the grid editor like this:
editor({
label: 'status',
field: 'status_name',
editorArgs: {
style: "width:75px;",
options: task_status
},
className: 'style8'
}, Select, "dblclick"),
when I open the select field and choose an option from the list, this returns the 'value' of selected option not the name of it.
how to get the value instead of the value?
Check the objects in your options list.
Each object should have a label and value property. The label is what will be displayed when selected.
I'm trying to remove duplicates from a Dojo FilteringSelect without changing the contents of the attached itemFileReadStore data store. I can't seem to find any information on how this is done, if it is indeed possible.
I'm thinking I may have to extend the FilteringSelect Dijit and provide the functionality myself but I'm hoping to not have to.
The reason I'm trying to remove duplicates with the FilteringSelect and not the data store is because I'm using the same data store with three instances of the FitleringSelect, each displaying different values from each row of the store.
If your store FilteringSelect searchAttr is the same as in your dataStore "identifier", you will see a unique set of values in the dropdown.
For example, if you change the identifier from myStore to "color", your dropdown will show only red, orange and yellow instead of having a duplicate yellow.
That is why, if you use this store definition in your FilteringSelect and set the searchAttr to "Fruit" you will see only two values; orange and apple
var myStore = new dojo.data.ItemFileReadStore({
url: 'data.json'
});
<div dojoType="dijit.form.ComboBox" store="myStore" id="fsKeywords" searchAttr="name" onChange="filterGrid()"></div>
data.json file:
{
identifier: "Fruit",
label: "Name",
items: [
{
"Fruit":"orange",
"color":"red",
"size":"small"
},
{
"Fruit":"orange",
"color":"orange",
"size":"big"
},
{
"Fruit":"orange",
"color":"yellow",
"size":"small"
},
{
"Fruit":"apple",
"color":"yellow",
"size":"small"
}
]}
I wonder if there is a way to change the store identifier programatically