Related
I'm trying call cellTemplate function in code behind but i cant call. Is there any way to call this function from code behind ? I have tried as you can see at below but the rows show "ShowButton"
ListDxColum.Add(new DxColumns(){
dataField = "cor_ref",
caption = "",
allowFiltering = false,
cellTemplate = "ShowButton"
});
JAVASCRIPT
var orders = rec.documentList;
$("#gridContainer").dxDataGrid({
dataSource: {
store: {
type: "array",
key: "ID",
data: orders
}
},
paging: {
pageSize: 8
},
showRowLines: true,
showBorders: true,
selection: {
mode: "single"
},
filterRow: { visible: true },
//searchPanel: {
// visible: true
//},
columns: rec.DxColumHeader,
paging: { pageSize: 6 },
wordWrapEnabled: true,
filterRow: { visible: false },
columnAutoWidth: false
});
function ShowButton(container, options) {
console.log(options.data["cor_ref"]);
}
you can use this code :
var orders = rec.documentList;
var grid = $("#gridContainer").dxDataGrid({
dataSource: {
store: {
type: "array",
key: "ID",
data: orders
}
},
paging: {
pageSize: 8
},
showRowLines: true,
showBorders: true,
selection: {
mode: "single"
},
filterRow: { visible: true },
//searchPanel: {
// visible: true
//},
columns: rec.DxColumHeader,
paging: { pageSize: 6 },
wordWrapEnabled: true,
filterRow: { visible: false },
columnAutoWidth: false,
cellTemplate: function (container, options) {
console.log(options.data["cor_ref"]);
}
}).dxDataGrid('instance');
Only WWID column is disabled not both columns are disabledenter code here please help me to disable two or more columns
colNames: ['UserName','WWID', 'Generic', 'Mac'],
colModel: [
{ name: 'UserName', index: 'UserName', key: true, width: '200', editable: true, sortable: true, align: 'center' },
{ name: 'WWID', index: 'WWID', width: '250' , editable: true, sortable: true,sorttype:'int', align: 'center' },
{ name: 'Generic', index: 'generic', width:'200', editable: true, sortable: true,sorttype:'text', align: 'center' },
{ name: 'Mac', index: 'mac', width:'200', editable: true, sortable: true,sorttype:'int', align: 'center' },
],
...............
});
jQuery("#gridId").jqGrid('navGrid', '#gridpager',
{ edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
{ // edit option
url: "Uploading.ashx", closeAfterEdit: true,afterSubmitCell: function () { $('#gridId').trigger('reloadGrid');},
beforeShowForm: function (form) { $('#tr_UserName', form).hide(); },
beforeShowForm: function(form) { $('#tr_WWID', form).hide(); }
},
{ // add option
url: "Uploading.ashx", closeAfterAdd: true,
beforeShowForm: function(form) { $('#tr_UserName', form).show(); },
beforeShowForm: function (form) { $('#tr_WWID', form).show(); }
},
You should provide only one beforeShowForm callback which will show/hide both rows. In your case only the last one provided is being used. Your code should be like this:
jQuery("#gridId").jqGrid('navGrid', '#gridpager',
{ edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
//Edit options
{
url: "Uploading.ashx",
closeAfterEdit: true,
afterSubmitCell: function () { $('#gridId').trigger('reloadGrid'); },
beforeShowForm: function (form) { $('#tr_UserName', form).hide(); $('#tr_WWID', form).hide(); }
},
//Add options
{
url: "Uploading.ashx",
closeAfterAdd: true,
beforeShowForm: function(form) { $('#tr_UserName', form).show(); $('#tr_WWID', form).show(); }
},
...
);
jQuery("#gridId").jqGrid('navGrid', '#gridpager',
{ edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
//Edit options
{
url: "Uploading.ashx",
closeAfterEdit: true,
afterSubmitCell: function () { $('#gridId').trigger('reloadGrid'); },
beforeShowForm: function (form) { $('#tr_UserName', form).hide(); $('#tr_WWID', form).hide(); }
},
//Add options
{
url: "Uploading.ashx",
closeAfterAdd: true,
beforeShowForm: function(form) { $('#tr_UserName', form).show(); $('#tr_WWID', form).show(); }
},
...
);
I am new to JQGrid, i am developing a screen where i need to use a tool bar in JQ Grid and perform search operation accordingly.
I have a date field in my JqGrid and i have added the DtPicker in the Search option also.
But when i select the date from DTPicker, search for the selected date is not performed.
Please let me know how to perform search for selected date.
<table id="test">
</table>
<div id="divtest">
</div>
<div>
<asp:Label ID="count" runat="server" Text="Label"></asp:Label>
</div>
<script type="text/javascript">
$(document).ready
(
function CreateGrid()
{
var lastSel,lastSel1, Status = ["All", "Active", "InActive"],defaultStatus="Active";
jQuery("#test").jqGrid
(
{
url:'Test.aspx',
datatype:'json',
contentType: "application/json; charset=utf-8",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colNames:[ 'EMPID',
'EMPName',
'DOB',
'Designation',
'Genders',
'Status',
'Remarks',
'EMPType',
''
],
colModel:
[
{
name:'EMPID',
index:'EMPID',
width:120,
sorttype:'int',
editable:false,
key:true,
sortable: true,
search:true,
editoptions:{readonly:true}
},
{
name:'EMPName',
index:'EMPName',
width:250,
sortable: true,
align:"left",
editable:true,
size:100,
editrule:{custom:true,custom_func:checkName}
},
{
name:'DOB',
index:'DOB',
width:250,
sortable: true,
align:"left",
size:100,
editable:true,
sorttype:"date",
formatter: "date",
formatoptions: {newformat:'m/d/Y'},
editrule:{custom:true,custom_func:checkName}
,editoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui){
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
}
,searchoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui) {
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
},
search:true
},
{
name:'Designation',
index:'Designation',
width:250,
align:"left",
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value:"0:select;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer; 6:Tester;7:Sales;8:Others"}
,editrule:{custom:true,custom_func:checkDropDown}
,stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer;6:Tester;7:Sales;8:Others"
}
},
{
name:'Gender',
index:'Gender',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Male;2:Female"},
editrule:{custom:true,custom_func:checkDropDown},
stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:Male;2:Female"
}
},
{
name:'Status',
index:'Status',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Active;2:InActive"}
,editrule:{custom:true,custom_func:checkDropDown},
stype:'select'
,searchoptions: {
sopt:['eq'],value:":All;1:Active;2:InActive"
}
},
{
name:'Remarks',
index:'Remarks',
width:150,
sortable: true,
align:"left",
editable:true,
edittype:"textarea",
editoptions:{rows:'3',cols:'10'},
size:100
},
{
name:'Emptype',
index:'Emptype',
sortable: true,
formatter:'checkbox',
editable:true,
edittype:"checkbox",
stype:'select',
searchoptions: {
sopt:['eq','ne'],value:":All;true:In;false:Out"
}
},
{
name:'action',
index: 'action',
sortable:false,
align:'center',
formatter:"actions",
formatoptions:{key:true},
search:false
}
],
rowNum:10,
rowList:[2,5,10,15],
pager:'#divtest',
viewrecords:true,
width:0.96*screen.width,height:0.42*screen.height,
caption:'jqGrid',
emptyrecords: "No Results Found",
sortable:true,
sortorder: "desc",
search:true,
ignoreCase:true,
loadonce:true,
multiselect: true,
shrinkToFit:true,forceFit:true
,editurl:"Test4.aspx",
onAfterSaveCell:
function reload(result)
{
$("#grid").trigger("reloadGrid");
}
,onSelectRow:
function (id)
{ var tr;
if (id && id !== lastSel)
{
if (typeof lastSel !== "undefined")
{
$("#test").jqGrid('restoreRow', lastSel);
$("#test").trigger("reloadGrid",[{current:true}]);
}
lastSel = id;
}
}
}
).jqGrid('navGrid','#divtest',
{ edit:false,
add:true,
del:false,
search:false
},
//for Edit
{
},
//for Add
{
top:0.20*screen.height,
left:(screen.width-(0.65*screen.width)),
width: 0.35*screen.width,
align:'Center',
resizeable: true,
closeAfterAdd:true,
reloadAfterSubmit:true,
serializeEditData: function(data)
{
return (data);
},
beforeShowForm: function(form)
{
$("#DOB").datepicker
({
changeMonth: true,
recreateForm: true,
changeYear: true
});
}
},
//for Delete
{
},
//for Search
{ multipleSearch: true,
multipleGroup:true,
//showQuery: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
beforeShowSearch:function()
{
$("#test")[0].toggleToolbar();
},
onClose: function()
{
$("#test")[0].toggleToolbar();
}
}
).jqGrid('navButtonAdd','#divtest',
{
caption:" ",
width:'15',
buttonicon:"ui-icon-search",
onClickButton: function()
{
$("#test")[0].toggleToolbar();
},
position:"last"
})
//For displaying the blank tool bar on the grid
.jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
}
)
.jqGrid('inlineNav',"#pager",{
edit:false,
editicon: "ui-icon-pencil",
add:true,
addicon:"ui-icon-plus",
cancel: true,
cancelicon:"ui-icon-cancel",
save: true,
saveicon:"ui-icon-disk"
}
);
//The Date DTPicker field in the Edit portion.
var initDateEdit =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
,
//The Date DTPicker field in the Search portion.
//But not working in this.
initDateSearch =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
;
//To hide the check box or select box in the Header of the JQGrid.
var myGrid = $("#test");
$("#cb_"+myGrid[0].id).hide();
var grid = $("#test"),
getColumnIndexByName = function (grid, columnName)
{
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++)
{
if (cm[i].name === columnName)
{return i;}
}
return -1;
};
}
);
</script>
Thanks and Regards,
NMB
You just need to add this after your Filter tool bar..
.change(function(){$("#table_ID")[0].toggleToolbar()})
I am running into problems while making a front-end user registration form as part of a custom WordPress theme, and I need to be able to check if an e-mail exists with an ajax request before allowing the user to register.
Here is the JS:
I am using the jQuery Validate plugin, and I am using addMethod to insert into the .validate call. Here is the code:
function chk_email(value){
var response;
$.ajax({
async: false,
url: ajaxurl,
type: 'POST',
data: {action: 'chk_email', email: value},
dataType: "text",
success: function(msg) {
if (msg>0) {
response = true;
} else{
response = false;
}
}
})
console.log(response);
return response;
}
$.validator.addMethod('chk_email', chk_email, "This email address has already been registered");
$("#adduser").validate({
// debug: true,
rules: {
user_login: {
required: true,
minlength: 3,
nowhitespace: true,
alphanumeric: true
},
first_name: {
required: true,
},
last_name: {
required: true,
},
user_email: {
required: true,
email: true,
nowhitespace: true,
// remote: { url: ajaxurl, type: 'post' }
chk_email: true
},
tel: {
required: true,
phoneUS: true
},
street_address: {
required: true
},
locality: {
required: true
},
region: {
required: true
},
postal_code: {
required: true
},
},
messages: {
user_login: {
required: "Required",
user_login: "A username needs to be atleast 3 charachters long."
},
user_email: {
required: "We need your email address to contact you",
user_email: "Your email address must be in the format of name#domain.com",
nowhitespace: "yeah"
},
},
errorElement: 'span',
errorClass: 'help-inline',
errorPlacement: function(error, element) {
error.insertAfter(element);
},
highlight: function(element) {
var parent = $(element).parents('.control-group');
$(element).addClass('error');
$(parent).addClass('error');
},
unhighlight: function(element) {
var parent = $(element).parents('.control-group');
$(element).removeClass('error');
$(parent).removeClass('error');
}
// debug: true
});
And here is the PHP I am using within the functions.php file:
add_action('wp_ajax_nopriv_chk_email', 'chk_email');
function chk_email(){
if (email_exists($_POST['email']) ){
// return TRUE;
echo 'true';
} else {
// return FALSE;
echo 'false';
}
}
I am not quite sure what I am doing wrong here. I would appreciate any thoughts.
http://docs.jquery.com/Plugins/Validation/Methods/remote
Check out the overview and the examples.
So instead of chk_email(), you would add to the remote option:
remote: {
url: ajaxurl,
type: "post"
}
Greeting,
I'm using jquery Plugins/Validation library. I want to allow validation on submitting but I'm not sure where I should insert the code:
I know that I can user submitHandler for that but after reading the document I had hard time to implement it so I need your help guys.
jquery validation is working ok but the problem that the form still submitted even there are invalid inputs.
here is my validation function and I want to know how can I make it to not submit the form if there is invalid input.
by the way, I'm using asp.net button for submitting the form.
here is my code:
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
"<%=txtHomePhone.UniqueID %>": {
phonehome: true
},
"<%=txtMobileHome.UniqueID %>": {
mobilephone: true
},
"<%=txtFaxHome.UniqueID %>": {
faxhome: true
},
"<%=txtEmailHome.UniqueID %>": {
email: true
},
"<%=txtZipCodeHome.UniqueID %>": {
ziphome: true
},
//work
"<%=txtPhonework.UniqueID %>": {
phonework: true
},
"<%=txtMobileWork.UniqueID %>": {
mobilework: true
},
"<%=txtFaxWork.UniqueID %>": {
faxwork: true
},
"<%=txtEmailWork.UniqueID %>": {
email: true
},
"<%=txtWebSite.UniqueID %>": {
url: true
},
"<%=txtZipWork.UniqueID %>": {
zipwork: true
}
},
errorElement: "mydiv",
wrapper: "mydiv", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
});
to enable debugon submit I need to set debug to true in validate function for the rules by adding this line : debug: true,
correct code:
$(document).ready(function() {
$("#aspnetForm").validate({
debug: true,
rules: {
"<%=txtHomePhone.UniqueID %>": {
phonehome: true
},
"<%=txtMobileHome.UniqueID %>": {
mobilephone: true
},
"<%=txtFaxHome.UniqueID %>": {
faxhome: true
},
"<%=txtEmailHome.UniqueID %>": {
email: true
},
"<%=txtZipCodeHome.UniqueID %>": {
ziphome: true
},
//work
"<%=txtPhonework.UniqueID %>": {
phonework: true
},
"<%=txtMobileWork.UniqueID %>": {
mobilework: true
},
"<%=txtFaxWork.UniqueID %>": {
faxwork: true
},
"<%=txtEmailWork.UniqueID %>": {
email: true
},
"<%=txtWebSite.UniqueID %>": {
url: true
},
"<%=txtZipWork.UniqueID %>": {
zipwork: true
}
},
errorElement: "mydiv",
wrapper: "mydiv", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
});