i tried to fire the Create event in transport section of the Kendo Datagrid. I tried to read the whole documentation for Kendo Datagrid but i'm not able to fire create, update and destroy events.
Could somebody please tell me what can be wrong in my code?
Thanks for any advice.
Here is the source of method:
/**
* Fill data grid by users
* #param {Number} a
* #param {Number} b
* #return {Number} sum
*/
$scope.initTable = function() {
// get access token from localstorage
var token = localStorage.getItem($rootScope.lsTokenNameSpace);
// set pagination data
var paginationData = {
"token" : token,
"data" : {
"page" : 1,
"items_per_page" : 20
}
};
$("#grid").kendoGrid({
dataSource : {
transport : {
// read list
read : function(options) {
$.ajax({
url: $rootScope.apiBaseUrl + "user/list",
dataType: "json",
type : "POST",
data: JSON.stringify(paginationData),
success: function(response) {
console.log("List of users succesfully obtained");
console.log(response.result);
// pass response to model
options.success(response);
// $notification.enableHtml5Mode();
},
error: function(error) {
console.log("user list request error");
console.log(error);
$notification.error( "User list cannot be loaded", "Please try again in a minute.");
}
});
},
// create list item
create : function(options) {
console.log("Create function");
},
// update list item
update : function(options) {
console.log("Update function");
},
// destroy list item
destroy: function(options) {
console.log("Destroy function");
},
// important for request
parameterMap: function(options, operation) {
console.log(options);
console.log(operation);
if (operation === "read") {
// send parameter "access_token" with value "my_token" with the `read` request
return {
data: paginationData,
token: token
};
} else
return {
data: kendo.stringify(options.models),
access_token: "my_token"
};
}
},
// data model
schema : {
// JSON data parrent name
data : "result",
model : {
fields : {
id : {
type : "integer",
editable: false,
nullable: true
},
username : {
editable: "inline",
type : "string",
validation: {
required: {
message: "Please enter a Username"
}
}
},
name : {
type : "string"
},
surname : {
type : "string"
},
email : {
type : "string"
},
created : {
type : "string"
},
role : {
type : "string"
}
}
}
},
// data source settings
pageSize : 10,
editable: true,
serverPaging : false,
serverFiltering : false,
serverSorting : false,
batch : true
},
// data grid settings and customization
toolbar : ["create"],
editable: true,
height : 350,
filterable : true,
sortable : true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
selectable: "multiple, row",
// columns
columns : [ {
field : "id",
title : "ID"
}, {
field : "username",
title : "Username"
},{
field : "name",
title : "Name"
},{
field : "surname",
title : "Email"
},{
field : "email",
title : "Email"
},{
field : "created",
title : "created at"
},{
field : "role",
title : "Role"
},
{ // table action buttons
command: [
{name: "edit"},
{name: "destroy", text: "Remove"},
{name: "detail", click:redirectToUserDetal},
] ,
// Action column customization
title: "Action",
width: "300px"
}
]
});
};
});
have faced same issue. But I have solved using this.
To fire create/delete/update we need to specify schema in dataSource( in schema we should mention atleast what is id field).
schema: { model: { id: "StudentID" } }
Code:
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
alert("read");
},
create: function (options) {
alert("create");
},
update: function (options) {
alert("update"); },
destroy: function (options) {
alert("destroy"); }
},
schema: {
model: {
id: "StudentID"
}
}
You configured your dataSource for batch mode, batch: true, but you provided no way to save the changes. Remember that batch mode queue's up all of your create, update, and destroy actions. They are all fired at once when the dataSource is synced, (i.e. dataSource.sync()).
The simplest way to enable this, given your config, is add 'save' to your toolbar. You might also want to include 'cancel' as well.
toolbar : ["create", "save", "cancel"],
Make sure your id is set on the objects that your read action is returning.
I had the same issue with my update action not being hit. I checked Fiddler and the POST was being made, but my id field was not set. I traced this back and found that my id was not being set on the objects when they were returned by my read action.
Without the id field being sent in the POST, my controller didn't recognize the parameters, thus not hitting my action.
Related
Good morning. I made a data search & filter with datatables and it worked .. but when I moved the page and returned to that page the data was still stuck (not reset). In view I made it like the following image:
and in the js file I made it like this
brandmanage = $('#brandmanage').DataTable({
dom : 'rtpi',
pageLength: {{ $limit ?? '10' }},
language : {
paginate : {
previous : '<i class="fa fa-angle-left"></i>', // or '←'
next : '<i class="fa fa-angle-right"></i>', // or '→'
},
},
processing : true,
drawCallback : function( settings ) {
$('#lengthInput option[value={{ $limit ?? '10' }}]').attr('selected','selected');
},
serverSide : true,
stateSave : true,
ajax : {
url : "{{ route('lms.brand.getdata',['pfx'=>$pfx]) }}",
dataType : "json",
type : "POST",
data : { _token: "{{csrf_token()}}" }
},
columns : [
{ data : "brand" },
{ data : "corporate" },
{ data : "num_of_company" },
{ data : "primary" },
{ data : "secondary" },
{ data : "status" },
{ data : "action",
orderable : false,
className : "text-center",
},
],
});
$('#brandDataLength').on('change', function () {
brandmanage.page.len( $(this).val() ).draw();
});
$('#searchBrand').on('keyup', function () {
brandmanage.search( this.value ).draw();
});
What do I do so that when I have moved pages, the search results can be reset?
If you change stateSave to false, then dataTables will not remember the selected filters etc. Thereby the search results will be reset when you reload the page.
I have implemented jsGrid and did the Filtering server side.Now i want to send sorting parameter to server side and do the sorting on server side on the click of column.
This is how i implemented the grid -
var db = {
loadData: function(filter) {
var bFilter = [];
var d = $.Deferred();
console.log("sorting:", filter.sortField, filter.sortOrder);
for (var prop in filter) {
if (prop != "sortField" && prop != "sortOrder") {
bFilter.push({
"Name": prop,
"Value": filter[prop]
})
} else{
var sorting ={ "Name": filter["sortField"], "Type": filter["sortOrder"] };
}
}
$.ajax({
url: "http://abc/abc",
dataType: "json",
data: JSON.stringify({
"filter": bFilter,
"sorting": sorting
})
}).done(function(response) {
d.resolve(response.value);
});
return d.promise();
},
};
$("#jsGrid").jsGrid({
height: 300,
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 2,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [{
name: "Name",
type: "text",
width: 150
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "Address",
type: "text",
width: 200
},
{
type: "control"
}
]
});
How would i call the same loaddata method on click of header for sorting to do the filtering and sorting together on server side.
How to disable the client side sorting and do it on serve side same like filtering.
If i set sorting:false it removes the click from the column headers.I want to keep that as well.
I was able to solve this by changing the sort function -
jsGrid.loadStrategies.DirectLoadingStrategy.prototype.sort = function () {
var filters = $("#tableId").jsGrid("getFilter");
var sorting = $("#tableId").jsGrid("getSorting");
this._grid.controller.loadData(filters, sorting);
}
I'm new to jtable and trying to figure out how can I get the selected value of a field (Types, dropdown); and based on this value, I need to make a call to a Java class and get the value for field 2 (Price, input type).
$(document).ready(function() {
var selectedValue = null;
$('#StudentTableContainer').jtable({
title : 'Students List',
actions : {
listAction : 'Controller?action=list',
createAction : 'Controller?action=create',
updateAction: function(postData) {
var values = [];
console.log("updating from custom function...");
return $.Deferred(function($dfd) {
$.ajax({
url: './Controller?action=update',
type: 'POST',
`enter code here` dataType: 'json',
data: postData,
success: function(data) {
$.each(data, function(entryindex, entry) {
values.push(entry['typeId']);
});
alert(values);
$dfd.resolve(data);
},
error: function() {
$dfd.reject();
}
});
});
},
deleteAction : 'Controller?action=delete'
},
fields : {
studentId : {
title : 'Student Id',
width : '30%',
key : true,
list : true,
edit : false,
create : true
},
name : {
title : 'Name',
width : '30%',
edit : true
},
emailId : {
title : 'Email',
width : '20%',
edit : true
},
typeId : {
title : 'types',
width : '20%',
edit : true,
listClass:'genderClass',
options: { 'S':'Select','D': 'Dynamic', 'F': 'Fixed', 'C':'Customize' }
},
priceId : {
title : 'Price',
width : '20%',
edit : true
}
}
});
});
Based on the selection of 'TypeId', I need to populate the value of the Price. I tried putting in some logic in the 'updateAction', but no luck.
I have a Kendo UI TreeList where every row has a checkbox displayed. If the user clicks on the checkbox then a request goes to the server and save the data. Unfortunately, I did something wrong because:
the update method does not send data to the server
and the sync method is not called automatically
What I did wrong?
I think the problem around how I set up that which item has changed. As you can see I iterate over the dataset coming from dataSource.data() and the item.checked and item.dirty properties are updated. If I understand correctly the documentation then this changes should trigger the sync method. It does not trigger the sync method and this it the reason I call it in the method.
My other question is related to the data structure should be sent to the server. It is based on the schema, right? So, once I can achieve that the request sends an object to the server I should create a similar C# POCO as model and I can read the data in the webapi controller.
In the documentation there is a saveRow() method, but I cannot translate that code to angular. Can somebody help me in this case?
//this row is my problem
var treeList = $("#treeList").data("kendoTreeList");
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: configurationService.goNoGoWebApiRootUrl + 'AreaPathDependencies/Get/ChildrenMarked/' + selectedAreaPathIdFromModalService,
dataType: "json",
type: "get"
},
update:
{
url: configurationService.goNoGoWebApiRootUrl + 'AreaPathDependencies/Update/AreaPathDependencies',
dataType: "json",
type: "post"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
parentId: "parentId",
fields: {
Id: { type: "number", editable: false, nullable: true },
ParentId: { type: "number", editable: false, nullable: true },
Name: { type: "string", editable: false, nullable: true },
Checked: { type: "boolean", editable: true, nullable: false }
}
}
}
});
vm.treeListOptions = {
dataSource: dataSource,
sortable: false,
editable: false,
columns: [
{
field: "checked",
title: "Selected",
template: checkBoxTemplate,
width: 32
},
{ field: "name", title: "Area Path", width: "200px", expandable: true },
{ field: "fullPath", title: "FullPath", width: "500px" },
],
save: onSave,
change: onChange,
sync: sync,
autoSync: true,
};
}
function checkboxOnclick(selectedId) {
console.log('checkboxOnclick', selectedId);
var data = vm.treeListOptions.dataSource.data();
for (var i = 0; i < data.length; i++) {
if (selectedId == data[i].id) {
data[i].set("checked", true);
//data[i].dirty = true;
}
}
vm.treeListOptions.dataSource.sync();
//console.log('flush', vm.treeListOptions.dataSource.data());
}
Well batch: true has to be set to get parameterMap working, because models parameters will be available only when the batch option is enabled. (parameterMap docs)
And to second question - I am not so sure but as noted in sync docs,
The sync method will request the remote service if:
the transport.create option is set and the data source contains new data items
the transport.destroy option is set and data items have been removed from the data source
the transport.update option is set and the data source contains updated data items
How I understand to that - to get sync method working you need to return updated records. Please check, if your server method for update/delete returns that.
I am new to ExtJS.
I am developing a page which has a form at the top and a grid below. When user enters the search criteria in the form and enters Submit, grid has to be populated with data accordingly.
I have managed to get the JSON data from server to the client
console.log('response.responseText');
prints the data correctly, but unable to assign that to the grid.
Here is my code
Ext.define('colModel', {
extend: 'Ext.data.ColumnModel',
fields: [
'personId',
'country',
'idType',
'idValue'
]
});
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'colModel',
fields: [
{name: 'personId'},
{name: 'country'},
{name: 'idType'},
{name: 'idValue'}
],
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'person'
}
},
autoLoad: false,
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
id: 'myGrid',
stateId: 'stateGrid',
columns: [
{
text : 'Person Id',
flex : 1,
sortable : false,
dataIndex: 'personId'
},
{
text : 'Country',
width : 75,
sortable : true,
dataIndex: 'country'
},
{
text : 'ID Type',
width : 75,
sortable : true,
dataIndex: 'idType'
},
{
text : 'Id Value',
width : 75,
sortable : true,
dataIndex: 'idValue'
},
],
height: 350,
title: 'Array Grid',
renderTo: 'bottom',
viewConfig: {
stripeRows: true,
ForceFit: true,
loadMask:false
}
});
and this function get invoked after form submission and response returned from server
displayGrid : function(response, opts) {
//Received response from the server
console.log('On Success');
responseData = Ext.decode(response.responseText);
console.log('response success ',responseData);
console.log(Ext.getCmp('myGrid').getStore());
grid.getStore().loadData('colModel',false);
}
I have managed to populate grid data on page load using the following code
var store = Ext.create('Ext.data.ArrayStore', {
model: 'colModel',
proxy: {
type: 'rest',
url : 'PersonSearch',
reader: {
type: 'json',
root: 'person'
}
},
autoLoad: true
});
but failed to load grid data on form submission.
Please help. Thanks in advance.
PS: I am using ExtJS 4.2
Update
This is the JSON update, I am getting from the server(caught using Firefox Browser Console)
"{"person":[{"personId":"1","country":"country 1","idType":"idType 1","idValue":"idValue 1"},{"personId":"2","country":"country 2","idType":"idType 2","idValue":"idValue 2"},{"personId":"3","country":"country 3","idType":"idType 3","idValue":"idValue 3"},{"personId":"4","country":"country 4","idType":"idType 4","idValue":"idValue 4"},{"personId":"5","country":"country 5","idType":"idType 5","idValue":"idValue 5"}]}
"
You aren't actually loading the data. Your data is stored in responseData, so your loadData call should load that data into the store. So, your loadData call should be as follows:
grid.getStore().loadData(responseData);
Note that this assumes that your responseData is in the correct format for the store you are loading it into. (Also note that the second parameter is false by default, so it isn't necessary to include it in this case)
Used forgivenson comment and set autoLoad: true
and
Updated the displayGrid method as below
displayGrid : function(response, opts) {
//Received response from the server
console.log('On Success');
responseData = Ext.decode(response.responseText,false);
console.log(response.responseText);
grid.getStore().loadData(responseData.person);
}
and the grid gets populated correctly.