Related
I have simple kendo UI grid
$("#Grid").kendoGrid({
dataSource: {
serverPaging: true,
transport: {
read: "Course/Read",
dataType: "json"
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 10
},
pageable: true,
columns:
[
{ field: "CourseName", title: "Name", width: 100 },
{ field: "SpecialtyName", title: "Specialty", width: 100, filterable: false },
{ title: "Edit", template: '<span class="EditIcon"><i data-bind="click:Edit(#: Id#)" class="fa fa-edit"></i></span>', width: 50 },
]
});
the problem is when I am using:
data-bind="click:Edit(#: Id#)"
when click on edit calling function not work inside kendo grid notice that both the grid and function inside knockout viewmodel
function viewmodel() {
var self = this;
self.Load = function () {
$("#Grid").kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
serverPaging: true,
transport: {
read: "Course/Read",
dataType: "json"
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 10
},
pageable: true,
columns:
[
{ field: "CourseName", title: "Name", width: 100 },
{ field: "SpecialtyName", title: "Specialty", width: 100, filterable: false },
{ title: "Edit", template: '<span class="EditIcon"><i data-bind="click:Edit(#: Id#)" class="fa fa-edit"></i></span>', width: 50 },
]
});
}
self.Load();
self.Edit= function (Id) {
////////my code////////
}
}
everything work fine the binding retrieve data, extra except call knockout method inside kendo grid, appreciate any help thanks.
if anyone looking for answer or open this post, this is not related to kendo, this is because the grid render rows after knockout binding done, so you can take viewmodel object in temp var in javascript and use it like tempvar.callfunction().
I was following tutorial in Extjs , i had this view (YourTurn.js)
Ext.define('Student.view.main.YourTurn', {
extend: 'Ext.window.Window',
xtype: 'mainyour',
requires: [
'Student.view.main.YourTurnController',
'Ext.form.Panel'
],
autoShow: true,
height: 170,
width: 360,
layout: {
type: 'fit'
},
iconCls: 'key',
title: "Login",
closeAction: 'hide',
closable: false,
items: [{
xtype: 'form',
frame: false,
bodyPadding: 15,
defaults: {
xtype: 'textfield',
anchor: '100%',
labelWidth: 60
},
items: [{
name: 'user',
fieldLabel: "User",
allowBlank:false,
vtype:'alphanum',
minLenght:3,
msgTarget:'under',
}, {
inputType: 'password',
name: 'password',
fieldLabel: "Password",
maxLength:15,
allowBlank:false,
vtype:'alphanum',
minLenght:3,
msgTarget:'under',
}]
}]
});
and I had the controller of this view (YourTurnController.JS) like this :
Ext.define('Student.view.main.YourTurnController', {
extend: 'Ext.app.ViewController',
alias: 'controller.yourturncontroller',
Ext.apply(Ext.form.field.VTypes, {
customPass: function(val, field) {
return /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%]).{6,20})/.
test(val);
},
customPassText: 'Not a valid password. Length must be at least
6 characters and maximum of 20 Password must contain one digit,
one
letter lowercase,
one letter uppercase,
onse special symbol # # $ % and
between 6 and 20 characters.
',
});
Its should validate that the enter vlaue to the textfield should be between 0-9,with small and capital letter..etc , but it did not working i got this error in brower (chrome) :
YourTurnController.js?_dc=1477341018794:5 Uncaught SyntaxError: Unexpected token .
ext-all-rtl-debug.js?_dc=1477341016439:9126 [E] [Loader] The following classes failed to load:log # ext-all-rtl-debug.js?_dc=1477341016439:9126logx # ext-all-rtl-debug.js?_dc=1477341016439:9162Ext.apply.log.log.error # ext-all-rtl-debug.js?_dc=1477341016439:9165(anonymous function) # ext-all-rtl-debug.js?_
please can any one help me to understadn what i did wrong ?
you should consider using a listener to validate the input type of your password.
Try this link to the doc for the change listener:
http://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.Text.html#event-change
MY sencha touch application is working fine in all browsers, however when I save the url to the iPad home screen. It will not load and only shows a blank screen. I get no JS errors and nothing comes through the log when debugging. Heres a sample of the app:
script type="text/javascript">
var rootPanel;
if (navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
Ext.application({
launch: function () {
var contactForm = Ext.create('Ext.form.FormPanel', {
standardSubmit: true,
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'My App',
docked: 'top'
}, {
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'LoginName',
label: 'Login Name:'
}, {
xtype: 'passwordfield',
name: 'Password',
label: 'Password:'
},
{
xtype: 'hiddenfield',
name: 'ReturnUrl',
value: '/returnUser.html'
}] // items
}, {
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'button',
text: 'Reset',
ui: 'decline',
handler: function (btn, evt) {
Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
if (btn === 'yes') {
contactForm.setValues({
LoginName: '',
Password: ''
}); // contactForm()
} // switch
}); // confirm()
}
}, {
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler: function (btn, evt) {
var values = contactForm.getValues();
contactForm.submit({
url: 'Login',
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function (form, result) {
Ext.Msg.alert('Login succeeded!', result.response.reason);
},
failure: function (form, result) {
Ext.Msg.alert('Login Failed!', result.response.reason);
}
});
} // handler
}] // items (toolbar)
}] // items (formpanel)
}); // create()
} // launch
}); // application()
$(document).ready(function () {
});
I put an alert in the launch method of Ext.Application but it does not show. When I put it an alert in the document.ready function it does show. I should also note it DOES work on the ipad browser, just not when launched from the icon on the homescreen.
i faced a similar issue in android actually in my case the problem was because of Ext.Loader not enabled I see you have not included it either. Include this script before Ext.application & see if it works
Ext.Loader.setConfig({
enabled:true
});
Ext.application({...});
It appears to be the version of sencha I was using which was 2.1.0 I believe, as soon as I updated to the latest(2.1.1 Build Date 2013-02-05 12:25:50 ) I works fine.
I’ve been able to add a datepicker into the filter toolbar of a jqgrid with the code below. However, I’m wondering if there’s a way to squeeze two datepickers into this single DateCreated column, so as to specify the range (From, To). Any ideas?
function loadGrid() {
$(tableID).jqGrid({
…
colModel: [
…
{ name: 'DateCreated', index: 'DateCreated', width: 125, searchoptions:{dataInit:datePick, att:{title:'Select Date'}} },
…
})
…
}
datePick = function(elem) {
$(elem).datepicker();
}
If you are open to adding in a plugin, I found the range picker from filament group to be very easy to work with. In under an hour, I had the 3 files downloaded and installed into my project, and the range picker working.
link:filament group daterangepicker
Being that I'm using jquery 1.8 in my project, I ended up getting an updated version from
link:Github filament group daterangepicker jquery 1.8
daterangepicker is also able to take all of the options that datepicker supports, so you shouldn't have much trouble converting. Let me know if you have questions and I'll see if I can help.
For reference, the plugin is dual licensed with MIT and GPL. This is the same license structure as jqgrid, so I assume if you are able to use jqgrid, than this plugin should not be a problem.
UPDATE: Adding Code Example
The important part of this code is in the colModel for date. You simply specify a dataInit function for the search options, then add the daterangepicker. Be careful on the capitalization. That got me more than once. The beforeSelectRow is simply some modification I did in order to make my checkboxes along the side behave as a radio button. It is not needed for daterangepicker to work.
$("#myGrid").jqGrid(
{
url:url,
datatype: "json",
colNames:['Version','Date'],
colModel:[
{name:'version', search:true, stype:'text'},
{name:'date', search:true,stype:"text",searchoptions:{dataInit:function(el){
$(el).daterangepicker({dateFormat:'yy/mm/dd'});
}
}}
],
toolbarfilter: true,
sortname: 'version',
sortorder: "desc",
pager: jQuery('#myPager'),
viewrecords: true,
gridview: true,
multiselect: true,
beforeSelectRow: function(rowId)
{
var selectedIds = jQuery('#myGrid').jqGrid().getGridParam("selarrrow");
jQuery("#myGrid").jqGrid().resetSelection();
if(selectedIds)
{
var id = selectedIds[0]
if(id != rowId)
{
jQuery("#myGrid").jqGrid().setSelection(rowId, false);
}
}
else
{
jQuery("#myGrid").jqGrid().setSelection(rowId, false);
}
}
});
I had to do the very same thing, and Joseph's answer above got me 90% of the way there. So, most of the credit is due to him. I had to modify some stuff to get it to work because the filament date range picker allows for single dates (the today option, the specific date option, etc). I also had to add some code to trigger the search after you selected your date. Here's my update...the meat of what I needed to add was in the beginRequest function:
$(document).ready(function() {
var grid = jQuery('#list').jqGrid({
url: '/myajaxurl',
datatype: 'json',
mtype: 'GET',
colNames: ['Reference #', 'CreatedOn', 'Product', 'Model Number', 'Quantity', 'Transaction Type', 'Created By'],
colModel: [
{ name: 'InventoryTransactionLogId', index: 'InventoryTransactionLogId', align: 'center', sortable: true, search: false },
{
name: 'CreatedOn',
search: true,
stype: 'text',
align: 'center',
formatter: 'date',
formatoptions: { newformat: 'm-d-y H:i' },
sortable: true,
searchoptions: {
dataInit: function(el) {
$(el).daterangepicker({ dateFormat: 'yy/mm/dd', onChange: datePick });
}
}
},
{ name: 'ProductName', index: 'ProductName', align: 'center', sortable: true, search: false },
{ name: 'ModelNo', index: 'ModelNo', align: 'center', sortable: true, search: true },
{ name: 'Quantity', index: 'Quantity', align: 'center', sortable: true, search: false },
{ name: 'Description', index: 'Description', align: 'center', sortable: true, search: false },
{ name: 'UserName', index: 'UserName', align: 'center', sortable: true, search: false }
],
loadtext: "Retrieving Inventory Transaction Log...",
rowNum: 50,
rowList: [25, 50, 100],
sortname: 'InventoryTransactionLogId',
sortorder: 'asc',
pager: '#pager',
ignoreCase: true,
viewrecords: true,
height: 450,
autowidth: true,
scrollOffset: 45,
caption: 'Inventory Transaction Log',
emptyrecords: "No records",
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
cell: 'cell',
id: 'InventoryTransactionLogId',
userdata: 'userdata'
},
beforeRequest: function () {
var theGrid = jQuery("#list");
var postData = theGrid.jqGrid('getGridParam', 'postData');
if (postData != undefined && postData.filters != undefined) {
postData.filters = jQuery.jgrid.parse(postData.filters);
//Remove if current field exists
postData.filters.rules = jQuery.grep(postData.filters.rules, function(value) {
if (value.field != 'CreatedOn')
return value;
});
// Parse the range picker field into start/end date
var dateRangeString = $('#gs_CreatedOn').val();
if (dateRangeString.length > 0) {
var dateRange = dateRangeString.split(' - ');
if (dateRange.length == 1) {
startDate = dateRange[0] + ' 00:00:00';
endDate = dateRange[0] + ' 23:59:59.999';
} else {
startDate = dateRange[0] + ' 00:00:00';
endDate = dateRange[1] + ' 23:59:59.999';
}
var startDateFilter = { "field": "CreatedOn", "op": "ge", "data": startDate };
var endDateFilter = { "field": "CreatedOn", "op": "le", "data": endDate };
// Add new filters
postData.filters.rules.push(startDateFilter);
postData.filters.rules.push(endDateFilter);
}
} else {
jQuery.extend(postData, {
});
}
if (postData != undefined && postData.filters != undefined) {
postData.filters = JSON.stringify(postData.filters);
postData._search = true;
}
return [true, ''];
}
});
$('.date').datepicker();
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "bw" });
grid.jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false });
});
datePick = function() {
var grid = $("#list");
$("#list")[0].triggerToolbar();
$("#list").trigger("reloadGrid", [{ page: 1 }]);
}
Hi im looking for a way to submit a form that contains multiple tabbed forms. The user must be able to submit the entire data from all tabs at a single submit by POST. The major problem is that the data wont submit unless it is explicitly rendered / opened and when submitting it does not include the other un-rendered tab forms. :(
Ive been looking for ways but in futile. Correct me if im wrong is this something to do with data-binding?
Sample code:
var fp = new Ext.FormPanel({
renderTo: 'parti2',
fileUpload: true,
width: 866,
frame: true,
title: ' ',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 130,
waitMsgTarget: 'mm_loader',
defaults: {
anchor: '95%',
msgTarget: 'side'
},
{
/**** tab section ****/
xtype:'tabpanel',
plain:true,
activeTab: 0,
autoHeight:true,
defaults:{bodyStyle:'padding:10px'},
items:[{
/**** new tab section ****/
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items:[{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'sec2_ab1',
},{
xtype: 'textfield',
fieldLabel: 'Middle Name',
name: 'sec2_ab2',
},{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'sec2_ab3',
},{
xtype: 'textfield',
fieldLabel: 'Nationality',
name: 'sec2_ab4'
},{
xtype: 'textfield',
fieldLabel: 'Height',
name: 'sec2_ab13',
},{
xtype: 'textfield',
fieldLabel: 'Education',
name: 'sec2_ab15',
}]
},{
/**** new tab section ****/
layout:'form',
title: 'Contract info',
autoHeight:true,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
defaultType: 'textfield',
items:[
{
xtype: 'textfield',
fieldLabel: 'Monthly Salary',
name: 'section_ab5',
},{
xtype: 'textfield',
fieldLabel: 'Work span',
name: 'section_ab4',
},{
xtype: 'fileuploadfield',
id: 'form-file',
fieldLabel: 'Photo',
allowBlank: true,
msgTarget: 'side',
name: 'anyfile1',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
}]
},{
/**** new tab section ****/
title: 'Knowledge of Languages',
layout:'form',
autoHeight:true,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
items:[combo_kl]
} ] /**** end tabs ****/
},{
html: ' ', autoHeight:true, border: false, height: 50, defaults: { anchor: '95%' }
}
,{
buttons: [{
text: 'Reset Form',
handler: function(){
fp.getForm().reset();
}
},{
text: 'Submit Form',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
method:'POST',
url: '?handler/save',
waitMsg: 'Please wait as the Resume is being Send...',
success: function(fp, o){
msg('Success', 'Processed file: "'+o.result.file+'" ');
},
fail: function(fp, o) {
msg('Fail', 'erronious');
}
});
}
}
}] // button end
}]
});
Try adding the following to your TabPanel declaration:
deferredRender: false
This tells the TabPanel to render all of it's child components immediately. Currently your TabPanel is only rendering visible components which is causing problems with the form submit.
Great! That worked perfectly fine now! Thanks! :)
I also found other way to submit the tab panel form's parameters, without deferredRer, altogether by adding:
params: fp.getForm().getFieldValues(true)
on the submit command. :)
fp.getForm().submit({
method: 'POST',
url: '?hander/save',
waitMsg: 'Please wait for the server response...',
params: fp.getForm().getFieldValues(true),
success: function (fp, o) {
msg('Success', 'Processed file: "' + o.result.file + '" ');
},
fail: function (fp, o) {
msg('Fail', 'erronious');
}
});