jQWidgets Forums

Forum Replies Created

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
June 5, 2014 at 3:31 am in reply to: jqxValidator with Tabs jqxValidator with Tabs #55372
deepak_chaurasia
Participant
Hi, Please find code that i tried
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Tabs, Tabs Widget, TabView, jqxTabs” />
<meta name=”description” content=”The jqxTabs is breaking the content into multiple sections. You
can populate it from ‘UL’ for the tab titles and ‘DIV’ for it’s contents.” />
<title id=’Description’>The jqxTabs is breaking the content into multiple sections.
You can populate it from ‘UL’ for the tab titles and ‘DIV’ for it’s contents.
</title>
<link rel=”stylesheet” href=”js/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/jquery/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”js/jqxcore.js”></script>
<script type=”text/javascript” src=”js/jqxtabs.js”></script>
<script type=”text/javascript” src=”js/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”js/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/jqxinput.js”></script>
<script type=”text/javascript” src=”js/jqxvalidator.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxTabs.
$(‘#animation’).jqxButton({width:200});
$(“#input1”).jqxInput({placeHolder: “Enter a Country”, height: 25, width: 200, minLength: 1});
$(“#input2”).jqxInput({placeHolder: “Enter a state”, height: 25, width: 200, minLength: 1});
$(“#input3”).jqxInput({placeHolder: “Enter a city”, height: 25, width: 200, minLength: 1});
$(“#input4”).jqxInput({placeHolder: “Enter a continent”, height: 25, width: 200, minLength: 1});
$(“#input5”).jqxInput({placeHolder: “Enter a village”, height: 25, width: 200, minLength: 1});
$(‘#jqxTabs’).jqxTabs({ width: ‘90%’, height: 200, position: ‘top’});

$(‘#jqxTabs’).unbind(‘selected’).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
var text = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedTab);
alert(text)
});
$(‘#settings div’).css(‘margin-top’, ’10px’);

$(‘#animation’).on(‘click’, function () {
$(‘#jqxWidget’).jqxValidator(‘validate’);
});

$(‘#jqxWidget’).jqxValidator({
rules: [
{ input: ‘#input1’, message: ‘Username is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input2’, message: ‘Username’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input3’, message: ‘Username asdadsadais required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input4’, message: ‘Username 1231231300000is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input5’, message: ‘Username is required!—————‘, action: ‘keyup, blur’, rule: ‘required’ }]
});

});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=’jqxTabs’>
- JavaServer Pages
- Active Server Pages
- Python
- Perl
<div>
<input type=”text” id=”input1″>
</div>
<div>
<input type=”text” id=”input2″>
</div>
<div>
<input type=”text” id=”input3″>
</div>
<div>
<input type=”text” id=”input4″>
</div>
<div>
<input type=”text” id=”input5″>
</div>
</div>
<div id=’settings’>
<div id=’animation’>
Enable Select Animation</div>
</div>

</div>
</body>
</html>
May 22, 2014 at 12:59 pm in reply to: Issues when using initEditor and validation together Issues when using initEditor and validation together #54805

deepak_chaurasia
Participant

Hi,
Currently I am doing this , but as you said i should avoid it , is there any work around for this , my requirement is that without clicking anywhere else on grid i should be able to bind data to grid cell. Please provide any solution to it.

May 21, 2014 at 7:27 am in reply to: Issues when using initEditor and validation together Issues when using initEditor and validation together #54737

deepak_chaurasia
Participant

Hi ,
Please find the sample code for the same:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In order to enter in edit mode, select a grid cell and start typing, “Click” or press the “F2” key. You
can also navigate through the cells using the keyboard arrows or with the “Tab” and “Shift + Tab” key combinations. To cancel the cell editing, press the “Esc” key. To save
the changes press the “Enter” key or select another Grid cell. Pressing the ‘Space’ key when a checkbox cell is selected will toggle the check state.</title>
<link rel=”stylesheet” href=”js/externallibs/jqxwidgets_upgrade/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/externallibs/jquery-1.11.2.min.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxcore.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxdata.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxmenu.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxgrid.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxlistbox.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxcalendar.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/globalization/globalize.js”></script>
<script type=”text/javascript” src=”js/externallibs/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘date’, type: ‘date’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
editable: true,
enabletooltips: true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{
text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 110, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
if (value == “”)
return true;
var year = value.getFullYear();
if (year >= 2015) {
return { result: false, message: “Ship Date should be before 1/1/2015” };
}
return true;
},
initeditor : function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
editor.jqxDateTimeInput({showFooter:true});
editor.unbind(‘change’).bind(‘change’,function(){
$(“#jqxgrid”).jqxGrid(‘endcelledit’, row, this.datafield, false, true ,false);
})
}
},
{ text: ‘Price’, datafield: ‘price’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value < 0 || value > 15) {
return { result: false, message: “Price should be in the 0-15 interval” };
}
return true;
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
},
initeditor : function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
editor.unbind(‘change’).bind(‘change’,function(){
$(“#jqxgrid”).jqxGrid(‘endcelledit’, row, this.datafield, false, true ,false);
})
}
}
]
});

});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”font-size: 12px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif; margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
</div>
</body>
</html>

