Develop Reference

Why is my Bootstrap-Editable with Bootstrap-tables not working?

I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/

Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

Kendo UI grid export excel and pdf export, no file created

I am trying to create a kendo grid with excel export. My data is shown precisely as I want it and the grid works fine. However, the saveAsExcel function triggers the excelExport event, but no file is created. Same problem with the pdf export.
Here is my grid options:
grid = $("#grid").kendoGrid({
toolbar:["excel","pdf"],
height: 500,
scrollable: true,
groupable: true,
sortable: true,
filterable: false,
excel: {
allPages:true,
filterable:true
},
excelExport: function(e) {
console.log('Firing Export');
console.log(e.workbook);
console.log(e.data);
},
pdfExport: function(e){
console.log('PDF export');
},
columns: [
{ field: "date", title: "Time", template: "#= kendo.toString(kendo.parseDate(date), 'MM/dd/yyyy') #", width: '120px'},
{ field: "customer", title: "Customer" },
{ field: "amount", title: "Total", format: "{0:c}", width: '70px', aggregates: ["sum"]},
{ field: "paid_with", title: "Payment", width: '130px'},
{ field: "source", title: "Source" },
{ field: "sale_location", title: "Sale Location" }
]
}).data("kendoGrid");
This ajax is called whenever the search parameters for the data is changed. Where I refresh the datasource.
$.ajax({
'url':'/POS/ajax/loadTransactionsDetailsForDay.php',
'data':{
filters
},
'type':'GET',
'dataType':'json',
'success':function(response) {
var dataSource = new kendo.data.DataSource({
data: response.data.invoices,
pageSize: 100000,
schema: {
model: {
fields: {
date: {type: "string"},
customer: { type: "string" },
amount: { type: "number" },
paid_with: {type: "string"},
source: {type:"string"},
sale_location: {type:"string" }
}
}
}
});
grid.setDataSource(dataSource);
grid.refresh();
}
});
The output from my console log is.
Firing Export.
A worksheet object.
Object {sheets: Array[1]}sheets: Array[1]0: Objectlength: 1__proto__: Array[0]__proto__: Object
and and array with these objects for every row in the grid:
0: o
_events: Object
_handlers: Object
amount: 40.45
customer: "customer 1"
date: "2015-11-25T00:00:00-08:00"
dirty: false
employee: 23
paid_with: "Check"
parent: ()
sale_location: "Main"
source: "POS"
uid: "70b2ba9c-15f7-4ac3-bea5-f1f2e3c800d3"
I have the latest version of kendo, I am loading jszip. I am running it on the latest version of chrome.
I have tried all kinds of variations of this code I can think of, including removing my schema, initializing the kendo anew every time in the callback.
Anyone got any idea why this would not work?
Every example on this I can find make it look super simple, just create the grid and call export... So I have to have overlooked something.
I am grateful for any ideas about this.
Thanks.

It could be because the filename is missing.
Here the part with the filename added:
excel: {
allPages:true,
filterable:true,
fileName: "Kendo UI Grid Export.xlsx"
},
You can take a look here : Grid Excel Export
And here for the pdf: Grid Pdf Export

I have some following suggestion.
Can you add kendo deflate pako script file into your code and try.
Then remove the pdf export event and just try to export a pdf with toolbar default functionality..check whether its working or not.
try to add a data-source ajax call with in a grid option using kendo-transport technique with read method. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport

Kendo UI grid filter doesn't work when opening a popup before

