i am not sure how can i pass dynamic columns along with the default paramters e.g. rp, sortname, sortorder in jquery flexigrid. i have read articles but that only suggest to pass the dynamic column on onSubmit event. i am confused how can i embed this onsubmit event and pass the additional fields to server side. see my page code. i am using asp.net mvc4 so i am using c# controller to handle server side.
$('#CustomerList').flexigrid({
url: '#Url.Action("CustomerList", "Customer")',
dataType: 'json',
colModel: [
{
display: 'Number',
name: 'Id',
width: 40,
sortable: true,
align: 'left'
},
{
display: 'First Name',
name: 'FirstName',
width: 80,
sortable: true,
align: 'left'
},
{
display: 'Last Name',
name: 'LastName',
width: 80,
sortable: true,
align: 'left'
},
],
buttons: [
{
name: 'Edit',
bclass: 'edit',
onpress: test
}, {
name: 'Delete',
bclass: 'delete',
onpress: test
}, {
separator: true
}],
searchitems: [
{
display: 'First Name',
name: 'FirstName'
},
{
display: 'Last Name',
name: 'LastName'
},
{
display: 'Email',
name: 'Email'
},
{
display: 'Age',
name: 'Age'
},
{
display: 'Sex',
name: 'Sex'
},
{
display: 'Membership Type',
name: 'MembershipType'
}
],
sortname: "LastName",
sortorder: "asc",
usepager: true,
title: 'Customer',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 930,
height: 500,
singleSelect: true
});
Following aritcles suggest to create another form and pass the parameters in Onsubmit event. i am stuck how to pass it
<form id="fmFilter">
<select id="cmbfilter">
<option>All</option>
<option>Family</option>
</select>
</form>
<script>
$('#grid01').flexigrid($.extend({}, myFlex, {
onSubmit : function(){
$('#grid01').flexOptions({
params: [{name:'callId', value:'grid01'}].concat($('#fmFilter').serializeArray())
});
return true;
}
})); // ')' was missing
</script>
Controller
public ActionResult CustomerList(int page, int rp, string sortname, string sortorder, string qtype, string query){}
Essence:
how to call the CustomerList controller method on the onchange event of "cmbfilter" and send its value along with default flexigrid default parameters e.g. rp, sortorder, sortname?
Related
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
I'm creating an app that simply shows customers information on a table, and if a user is being clicked then a pop-up window shows up showing user's information in a form (name and email). Within this PopUp I want to be able to update customers name and email and then when clicking on Update button I want the new information to show up on the table right away. As of right now I'm able to populate the table with customers' information as well as binding their information with the Pop-up window. But since I'm still kind of new to ExtJS I'm not really sure how to make the update to show right away on the table after clicking on update button. I would really appreciate any help!. Thanks a lot.
Here's my code that works just fine.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]
});
Ext.onReady(function () {
// Ajax call
var usersFromAJAX = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'customers'
}
}
});
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: usersFromAJAX,
id: 'user',
title: 'Employees',
iconCls: 'x-fa fa-users',
listeners: {
itemclick: function (view, index, item, record) {
var window = Ext.create('Ext.window.Window', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
record: record,
viewModel: {
data: {
employee: index.data// employee's name
}
},
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'firstname',
fieldLabel: 'First Name',
bind: '{employee.name}' // biding employee's name
},
{
xtype: 'textfield',
name: 'firstname',
fieldLabel: 'Email',
bind: '{employee.email}' // biding employee's name
},
{
xtype: 'toolbar',
docked: 'bottom',
style:{
background: "#ACCCE8",
padding:'20px'
},
items: ['->', {
xtype: 'button',
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
console.log("Updating name...");
// Need to add something in here
this.up('window').close();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
// this.up('formpanel').destroy();
this.up('window').close();
//this.up('window').destroy();
}
}]
}]
})
window.show();
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: Ext.getElementById("myTable")
});
});
</script>
</head>
<body>
<div id="myTable"></div>
</body>
</html>
Here's the JSON that populates my table.
{
"customers": [{
"id": 1,
"name": "Henry Watson",
"email": "henry#email.com"
},
{
"id": 2,
"name": "Lucy",
"email": "lucy#email.com"
},
{
"id": 3,
"name": "Mike Brow",
"email": "Mike#email.com"
},
{
"id": 4,
"name": "Mary Tempa",
"email": "mary#email.com"
},
{
"id": 5,
"name": "Beto Carlx",
"email": "beto#email.com"
}
]
}
Binding is for "live" data, so that means it will update the grid as you type. If you want to defer the changes until you hit a button, you can use methods on the form to do so:
Fiddle
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
Ext.onReady(function () {
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
},
listeners: {
itemclick: function (view, record) {
var f = Ext.create('Ext.form.Panel', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
buttons: [{
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
f.updateRecord(record);
f.close();
}
}, {
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
f.close();
}
}],
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'name',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
})
f.show();
f.loadRecord(record);
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: document.body
});
});
I want to add filter in dojox.grid.EnhancedGrid and my grid is created declaratively. I added filter in data-dojo-props attribute.
My code :
<div id="myGrid"
data-dojo-type="dojox.grid.EnhancedGrid"
data-dojo-props="plugins:{indirectSelection: true,nestedSorting: true,
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "songs"
} },
store: mystore,
structure: [{
defaultCell: { width: 8, editable: false, type: dojox.grid.cells._Widget, styles: 'text-align: left;' },
rows: [
{ field: 'RN', name: '${RN}', width: '32%',formatter : function(val, rowIdx, cell){
cell.customClasses.push('anchorLookAlike');
return val;
}
},
{ field: 'DC', name: '${DC}', width: '10%' },
{ field: 'PN', name: '${PN}', width: '10%' },
{ field: 'MD', name: '${MD}', width: '10%' },
{ field: 'RD', name: '${RD}', width: '10%' },
{ field: 'UR', name: '${UR}', width: '10%' },
{ field: 'DL', name: '${DL}', width: '10%',formatter: function(datum){
if(datum){
return dojo.date.locale.format(new Date(datum), {selector: 'date', formatLength: 'long'});
}
return '...';
}
},
{field: 'RP', name: '', hidden: true}
]
}]"></div>
When I try to run this code am facing this error,
dojo/parser::parse() error
Error: SyntaxError: syntax error in data-dojo-props='plugins:{indirectSelection: true,nestedSorting: true, filter: { closeFilterbarButton: true, ruleCount: 5, itemsName:
how to add filter correctly? can any help me
You need to wrap songs in single quotes, not double quotes. You are already nested within double quotes as part of data-dojo-props.
I am having an issue related to "stop running this script a script on this page is causing your web browser to run slowly" using IE 8.What exactly i am trying to do is loading large number of rows from database logic and binding it to the jqgrid on the client side.
Client Side Code-
$(document).ready(function () {
var model = #Html.Raw( POSWebManager.MvcApplication.Serializer.Serialize( Model ) );
var boolRenderer = function( row, column, value ) {
var html = "<div style='overflow: hidden; text-overflow: ellipsis; text-align: left; padding:4px 4px 2px 2px;";
if( value === true ) {
if( column == "Exported" ) {
html += "font-weight:bold;background-color:#99FF66;";
} else if( column == "HasErrors" ) {
html += "font-weight:bold;background-color:#FF9999;";
}
}
html += "'>";
if( value === true ) {
html += "Yes";
} else {
html += "No";
}
html += "</div>";
return html;
};
var columns = [
{ name: "ID", text: 'ID', datafield: 'ID', width: 55 },
{ name: "TransactionItemID", text: 'Trans Item ID', datafield: 'TransactionItemID' },
{ name: "Exported", text: 'Exported', datafield: 'Exported', cellsrenderer: boolRenderer },
{ name: "HasErrors", text: 'Has Errors', datafield: "HasErrors", cellsrenderer: boolRenderer },
{ name: "FirstName", text: 'First Name', datafield: 'FirstName', width: 110, type: "string" },
{ name: "LastName", text: 'Last Name', datafield: 'LastName', width: 110, type: "string" },
{ name: "DOB", text: 'DOB', datafield: 'DOB', width: 90, type: "string" },
{ name: "IDNumber", text: 'ID Number', datafield: 'IDNumber', width: 110, type: "string" },
{ name: "StreetAddress", text: 'Street Address', datafield: 'StreetAddress', width: 150, type: "string" },
{ name: "City", text: 'City', datafield: 'City', width: 130, type: "string" },
{ name: "State", text: 'State', datafield: 'State', width: 70, type: "string" },
{ name: "Post", text: 'Post', datafield: 'PostalCode', width: 70, type: "string" },
{ name: "Email", text: 'Email', datafield: 'Email', width: 150, type: "string" },
{ name: "Created", text: 'Created', datafield: 'Created', width: 90, type: "string" },
{ name: "Updated", text: 'Updated', datafield: 'Updated', width: 90, type: "string" },
{ name: "ABN", text: 'ABN Number', datafield: 'ABN', width: 100, type: "string" },
{ name: "CompanyName", text: 'Company Name', datafield: 'CompanyName', width: 100, type: "string" }
];
var adapter= new $.jqx.dataAdapter( { localdata: model, datatype: "json", datafields: columns } );
$("#jqxgrid").jqxGrid( {
width: 960,
source:adapter,
theme: getDemoTheme(),
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
showfilterrow: true,
filterable: true,
columnsresize: true,
selectable: true,
pagesize: 25,
pagesizeoptions: ['25', '50', '100', '1000'],
selectionmode: 'multiplerowsextended',
columns: columns
} );
} );
Can anyone tell me how to disable this notification
Without using with registry or using ActiveX.
I am very new to jqgrid and jquery so please help me out on this.
Thanks
You can't disable the long running or non-responsive script notification. You can work-around it by changing your code.
The usual work-around to a long running process is to break the work into chunks that are short enough that they won't trigger the warning, then process one chunk of work, the do a setTimeout(fn, 1) to process the next chunk and so on until all chunks are done. This requires keeping some simple state variables to guide each chunk.
The setTimeout() allows the browser to process any other pending events and prevents the long running script message.
In this answer: Best way to iterate over an array without blocking the UI, you will see a code example for how to process work in chunks like this. There's even a working jsFiddle in that answer that illustrates the concept.
In your specific case, you could create a state variable for an index into the columns array and then process only a couple columns in each chunk of work, incrementing the index appropriately and when the setTimeout() fires, you process the next few columns and so on.
I'm beginning going crazy with extjs4 and form loading.
In my struts application, I have a simple form and i want to load JSON data.
The problem is that the data are correctly loaded from the server but never displayed.
Here is the code :
Ext.onReady(function(){
var formPanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.get('categoryForm'),
width: 340,
bodyPadding: 5,
waitMsgTarget: true,
url: '<s:url value="json/save" />',
method: 'POST',
loader: {
type: 'json',
root: 'category',
successProperty: 'success'
},
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
defaultType: 'textfield',
items: [{
name: 'category.id',
hidden: true
}, {
fieldLabel: "<s:text name="category.label"/>",
name: 'label',
allowBlank: false,
maxLength: 35
}, {
fieldLabel: "<s:text name="category.description"/>",
name: 'description',
xtype: 'textarea',
maxLength: 250
}, {
fieldLabel: '<s:text name="category.creationDate"/>',
name: 'creationDate',
xtype: 'datefield',
readOnly: true
}],
buttons: [{
text: "<s:text name="action.modify"/>",
handler: function() {
formPanel.getForm().submit();
}
}, {
text: "<s:text name="action.cancel"/>",
handler: function() {
formPanel.getForm().reset();
}
}]
});
formPanel.show();
formPanel.load({
url: '<s:url action="json/load"/>',
params: {
categoryId: <s:property value="categoryId"/>
}
});
});
The JSON data (intented) response :
{
"category":
{
"creationDate": "2012-04-14T22:29:52",
"description":"description",
"id":1,
"label":"Toto"
},
"errorMessage":null,
"success":true
}
Finally I found where was the problem.
The JSON response must contains the 'data' property instead of 'category'.
Replacing the property fill the form.