In htis example if i change Ship Date. it is binded dynamically to grid , but if i change date to some value which is invalid (in this case date more than 1/1/2015). error message is getting displayed but when i again click on that same cell , i get “This.editcell is undefined” error in console.

Please see into this issue

May 6, 2014 at 6:52 am in reply to: jqxGRid jqxGRid #54018

deepak_chaurasia
Participant

Hi Peter,
I got the example , but if we take Quantity column as an example , error validation message is displayed only if we click on some other cell , Is there any way to display that message as soon as validation fails , I mean without clicking on another cell.

May 6, 2014 at 6:31 am in reply to: jqxGRid jqxGRid #54015

deepak_chaurasia
Participant

Hi Team,
scenario in my case is that i want to validate what user has entered the moment he is entering , I mean for example we have a column which is a textbox in edit mode , i want to check value entered on every key press

May 6, 2014 at 5:59 am in reply to: jqxGRid jqxGRid #54006

deepak_chaurasia
Participant

Hi ,
Can you please provide me an example so i can get a better understanding of it.

April 8, 2014 at 11:05 am in reply to: jqxGrid Validation jqxGrid Validation #52700

deepak_chaurasia
Participant

Hi ,
I don’t want to call showvalidationpopup , i want to call validation method of other column.Can you please suggest how to do that ?

March 6, 2014 at 10:11 am in reply to: jqxGrid columntype droopdownlist giving issues jqxGrid columntype droopdownlist giving issues #50584

deepak_chaurasia
Participant

this is happening only in IE9 , working fine in Mozilla firefox

March 6, 2014 at 10:09 am in reply to: jqxGrid columntype droopdownlist giving issues jqxGrid columntype droopdownlist giving issues #50583

deepak_chaurasia
Participant

Please find the code . In this ‘Location Type’ having datafield ‘locationTypeCode’ giving such issue
//////////////////////////////////////////////////////////////////
var dataFields = [{ name: ‘Location’, value: ‘locationCode’,
values: { source: this.locationAdapter.records, value: ‘Code’, name: ‘Description’ }
},

{ name: ‘locationCode’, type: ‘string’ },
{ name: ‘instrumentId’, type: ‘number’ },
{ name: ‘locationDesc’, type: ‘string’ },
{ name: ‘LocationRoleType’, value: ‘locationRoleTypeCode’,
values: { source: this.locationRoleTypeAdapter.records, value: ‘Code’, name: ‘Description’ }
},
{ name: ‘locationRoleTypeCode’, type: ‘string’ },
{ name: ‘locationRoleTypeDesc’, type: ‘string’ },
{ name: ‘LocationType’, value: ‘locationTypeCode’,
values: { source: this.locationTypeAdapter.records, value: ‘Code’, name: ‘Description’ }
},
{ name: ‘locationTypeCode’, type: ‘string’ },
{ name: ‘locationTypeDesc’, type: ‘string’ },
{ name: ‘locationPercent’, type: ‘string’ },
{ name: ‘rowId’, type: ‘string’ },
{ name: ‘rowScn’, type: ‘string’ },
{ name: ‘rowstatus’, type: ‘string’ },
{ name: ‘sourceUpdateId’, type: ‘string’ },
{ name: ‘targetUpdateTimestamp’, type: ‘date’ },
];
/////////////////////////////////////////////////////////////////////////////////////////////////////

var columns = [ { text: ‘ ‘, dataField: ‘rowstatus’,cellsrenderer :imagerenderer,editable: false },
{ text: ‘Location ‘, datafield: ‘locationCode’, displayfield: ‘Location’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: that.locationAdapter, displayMember: ‘Description’, valueMember: ‘Code’ });
},
validation : function(cell , value)
{
//Some COde
}
},
{ text: ‘Location Role Type’, datafield: ‘locationRoleTypeCode’, displayfield: ‘LocationRoleType’, columntype: ‘dropdownlist’, minwidth: 100,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: that.locationRoleTypeAdapter, displayMember: ‘Description’, valueMember: ‘Code’ });
},
validation : function(cell , value)
{
//SOme Code
}
},
{ text: ‘Location Type’, datafield: ‘locationTypeCode’, displayfield: ‘LocationType’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: that.locationTypeAdapter, displayMember: ‘Description’, valueMember: ‘Code’ });
},
validation : function(cell , value)
{
//Some Code
}
}]

January 19, 2014 at 6:38 pm in reply to: _.initmenu taking lot of time _.initmenu taking lot of time #48065

deepak_chaurasia
Participant

Thanks Peter ,
and could you please let me know , initmenu is invoked only if we are using jqxMenu , or is it invoked on grid Creation irrespective of properties we are using.

January 11, 2014 at 5:55 am in reply to: can i set path for file to exported using exportdata of jqxgrid.export.js? can i set path for file to exported using exportdata of jqxgrid.export.js? #47731

deepak_chaurasia
Participant

Thanks Peter , for the Reply

December 10, 2013 at 7:07 am in reply to: Unable to give relative width to jqxComboboxes Unable to give relative width to jqxComboboxes #46263

deepak_chaurasia
Participant

Hi Peter,
Thanks for the reply , It was very much helpfull
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)