We Keep Coding

How do I make search input in kendo grid?

I am a new Software Developer. In my new company, I use their framework to code. And its using Kendo. I tried to make a search field for Kendo Grid so I can find a specific information in that grid. I tried this method but it doesn't work. Honestly, I don't understand how to use 'transport' things. I call an API to get datas for my grid and I call it in my grid's line of code.
{
type: 'panel',
fields: [{
type: 'panel',
text: 'Payment List',
name: 'payment',
fields: [{
type: 'grid',
name: 'paymentGrid',
data: [],
toolbar: function () {
return `<div class="toolbar" style="width:370px">
<label class="search-label" for="search-reservation" style="color:white"> Cari berdasarkan No. Pesanan: </label>
<input type="search" id="search-reservation" class="search-class">
</div>`
},
sourceOptions: {
pageSize: 10
},
options: {
selectable: true,
autoheight: true,
allowCopy: true,
altrows: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: [10, 20, 50, 100]
},
dataBinding: function () {
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
}
},
url: function (option) {
var arg = option.data
$.ajax({
method: 'POST',
url: APILink,
data: JSON.stringify(arg),
dataType: 'json',
contentType: 'application/json',
}).done(function (resp) {
if (resp.data != null) {
var nameMap = [];
$.each(resp.data, function (key, val) {
nameMap.push({
id: val.id,
supplier: val.supplier,
reservation_id: val.reservation_id,
currentPayment: val.state
});
});
option.success({
data: nameArray,
total: resp.total
});
}
}).fail(function (jqXHR, status, err) {
option.error(err);
});
},
fields: [{
name: 'number',
text: 'No. ',
template: "#= ++record #",
width: 70,
}, {
name: 'supplier',
text: 'Supplier',
}, {
name: 'reservation_id',
text: 'No. Reservation',
}, {
name: 'currentPayment',
text: 'status',
}, {
name: 'checked',
text: 'choose',
width: 100,
template: function (item) {
return !!item.checked
? `<input id="${item.id}" name='ceklis-boks[]' class="check" checked value="${item.id}" type=\'checkbox\' />`
: `<input id="${item.id}" name='ceklis-boks[]' class="check" value="${item.id}" type=\'checkbox\' />`
}
}],
onDataBound: 'dataBound',
}]
}
Then I used the same code as I mention before in previous link, and replace the ID (#) in that code with mine. But, it won't work. I come to his fiddle and I thought it was because his PlainDs variable and $("#category").kendoAutoComplete({...}) or serverPaging, serverSorting, or serverFiltering. So, I comment all of it here and still working properly. So basically, I can just write the code from line 49 - 81 like in his post. But why it doesn't work? For your information, I call the grid with its name or sometimes I give it a class. But it won't work. Is it a problem if I use class or name instead of ID?

The term "Not working" is too broad here, if you can be more specific on what is not working, we may be able to pinpoint better. However I assume you know how to get the grid to display and so on. so basically to get the search to work I usually have this in the click event of my "Search" button:
var grid = $("#myGrid").data("kendoGrid");
var ds = grid.dataSource;
var searchVal = $("#search-reservation").val();
if ( searchVal ) {
ds.filter({
field: "reservation_id", operator: "eq", value: searchVal
});
}
else {
ds.filter({});
}

Ext JS OPEN/SAVE dialogue on click

Using ExtJS 4.2.3, I have FORM with list of attachments. When I click on one of attachment's name it starts to download. Instead of download I need to get dialogue with ability to open or save the file on click.
Example of code:
<script type="text/javascript" language="javascript">
Ext.onReady(function () {
var trGuid = Ext.Object.fromQueryString(location.search).trGUID;
Ext.define("File_model", {
extend: "Ext.data.Model",
fields: [
{ name: 'document_GUID', type: 'string' },
{ name: 'attachment_fileName', type: 'string' },
]
}); // end Model
Ext.create('Ext.data.Store', {
storeId: 'FileStore',
model: "File_model",
proxy: {
type: 'jsonp',
url: 'http://test/AttachmenttoHTML/List',
extraParams: { trGUID: trGuid },
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
}); // end Store
FileGrid = new Ext.grid.Panel({
renderTo: "EXT-CONTENT",
width: 750,
height: 500,
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e) {
var url = 'http://test/Attachment/Get?document_GUID=' + record.get("document_GUID");
console.log(url);
window.location = url;
}
},
columns: {
defaults: { filter: true },
items: [
{ text: 'Name', dataIndex: 'attachment_fileName', width: 748, cellWrap: true }
]
},
store: Ext.data.StoreManager.lookup('FileStore')
}); // end TaskGrid
}); // end onReady
</script>

In your cellclick function, you need to call a function like this :
function openDialogue(url) {
Ext.MessageBox.show({
title:'Export',
msg: 'Souhaitez vous télécharger le document?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animateTarget: 'mb4',
icon: Ext.MessageBox.QUESTION
});
}
You can find more avout message box (http://docs.sencha.com/extjs/4.0.7/#!/example/message-box/msg-box.html).
The function showResult will redirect to the url like you did before.
Otherwise you can use the window.open to have de save dialog.
Hope it helps !

jTable Master record Id not being sent on Child record's update request

$('#PermissionGroupGrid').jtable({
ajaxSettings: {
type: 'GET',
dataType: 'json'
},
sorting: true,
paging: true,
useBootstrap: true,
pageSize: 5,
title: 'List of Permission Group',
actions: {
listAction: '/PermissionGroup/List',
deleteAction: '/PermissionGroup/Delete',
updateAction: '/PermissionGroup/Update',
createAction: '/PermissionGroup/Create'
},
defaultSorting: 'PermissionGroupName ASC',
fields: {
Id: {
key: true,
create: false,
edit: false,
list: false
},
Permissions: {
title: 'Permissions',
width: '5%',
sorting: false,
edit: false,
create: false,
display: function (permissionData) {
var $img = $('<img src="../../Images/list_metro.png" title="Assign Permissions" />');
$img.click(function () {
console.log(permissionData);
console.table(permissionData);
$('#PermissionGroupGrid').jtable('openChildTable',
$img.closest('tr'),
{
ajaxSettings: {
type: 'GET',
dataType: 'json'
},
title: permissionData.record.PermissionGroupName + ' - Permissions',
actions: {
listAction: '/Permission/ListPermission?PermissionGroupId=1',
deleteAction: '/Demo/DeleteExam',
updateAction: '/Demo/UpdateExam',
createAction: '/Demo/CreateExam'
},
fields: {
PermissionGroupId: {
type: 'hidden',
defaultValue: permissionData.record.Id
},
Id: {
key: true,
create: false,
edit: false,
list: false
},
PermissionName: {
title: 'Permission Name'
}
}
}, function (data) {
data.childTable.jtable('load');
});
});
return $img;
}
},
PermissionGroupName: {
title: 'PermissionGroupTitle'
}
}
});
$('#PermissionGroupGrid').jtable('load');
When any of the child record is requesting for Update, child record's Id is being sent in the GET request but not the Id of the Master record. I followed the demo on jtable.org exactly. When console.log 'permissionData.record.Id' I can see the master record's Id. FTR, both Master and Child table's key column has name 'Id'.
Can some one please suggest a solution?

Based on jTable 2.4.0 debugging, defaultValue is used only on create form. If you are editting existing item record[fieldName] is used instead. In your case record["PermissionGroupId"]. That means you need to include PermissionGroupId field on your child record object to make it work.

Sencha Store proxy is not getting called

I want to load store data dynamically and don't want to use model for this. if I provide data list gets populated but if I use store's proxy it doesn't get called and url is not getting hit. Please help.
Ext.define('TrainEnquiry.view.SearchTrainResults', {
extend: 'Ext.List',
xtype: 'searchedtrainresult',
requires: 'Ext.data.proxy.JsonP',
config: {
itemId: 'searchedtrainresult',
title: 'Train Result:',
itemTpl: '<div class="myContent">'+
'<div><b>{number}</b> </div>' +
'</div>',
store: {
fields: ['number'],
/*data: [
{number: 'Cowper'},
{number: 'Everett'},
{number: 'University'},
{number: 'Forest'}
]*/
proxy: {
url: 'http://abc.amazonaws.com/search.json',
type:'jsonp',
extraParams : {
'q' : '12313'
},
reader: {
type: 'json',
},
success: function() {
debugger;
console.log('success');
},
failure: function() {
debugger;
console.log('failure');
}
}
},
onItemDisclosure: true
}
});

I think your "fields" config option needs to be a proper Ext.data.Field object, so maybe this would work:
Ext.define('TrainEnquiry.view.SearchTrainResults', {
...
config: {
...
store: {
fields: [ { name: 'number', type: 'string'} ],
proxy: {
...
}
},
...
}
});
(Reference from Sencha forums)

You could try removing the pageParam and startParam from your proxy. Just like this
Ext.create('Ext.data.Store', {
storeId:'UserStore',
autoLoad: true,
model: 'UserModel',
proxy: {
type: 'jsonp', // Because it's a cross-domain
url : 'https://api.twitter.com/1/lists/members.json?owner_screen_name=Sencha&slug=sencha-team&skip_status=true',
reader: {
type: 'json',
root: 'users' // The returned JSON will have array
// of users under a "users" property
},
// Removing pageParam and startParam
pageParam: undefined,
startParam: undefined
}
});
Here is an example http://jsfiddle.net/alexrom7/YNTuN/

Try changing the type of your proxy store to Ajax (type: 'ajax'). Just like this
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type: 'json',
}
},
autoLoad: true
});

