Develop Reference

Initialize and load Kendo Grid from JQuery

in my project i want to initialize Kendo Grid from jquery file. i have created a .js file in which i have created a function
function initializeGrid(gridName, url, onSelectFunction) {
onSelectFunction = onSelectFunction || null;
$("#" + gridName).kendoGrid({
dataSource: {
type: "json",
transport: {
read: url
},
schema: {
model: {
fields: {
ClientID: {type: "number"},
Client:{type: "string"}
}
}
},
pagesize: 30,
Paging: true,
Filtering: true,
},
selectable: "multiple cell",
filterable: true,
columns: [
{ field: "ClientID" },
{ Template: ("<input type='checkbox' id='#:data.ClientID#' class='k-checkbox'/><label class='k-checkbox-label' onclick='event.stopPropagation()' for='#:data.ClientID#'></label>") },
{ field: "Client" }
]
});
$("#" + gridName).attr("data-val-number", "Invalid input.");
}
this function accepts name of the control and url to load data source from as arguments. in another .js file i have all code that loads controls by calling the earlier function.
initializeGrid("client", "/Clients/GetDataForGrid", null);
issue is that when i run the program it is not creating the grid and loading the data instead showing a drop down with no data. i checked http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?utm_medium=social-owned&linkId=38973492 for reference but no use.
i would really appreciate help here.

How to load extjs 4 grid data on form submission?

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.

Refresh Kendo UI grid data by reading a variable

Grid reads data from a javascript variable.
$("#grid").kendoGrid({
dataSource: {
type: "text",
data: jsvar,
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
pageable: {
input: true,
numeric: true
},
//toolbar: [{text: "Add"}],
columns: [
{command: [{text: "Edit", click: showDetailse}, {text: "View", click: viewoneitm}], title: " ", width: "170px"},
]
});
Then I change value of this variable jsvar with ajax and wait for ajax response and after that when I refresh grid with
jQuery("#grid").data("kendoGrid").dataSource.read();
jQuery("#grid").data("kendoGrid").refresh();
The grid is not repopulated with new data and old data stays in grid. Please tell me how to refresh grid data.
This worked fine and grid used to refresh perfectly untill I proviced static data, but after I used ajax and then 'refresh' it failed to update

If jsvar contains an array, the Kendo data source will create a model for each array item, so if you modify the original array, it won't change the DataSource. If you want to change the data, you should do it like this:
grid.dataSource.data(jsvar);

How can I get the file content from uploadfilefield?

I am trying to get the file content from uploadfilefield using ExtJS4, but do not know how?
I have this code for uploadfilefield:
{
xtype: 'fileuploadfield',
buttonText : 'Upload CSV',
buttonConfig:
{
icon: 'images/upload.png',
tooltip:
{
text: 'some hints',
width: 200
}
},
buttonOnly: true,
listeners:
{
'change': function(fb, v)
{
// v returns the filename
// HOW CAN I GET THE FILE CONTENT?
}
}
}
I was thinking that maybe fb has the content, but alert(JSON.stringify(fb)) gives me an error about fb being a circular object.
I am guessing that there has to be other way/event. Also I want to get the file content right away after pressing open on the dialog box. I cannot use submit button to do this afterwords.
Thanks my fellow StackOverflowers ;)
Addendum:
I am looking at this EXAMPLE on Sencha:
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
What is being passed to 'photo-upload.php'? How this php is supposed to get the content of the file?

Before HTML5, there was no access to the file content until after uploading it to a server and handling it from there. The browser was not be able to do anything with this file without first submitting the form.
EDIT:
From Neil McGuigan's comment above, it looks like the HTML5 FileReader API can possibly do some of the things you need. I have never used this, but more info is available herE: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/

I found my answer here in extjs file uploader folder (modified it a little for my app)
$returnResponse = $_REQUEST['returnResponse'];
sleep(1);
if ($returnResponse != "")
{
header('HTTP/1.0 '.$returnResponse.' Server status', true, $returnResponse);
echo '{success:false, message:"File could not be uploaded to server."}}';
}
else
{
$file = $_FILES['filedata-inputEl'];
$fileName = $file['name'];
$fileSize = $file['size'];
$temp_file = $file['tmp_name'];
// ....
}

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 ;)