I have a Kendo UI grid where some of the columns can be filtered. For each row in that column, you can open a popup to see some details to the specific entry.
I can open the popup without any problems. But: after closing it and trying to filter any of the columns, I get the following error: JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference
If I filter a column before I open a popup, it works like a charm.
If I filter a column and then open the popup, the already filtered column can be filtered again but the others not.
I don't know why I can't filter columns after opening and closing the popup.
Any ideas or hints would be really helpful. Thanks
HTML:
<div id="windoofTestOuter"><div id="windoofTest"></div></div>
<div id="processGrid"></div>
My grid:
$("#processGrid").kendoGrid({
sortable: true,
pageable: true,
selectable: true,
filterable: {
extra: false
},
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Home/GetProcesses",
cache: false,
type: "POST",
dataType: "json"
},
parameterMap: function (data) {
return $.extend({}, data, { sort: data.sort, filter: data.filter });
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
page: "#ViewBag.ProcessPage",
schema: { data: "Data", total: "Total", model: { id: "Id" } },
pageSize: "#(#Model.MaxCountToShow)"
},
columns: [
{ field: "ErrorDateTime", title: "ProcessDateTime", width: "170px"/*, filterable: { ui: dateFilter }*/ },
{ field: "Name", title: "Processtype", attributes: { value: "type" }, width: "240px;", filterable: { ui: processtypeFilter} },
{ field: "Service", title: "Service", width: "181px;", filterable: { ui: serviceFilter } },
{ field: "Operation", title: "Operation", width: "130px", filterable: { ui: operationFilter } }
]
}).data("kendoGrid");
The link/string which shall open the popup:
function createProcessActionString(process) {
var det = '<a class="makeANiceMouse" onclick="processDetailUrl(' + process.Id + ', ' + grid.dataSource.page() + ')">Details</a>';
return det;
}
My popup:
function processDetailUrl(id, page) {
var windoof = $("#windoofTest").kendoWindow({
width: "1150px",
height: "300px",
content: det,
title: "Process Details",
actions: ["Minimize", "Maximize", "Close"],
close: function (e) {
windoof.data("kendoWindow").content(" ");
}
});
windoof.data("kendoWindow").center().open();
}
I deleted the unnecessary columns and so on..
EDIT: I tried to intitialize the filter in the filterMenuInit. After opening and closing the popup, I clicked on the filter icon of one of the columns, and I get the error : JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference . The same one as before.
EDIT: I used the windoof.destroy() but the filters weren't accessable afterwards.
EDIT solution: I have a workaround for working with the filters again. I just fake a click on each of it before I open a popup. It's not beautiful but it serves me so far.
BUT It seems like everything gets kicked/killed by that damn popup. I can't even access the grid's datasource anymore.. It's strange...

I'm dealing with the same issues but got well passed the Data not being there. Check out or use onDataBound and use e.sender to get a handle to the Grid Object opposed to .data("KendoGrid") from the onClose of the popup this is what fixed it for me. I'm still trying to get my filters to work though after the pop up closes.

Pagination on Kendo UI Grid is not working

I'm displaying a grid with remote data, if I don't add pagination the full set of data is displayed, of course this is not desired.
The following is the code I'm using to display data on a grid:
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
dataType: "json"
}
},
schema: {
data: "Response"
},
pageSize: 5
});
$("#usuariosGrid").kendoGrid({
pageable: {
refresh: true
},
columns: [
{ field: "UsuarioId", title: "ID", width: "100px" },
{ field: "Nombre", title: "Nombre", width: "100px" },
{ field: "ApellidoP", title: "Apellido Paterno", width: "100px" },
{ field: "ApellidoM", title: "Apellido Materno", width: "100px" },
{ command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" }
],
dataSource: ds
});
This renders a grid with 5 items on it, but that's it, I can't navigate through the rest of the entries. The number of pages and items to display is marked as zero, disabling the navigation controls.
Am I missing something in my cofiguration? Thanks for any help you can provide.

When paging is done in the server (check serverpaging), you need to return the total number of records. See total for information.

I had the same issue because I misunderstood serverPaging. If you set serverPaging to true, you also have to modify what the server returns.
Previously, I had the server returning all of the data. To fix this, I used ToDataSourceResult to modify what my server returns.
See:
How to implement Server side paging in Client side Kendo UI grid in asp.net mvc

spend a day on this minor issue, all you have to do is return the total number of records, if your service doesn't return the total number of records, do the following
schema: {
data: "Response"
},
total: function(response)
{
return response."your method name".length;
}

sending textfield data to servlet in ExtJS

I want send a text field data to a servlet page. I dont know the process. I give the code for textbox and a button below.
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
renderTo: document.body,
frame: true,
title: 'Personal Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
},{
xtype:'button',
text:'save'
}]
});
});
This is the code ofr a textbox and a button. when i click the button the data of the field will go to a servlet page. But I cant do that. Please any one help me. the name of the servlet page is url_servlet

in your service method (get or post )
you can get your data field values by the attribute "name".
String firstname = reg.getParameter("firstname");

For handling the data in the backend check #The Suresh Atta's answer.
I found some errata in your code:
1) Construct an Ext component with the Ext.create function.
2) Use Ext.getBody() to get the document body.
3) Put your fields in the items config and buttons in the buttons config (Not always the best practice).
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Personal Information Form',
width: 250,
url: 'url_servlet',// The form will submit an AJAX request to this URL when submitted
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Console.log('Success', action.result.msg);
},
failure: function(form, action) {
Console.log('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
I hope this helps you a bit ;)