ExtJS-3, Ext.grid.GridPanel, muti-row checkboxes: how do I submit all checked items at once?

I'm using ExtJS3 and I have a Ext.grid.GridPanel where each row has a checkbox on the left. At the top there are two buttons: 'refresh' and 'submit'. I want to be able to select multiple rows and submit all of them in one click of the submit button. As it is right now when I select multiple rows and hit submit it will submit the first one, then remove that item from the grid, and I have to hit submit again (the formerly checked rows are still checked).
How do I change the following code to make the submit button send all of the rows at one time?
var dataStore = new Ext.data.SimpleStore({ fields: [
{name: 'node'},
{name: 'ip'},
{name: 'groups'}
]});
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var dataGrid = new Ext.grid.GridPanel ({
renderTo: document.body,
clickstoEdit: 2,
selModel : checkBoxSelMod,
xtype: 'grid',
layout: 'fit',
sm: new Ext.grid.CheckboxSelectionModel(),
tbar: [
{
text: 'Refresh',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_refresh.png',
cls: 'x-btn-text-icon',
handler: function() {
window.location = '$nroot/index.php/imaging/index';},
scope: this,
},
{
text: 'Submit Machine(s)',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = dataGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+sel.data.node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: sel.data.node,
mgmtip: sel.data.ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
}
}
],
store: dataStore,
columns: [
checkBoxSelMod,
{ id: 'node', header: "Node", width: 150, sortable: true, dataIndex: 'node'},
{ id: 'ip', header: "IP", width: 120, sortable: false, dataIndex: 'ip'},
{ id: 'groups', header: "Groups", width: 100, sortable: true, dataIndex: 'groups'},
],
stripeRows: true,
autoExpandColumn: 'node',
listeners: {
render: function(){ this.store.loadData(dataList); }
}
})});
When I change the code from getSelected to getSelections it returns this on page load:
item type is invalid for AcceptItem action
I can't find any examples that show multi-select with submit for GridPanels. Is there one I can reference?
EDIT, based on the solutions below I've modified the code to work as follows:
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
Ext.each(sels, function(sel) {
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
node: sel.get('node'),
mgmtip: sel.get('ip')
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
})
}
}
});
}
}

The most simple approach is to loop through the selected records and ask a question for each record.
var sels = sm.getSelections();
Ext.each(sels, function(sel) {
var node = sel.get('node'),
ip = sel.get('ip');
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: node,
mgmtip: ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
});
However, this may not be nice for the user to get a prompt for every row selected in the DataGrid. But if your service ('$nroot/index.php/imaging/image/') support posting several items you can ask the user one time and post all of them. I.e.
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
nodes: nodes,
mgmtips: ips
},
success: function(resp,opt) {
Ext.each(sels, function() { dataGrid.getStore().remove(this) });
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}