I am trying to integrate selectize in Datatable Editor, but get an empty value (for the field 'country'), if I click on edit.
I have a datatable defined as follows :
var table = $('#example').DataTable({
dom : "Bfrtip",//"Bfrtlip",
ajax : './DataChannelServlet?buster=' + new Date().getTime(),
lengthMenu : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "All" ] ],
select: {
style: 'multi',
selector: 'td:first-child'
},
order : [ [2, "asc"] ],
columns : [ {
data : null,
defaultContent : '',
className: 'select-checkbox',
orderable: false
},{
data : "Id",
defaultContent : ''
},{
data : "Name",
defaultContent : ''
}, {
data : "DisplayName",
defaultContent : ''
}, {
data : "country",
defaultContent : ''
}] ,
fixedHeader: true,
buttons: buttonArray
});
The country column has different values separated by ';'.
I have defined the datatables editor as follows:
editor = new $.fn.dataTable.Editor({
ajax: "./DataChannelServlet",
table: "#example",
legacyAjax: true,
idSrc: "rowID",
fields: [{
label: "Id",
name: "Id",
type: "readonly"
},
{
label: "Country",
name: "country",
type: "selectize",
options: getCountry(),
opts: {
placeholder: 'Enter a search',
delimiter: ';',
searchField: 'label',
valueField: 'value',
persist: true,
maxItems: null,
create: false
}
},{
label: "Name",
name: "Name",
type: "readonly"
},{
label: "Display Name",
name: "DisplayName",
type: "readonly"
},{
label: "Row ID",
name: "rowID",
}],
});
The getCountry() method provides the list of countries available to pick. If the country column has single country, then the editor displays the value in the edit screen. However, if the country column has multiple values for example UK;Belgium, the editor displays empty text box for country. How can I get the editor to display country value in the screen, the same way it allows me to select multiple country values separated by ';'?
I was passing the country value as a string. So, instead of passing it as string from the Object, I passed it as String Array and that worked for me.
So in my Java class, I had country declared as follows :
private String country; and I changed it to private String[] country.
Related
i want to get 2 value from select option province and city in on change event, then send it to my api datatable but why i always only getting the first value while i clicked that select options for few times? this is my code
$(document).on('change', 'select[name="province"], select[name="city"]', function() {
province = $('select[name="province"] option:selected').val()
city = $('select[name="city"] option:selected').val()
const empdataTable = new ServerSideDatatable({
element: '#table-emp-address',
url: '/user/user/get-data-user-address',
postData: { 'province': province, 'city' : city }, //here i only get data province
columns: [
{ data: 'id', name: 'id', title: 'Id', orderable: false },
{ data: 'name', name: 'name', title: 'Name', orderable: true },
{ data: 'Province', name: 'Province', title: 'Province', orderable: false },
{ data: 'City', name: 'City', title: 'City', orderable: false },
],
buttons: [
{ urlProperty: 'urlDetail', label: '<i class="icon-search4"></i> Detail' },
]
})
})
what wrong here?
You can try initializing the province and city like below.
province = $('select[name="province"]').val();
city = $('select[name="city"]').val();
You can capture <select> tag values without option:selected
Using ExtJS 4.2.3. Have form with treecolumn xtype field which contains string value with number in begin. Column has 3 lvls of structure. On first lvl sort needs to be in order like (2, 3, 5, 40, 100 and etc).
After picking third lvl value in selection form, value in box will look like:
3.ABC.<BR>3.23.ABCCDD.<BR>3.23.5. ABCC
Sample of code:
enter Picker = new Project.Picker({
title: "Title1",
proxyCfg: {
url: Ext.state.Manager.get("url") + "TreeList",
type: "ajax"},
idProperty: "id",
defaultRootId: "NULL",
nodeParam: "parent_Code",
PickerCfg: [
{ name: "id", type: "string", isSC: false },
{ xtype: "treecolumn", name: "Fieldname", header: "Header1", type: "string", isSC: true, isHC: true },
{ name: "name2", type: "string" },
{ name: "code", header: "Header3", type: "string", isSC: true}],
viewConfig: {
listeners: {
itemdblclick: function (view, record) {
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("id", record.get("id"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("Fieldname", record.get("Fieldname"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("code", record.get("code"));
trigger.setValue(record.get("name2"));
this.up().up().destroy();
}
}
},
sorters: [{
property: "code",
direction: "ASC"
}]
}).show(this, function () { this.getComponent(0).DMS_search(); Picker.getComponent(0).getView().refresh(); });
}
},
tpl: "<table class='Gridd' style='border-collapse: collapse; border: medium none;'><tr><td><b>[Header1]: </b></td><td style='width:100%;'>{Name2}</td></tr><tr><td><b>[Header3]: </b></td><td>{code}</td></tr></table>"
Asking for help with sorting in selection form.
When we filter Kendo datagrid, use different types of operator like eq, and, or,
gt, lt etc. that's work well in string and number. When we use date to match another date using eq operator does not work but gt,lt works.
This is my source code
dataSource: {
data: data,
schema: {
model: {
fields: {
date: { type: "date"},
id: { type: "string" },
name: { type: "number" },
account: { type: "number" }
}
}
},
sort: [ { field: "date", dir: "desc" }],
filter : [{
field: "date", operator: "eq", value: dateString
}],
pageSize: 30,
}
probably your datestring is not being read has a date, so when it goes filter it throws a error.
Try to or use the format propertie in the grid
columns : [
{
field : "Date",
title : "Date",
format : "{0:dd-MMM-yyyy}",
filterable: {
ui: "datepicker"
}
}
]
below i have a kendoUI grid that fetches data from a server. The user can then edit two columns in the grid. I have a separate button that will post the data back to the server and i do not use the kendo grid's UPDATE transport for this. The problem i am having is that if i fetch the data from the grid, it does not reflect the user inputs. For example, to get to the underlying data for the grid i do the following:
products= $("#Grid").data("kendoGrid").dataSource.data()
But when i iterate over products and check the NewPrice or Comment property, it's always blank. Here is how the grid's data source is defined:
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Portal/API/GetProductPrices?id=" + pId,
dataType: "json",
success: function (data) {
localModel.userId = data.userId;
localModel.products = data.Products;
return options.success(model.products);
},
});
}
},
},
scrollable: false,
selectable: true,
schema: {
model: {
id: 'Id',
fields: {
Item: { type: 'string', editable: false },
Price: { type: 'number', editable: false },
NewPrice: { type: 'number', editable: true },
Comment: { type: 'string', editable: true, validation: { required: true } },
}
}
},
columns: [
{ field: "Price", title:"Price"},
{
field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
template: "#=NewValueTemplate(data)#",
},
{ field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]
Any advice in resolving would be appreciated
You haven't specified the editing type that you are using.
Which type are you using: inline, batch or popup ?
Is only this the datasource ? I see no update function.
I suggest you take a look at the three demos.
Batch
Inline
Popup
The worst thing is that you haven't specified the value of the property editable.
By default it is false, that means the kendoGrid is not editable, even if you have specified editable: true over your model fields.
Shortcut to "Editable" configuration
update #2 :
As already said here
If the data source is bound to a remote service (via the transport option) the data method will return the service response.
So, when you use dataSource.data() method on your grid, if you haven't updated correctly your datasource, you should receive all "old" data. (I found strange that you get blank value over those properties, maybe a cache problem)
As I already said, your dataSource doens't provide no update function.
Here you are an example about the configuration of the update function in kendo dataSource, with request to remote service.
Suggest you to look on both examples:
Example - specify update as a string and Example - specify update as a function
Please implement the logic from the following example:
var _roleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, title: "Software Engineer" },
{ id: 2, title: "Quality Assurance Engineer" },
{ id: 3, title: "Team Lead" },
{ id: 4, title: "Manager" }
]
});
var _peopleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
{ id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
{ id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
{ id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
]
});
var _grid = $("#grid").kendoGrid({
dataSource: _peopleDataSource,
columns: [
{
field: "name",
title: "Name"
},{
field: "roleTitle",
title: "Role",
editor: function(container, options) {
$("<input data-bind='value:roleTitle' />")
.attr("id", "ddl_roleTitle")
.appendTo(container)
.kendoDropDownList({
dataSource: _roleDataSource,
dataTextField: "title",
dataValueField: "title",
template: "<span data-id='${data.id}'>${data.title}</span>",
select: function(e) {
var id = e.item.find("span").attr("data-id");
var person =_grid.dataItem($(e.sender.element).closest("tr"));
person.roleId = id;
setTimeout(function() {
$("#log")
.prepend($("<div/>")
.text(
JSON.stringify(_grid.dataSource.data().toJSON())
).append("<br/><br/>")
);
});
}
});
}
}
],
editable: true
}).data("kendoGrid");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>
You may view the demo here: http://jsfiddle.net/khNsE/175/
In this case, i needed to allow some rows based on data rules to enter 'edit mode' at the same time, so specifying inline, popup, etc was not an option. What i did instead was use a custom template function when defining the grid columns. the custom template function returned html, but in the html i used the data-bind attribute to bind to my model. Finally on the DataBound event of the grid, i bind my model to the rows.
field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",
....
....
function newValueTemplate(d){
if (d.IsEditable)
return "<input type='number' data-bind='value:NewPrice' />"
else
return "<span />"
}
function gridDataBound(e){
var items = this.dataSource.view();
var gridRows = this.tbody.children();
for (var i = 0; i < items.length; i++)
kendo.bind(gridRows[i], items[i]);
}
I have seen a number of questions on sorting, but I couldn't find any for my very simple case.
I have taken the online example (where if I add the sortable and filterable, they don't work on the category field either), and modified it very slightly, just to use very simple local json data (to make it eaier to see what I am working with while learning the grid.
So, looking at the category field I want to sort and filter, in my columns definition I have ....
columns: [
{
...
{
field: "Category",
title: "Category",
width: "180px",
editor: categoryDropDownEditor,
template: "#=Category.description#"
},
and in the data source, the category field consists on s simple json object with 2 fields code and description (where code it to be the value field, and description is what to display) ...
var gridData = [
{
....
ProductID : 1,
ProductName : "Chai",
Category : {
code : '1',
description : "Beverages",
},
...
];
I have added the sortable, and filterable properties to the grid however the category field show the sort arrows (which toggle when clicked), but the column data does not sort or filter.
How do I will the sort and filter to look at the description field to carry out these operations?
Note I also have a combo cell editor attached
function createCombo(container, options, data) {
var input = $('<input name="' + options.field + '" />')
input.appendTo(container)
var combobox = input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "description",
dataValueField: "code",
dataSource: data,
});
where the data is of form
[
{code: 'code1', description: 'desc1'},
{code: 'code2', description: 'desc2'},
]
So I would need the combo to also populate the field with the correct value.
Thanks in advance for any help!
<script>
var gridData = [
{
ProductID: 1,
ProductName: "Chai",
Category: {
code: '1',
description: "beverages",
}
},
{
ProductID: 1,
ProductName: "bhai",
Category: {
code: '1',
description: "aceverages",
}
},
{
ProductID: 1,
ProductName: "dhai",
Category: {
code: '1',
description: "zeverages",
}
}
];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: gridData,
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ProductID",
title: "Contact Name",
width: 200
}, {
field: "ProductName",
title: "Contact Title"
}, {
field: "Category.description",
title: "Category",
width: "180px",
template: "#=Category.description#"
}]
});
});
</script>