{
label: 'Live preview',
type: 'checkbox',
checked: false,
click: (menuItem, browserWindow, event) => {
menuItem.checked = true ? false : true;
browserWindow.webContents.send('live-preview', menuItem.checked);
}
},
when i click on context menu on the menuItem live preview (checkbox) : always unchecked
How to toggle checkbox when i click on the menuItem
Solution:
// initialise isChecked variable before the initialisation of context menu
var isChecked = false;
{
label: 'Live preview',
type: 'checkbox',
checked: isChecked,
click: (menuItem, browserWindow, event) => {
browserWindow.webContents.send('live-preview', menuItem.checked);
isChecked = !isChecked;
}
}
Because you do not set the boolean value of the checked attribute correctly.
Try:
menuItem.checked = !menuItem.checked
instead of:
menuItem.checked = true ? false : true;
Explanation:
The assignment menuItem.checked = true ? false : true; will always assign false to menuItem.checked since true is always... true.
If you want to flip the boolean using a ternary operator you would have to do
menuItem.checked = menuItem.checked ? false : true;
Edit
Also, I think you need to actually set the checked-property correctly.
{
label: 'Live preview',
type: 'checkbox',
checked: false,
click: (menuItem, browserWindow, event) => {
menuItem.checked = !menuItem.checked;
browserWindow.webContents.send('live-preview', menuItem.checked);
}
},
will result in your Checkbox always being unchecked, because of checked: false.
Try out below code:
{
label: 'Live preview',
type: 'checkbox',
click: (menuItem, browserWindow, event) => {
menuItem.checked = !menuItem.checked; // toggles the menu item
browserWindow.webContents.send('live-preview', menuItem.checked);
}
},
Related
I got the following input text on a Child Component:
<Input
placeholder={ i18n.t('searchSomeone') }
value={ this.props.searchText }
onChangeText={ this.props.onSearch }
defaultValue={''}/>
This is the way , I'm passing the variable and onChangeText handler:
<ChildComponent
onSearch={ this._onSearch }
searchText={ this.state.searchText }>
</ChildComponent>
And this is the _onSearch() function:
componentWillMount: function() {
this._onSearch = _.debounce((text) => {
this.setState({ refreshing : true }, () => {
if(text.length === 0) {
this.setState({ filteredSearch: false }, () => {
this.getAllReports();
})
}else{
this.setState({
page: 1,
refreshing: true,
reports: [],
filteredSearch: true
}, () => {
this.getReportsBySearchString();
})
}
})
}, 1000);
},
I wanted to bind this input text value, because when I do a pull up to refresh, i just want to set the text to empty string.
_onRefresh: function() {
this.setState({
filteredSearch: false,
searchText: ''
}, () => {
this.getAllReports();
})
},
But the problem is that with this implementation, whenever I try to type in the text input, it doesn't type anything.
What am I missing?
It looks like you are not saving the input value in this.state.searchText. That's the reason why the input value is always ''.
this._onSearch = _.debounce((text) => {
this.setState({
refreshing : true,
searchText: text // <-- Here
}, () => {
if(text.length === 0) {
this.setState({ filteredSearch: false }, () => {
this.getAllReports();
})
}else{
this.setState({
page: 1,
refreshing: true,
reports: [],
filteredSearch: true
}, () => {
this.getReportsBySearchString();
})
}
})
}, 1000);
Edit
You can try debounce the callback function you are passing to setState, it is not tested so I'm not sure if it is going to work.
It should be something like this
this._onSearch = (text) => {
this.setState({
refreshing : true,
searchText: text
}, this._callback)
this._callback = _.debounce(() => {
const text = this.state.searchText;
if(text.length === 0) {
...
}
}, 1000);
I am using jqxgrid widget, which is a jquery grid widget.
I am finding that the filter conditions dropdown is extending beyond the filter popup and this is causing the filter popup to automatically close if I click the last item in the filter conditions dropdown. So its impossible to filter when using the last item in conditions dropdown. You can see this in screen shot attached. I cannot filter on null or not null conditions due to this.
How can I prevent this?
Code for jqxGrid is as below.
$("#jqxgrid").jqxGrid({
theme: 'ui-start',
width: 740,
source: dataAdapter,
pageable: true,
sortable: true,
filterable: true,
autoheight: true,
virtualmode: true,
rendergridrows: function (args) {
return args.data;
},
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS',
'DOES_NOT_CONTAIN', 'STARTS_WITH',
'ENDS_WITH', 'EQUAL', 'NULL', 'NOT_NULL'];
var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
switch (type) {
case 'stringfilter':
return stringcomparisonoperators;
case 'numericfilter':
return numericcomparisonoperators;
case 'datefilter':
return datecomparisonoperators;
case 'booleanfilter':
return booleancomparisonoperators;
}
},
updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
columnfilter, filtertype, filterconditions) {
var index1 = 0;
var index2 = 0;
if (columnfilter != null) {
var filter1 = columnfilter.getfilterat(0);
var filter2 = columnfilter.getfilterat(1);
if (filter1) {
index1 = filterconditions.indexOf(filter1.comparisonoperator);
var value1 = filter1.filtervalue;
filterinputfield1.val(value1);
}
if (filter2) {
index2 = filterconditions.indexOf(filter2.comparisonoperator);
var value2 = filter2.filtervalue;
filterinputfield2.val(value2);
}
}
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
},
columns: [
{ text: 'Sales Order ID', dataField: 'SalesOrderID', width: 120 },
{ text: 'Sales Order Number', dataField: 'SalesOrderNumber', width: 120 },
{ text: 'Purchase Order Number', dataField: 'PurchaseOrderNumber', width: 120 },
{ text: 'Customer ID', dataField: 'CustomerID', width: 120 },
{ text: 'Order Date', dataField: 'OrderDate', width: 130, cellsformat: 'MM-dd-yyyy' },
{ text: 'Due Date', dataField: 'DueDate', width: 130, cellsformat: 'MM-dd-yyyy' }
]
});
It seems that writing down your question in detail can sometimes suddenly provide you with the solution and answer. In my case, it did.
I have set autoDropDownHeight to true in my code, which actually needs to be set to false.
The correct code should have been as below.
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: false, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: false, selectedIndex: index2 });
I would like to disable column on databound based on the role security.
I am currently able to hide it not disable as the following but i have no idea how to disable it. Please advise thank you
function OnDataBound_ProductGrid() {
if ("#ViewBag.Role" == 'Admin') {
var grid = $("#Product").data("kendoGrid");
grid.hideColumn(0);
}
}
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Template(ClientTemplate("<input type='checkbox' class='checkbox'/> ");
columns.Bound(r => r.RouteName);
})
.Events(events =>ev.DataBouns("OnDataBound_ProductGrid"))
)
I agree with Antony:
Following property must be set to false:
model: {
fields: {
ProductID: {
//this field will not be editable (default value is true)
editable: false
}
}
}
And in your scenario you should be able to do following:
function OnDataBound_ProductGrid() {
if ("#ViewBag.Role" == 'Admin') {
var grid = $("#Product").data("kendoGrid");
grid.datasource.fields.ProductId.editable = false;
}
}
Wrapping/using the admin role condition around the grid definition would also do the job:
if ("#ViewBag.Role" == 'Admin') {
InnitGrid(false);
}
else
{
InnitGrid(true);
}
function InnitGrid(isEditable) {
$("#grid").kendoGrid({
dataSource: {
model: {
fields: {
ProductID: {
editable: isEditable
// or just replace isEditable with ("#ViewBag.Role" == 'Admin')
}
}
}
}
});
}
You can do this by setting the field to editable: false on the data source.
You can use a function that returns true or false, in depends what do you need.
columns.Bound(r => r.RouteName).Editable("isNotEditable");
function isNotEditable() {
return false;
}
I am using MVC 2.0 web application where there few buttons whose onclick i call a action method, but when i press search button for the first time , the action method is called but after that if i try to click the search button the action method is not getting called.
Also let me tell you that i am using the JQ Grid to display the data on button onclick.
Please see below code snippet.
function LoadGrid(data, type) {
var showGrid = $("#showGrid");
var navigation = $("#navigation");
showGrid.jqGrid({
url: '/Customer/CustomerSearchInfo',
datatype: 'json',
mtype: 'POST',
cache: false,
postData: { param: data, type: type },
colNames: ['Customer Name', 'Contact Name', 'Company Number', 'Customer Number', 'Link Number', 'Phone', 'SalesRep Name', 'Sequence'],
colModel: [
{ name: 'COMPANY_NAME', index: '1', align: 'left', sortable: true },
{ name: 'CONTACT_NAME', index: '2', align: 'left', sortable: true },
{ name: 'COMPANY_NUM', index: '3', align: 'left', sortable: true },
{ name: 'CUSTOMER_NUM', index: '4', align: 'left', sortable: true },
{ name: 'LINK_NUM', index: '5', align: 'left', sortable: true },
{ name: 'PHONE_1', index: '6', align: 'left', sortable: true },
{ name: 'SALESREP_NUM', index: '7', align: 'left', sortable: true },
{ name: 'ADDRESS_SEQ_NUM', index: '8', align: 'left', sortable: true }
],
pager: navigation,
rowNum: 10,
rowList: [5, 10, 20, 30, 50],
viewrecords: true,
caption: '',
height: '250px',
sortorder: 'asc',
sortname: '0',
shrinkToFit: true,
autowidth: true,
}
})
};
The action method mentioned (/Customer/CustomerSearchInfo) is not getting called for the second time.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CustomerSearchInfo(string param, int type)
{
try
{
var custInfo = new List<Customer>();
switch (type)
{
case 1:
custInfo = custDO.GetCustomerInfo(customerID: param);
break;
case 2:
custInfo = custDO.GetCustomerInfo(customerName: param);
break;
case 3:
custInfo = custDO.GetCustomerInfo(contactName: param);
break;
case 4:
custInfo = custDO.GetCustomerInfo(companyID: param);
break;
case 5:
custInfo = custDO.GetCustomerInfo(salesRepID: param);
break;
case 6:
custInfo = custDO.GetCustomerInfo(phone: param);
break;
case 7:
custInfo = custDO.GetCustomerInfo(addrtype: param);
break;
case 8:
custInfo = custDO.GetCustomerInfo(status: param);
break;
case 9:
custInfo = custDO.GetCustomerInfo(linkID: param);
break;
}
return custInfo != null
? Json(GetJson(custInfo, 10, custInfo.Count, 0),
JsonRequestBehavior.DenyGet)
: Json(null, JsonRequestBehavior.DenyGet);
}
catch (Exception ex)
{
Response.StatusCode = 500;
return Json(null, JsonRequestBehavior.DenyGet);
}
}
For reference below are the 2 search buttons:
input id="btnCustID" type="button" class="buttonsearch" title="Search BY Customer ID"
onclick="LoadGrid(document.getElementById('txtCustID').value,1)"
input id="btnCustName" type="button" class="buttonsearch" title="Search BY Customer Name"
onclick="LoadGrid(document.getElementById('txtCustName').value,2)"
Your JavaScript will not work, because you are trying to reinitialize already initialized jqGrid. There are few things you can do.
You can unload your jqGrid before initializing it again (you need to mark Custom checkbox when downloading the grid):
var showGrid = $("#showGrid");
var navigation = $("#navigation");
showGrid.jqGrid('GridUnload');
...
You can just change postData and reload your jqGrid without reinitialization (you need to initialize it earlier):
var showGrid = $("#showGrid");
showGrid.setPostData({ param: data, type: type });
showGrid.jqGrid('setGridParam', { page: 1 }).trigger("reloadGrid");
Or you can implement native jqGrid searching, here you have some simple description: http://tpeczek.com/2009/11/jqgrid-and-aspnet-mvc-searching.html
I suggest you install Fiddler to see what's really going on; for starters: is a request made that second time? And what does it look like?
I am trying to enable the next tab at the end of the function below.
Here is my function (UPDATED)
var $signup = $('#signup-content').tabs({disabled: [1,2],
show: function(event, ui) {
// Validates Form on Slide # 1
$("#createAccount").validate({
meta: "validate",
errorElement: "em",
errorClass: "error",
validClass: "success",
highlight: function(element, errorClass, validClass) {
$(element).closest("div.required").removeClass(validClass);
$(element).closest("div.required").addClass(errorClass);
$(element).addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest("div.required").removeClass(errorClass);
$(element).closest("div.required").addClass(validClass);
$(element).removeClass(errorClass);
},
errorPlacement: function(error, element) {
if (element.attr("name") == "month"
|| element.attr("name") == "day"
|| element.attr("name") == "year")
error.insertAfter("#year");
else
error.addClass("hide");
},
debug:true,
groups: {birthday: "month day year"
},
rules: {
firstname:{required:true},
lastname:{required:true},
email: {required: true, email: true},
confirm_email: {required: true, equalTo: "#email"},
password:{required: true},
confirm_password:{required: true,equalTo: "#password"},
zipcode: {required:true, min:5},
month:{required:true},
day:{required:true},
year:{required:true},
gender:{required:true},
agree:{required:true}
},
messages: {
month: {required: "Month Is Missing"},
day: {required: "Day Is Missing"},
year: {required: "Year Is Missing"}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
beforeSubmit: function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
return true;
},
success: function showResponse(formData) {
$('html, body').animate({scrollTop:'0px'}, 500);
$signup.tabs('option', 'enabled', [1]);
$signup.tabs('select', 1); // Go To Slide # 2
$('#message-container').addClass("notice").append('<h3>Your Account Has Been Created!</h3><img src="/assets/images/close.png" alt="Close" title="Close"/>');
$('#message-container').fadeIn(1200, function(){
$('#close').click(function(){$('#message-container').fadeOut(1200);});});
return false;}});}});
this worked for me, at least with version 1.7 :
$signup.tabs('enable', 1);
According to the instructions, you can't use:
$signup.tabs('option', 'enabled', [1]);
but instead use:
$signup.data('disabled.tabs', []);
what that does is clear the list of disabled tabs.