My placeholder string is partially visible in angular js.
var select2BaseOpts = {
openOnEnter: true,
allowClear: true,
closeOnSelect: false,
dropdownAutoWidth: true,
width: '100%'
};
If I dont include
dropdownAutoWidth: true,
width: '100%'
then the dropdown list width goes out of the current window but placeholder string is fully visible. If I include them, then dropdown list width is proper but placeholder string in not completely visible.
Related
My helper window is implemented like that:
updWindow = new BrowserWindow({
width: 400,
height: 200,
resizable: false,
show: false,
center: true,
maximizable: false,
minimizable: false,
title: 'Apdate Available'
});
updWindow.on('close', function () {
});
updWindow.loadURL(url.format({
pathname: path.join(__dirname, 'updateAvailable.html'),
protocol: 'file:',
slashes: true
}));
updWindow.setMenuBarVisibility(false);
When I click "x" button at window header the window will be closed and destroyed. So I will not be able to open it again using updWindow variable. Is there a way to keep window object for new opennings without reinitializations? I still want to use "x" button for this purpose.
My app is targeted to Mac OS.
You can use the function preventDefault on the event Electron will hand your handler over, i.e. like this:
updWindow.on("close", (evt) => {
evt.preventDefault(); // This will cancel the close
updWindow.hide();
});
This is mentioned in the Electron documentation, namely here.
Using this solution, you will later be able to un-hide the window by calling updWindow.show();.
I have a problem with kendoGrid with popup editing. It displays value of first column as a label in popup even when I set editable property to false.
columns: [
{
template: kendo.template('<span>#: sys_index # </span>'),
width: 38,
editable: false
}, {
title: 'System Name',
field: 'SystemName'
}, {
command: ['edit', 'destroy'], width: 200
}
]
rendered grid
grid popup
Editability determines if the field value can be modified, but it will still appear in both cases. A possible option is to remove the readonly content in the Grid's edit event.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit
http://dojo.telerik.com/ItUvA
Assuming that the readonly content is in the first column...
edit: function(e) {
var form = e.container;
form.find(".k-edit-label").eq(0).remove();
form.find(".k-edit-field").eq(0).remove();
}
I am in need of assistance in an attempt to programmatically check/uncheck a checkbox in a kendo grid.
I have part of my Grids datasource for this relevant field as...
receivereport: {
editable: true,
nullable: false,
required: false,
type: 'boolean',
validation: {
required: false
}
},
And the grids configuration is...
$("#contactGrid").kendoGrid({
dataSource: contactGridDS,
navigatable: true,
dataBound: mapContactTypes,
editable: true,
edit: function (input) {
},
toolbar: ["save", "cancel"],
pageable: false,
columns: [
{ field: 'email', title: 'Email', hidden: false, attributes: { "class": 'contactCell_email' } },
{ field: 'receivereport', title: 'Receive Reports?', hidden: false, attributes: { "class": 'contactCell_receivereport' }, template: '<input type="checkbox" #= receivereport ? "checked=checked" : "" # value="" disabled="disabled" ></input>' }
],
//filterable: true,
sortable: {
mode: 'single',
allowUnsort: false
}
});
For brevity sake, I cut some of the other code out that's not relevant, such as other fields not involved here.
So, I have an email method that has a regex in it that works, and what I want to do is, if on focus, or focus out of the email field, if that email is invalid, make the receive report field false, but it's not registering dirty editing, and I even tried forcing it by appending some CSS rules and classes, which makes it "look" dirty, but when I change the value of the checkbox, on save, it goes back to what it was.
The data is bound to the receivereport data. So I think I read on the forums here that I need to do something like datasource.set("receivereport", false); And maybe a sync? The syncinc fires but it doesn't help and I must be calling the set incorrectly because the console says its firing on an unidentified object.
Here's the real kicker, I know how to access that check box and render it as false, but it flips right back to what it was bound to! It's not holding. Unless I click into that cell and do a click on the check box, it doesn't hold...
...unless I can simulate a fake click event on the target, being the checkbox...
I looked at the example here, Disable/Enable the checkbox in kendo grid based on column Value, but it seems a bit different and not what I need.
Bottom line - if the checkbox is true/checked, and a user goes back into the email field and renders it invalid, I want to automatically uncheck that checkbox, as well as make that checkbox disabled, until the user makes the email valid again. This also implies that a null email, means the checkbox must be false and disabled.
Anyways, any help would be immensely appreciated. Thanks.
This can be done using the "change" event of the dataSource:
dataSource = new kendo.data.DataSource({
change: function(e) {
if (e.action == "itemchange" && e.field == "email") {
//you can check the email value as well:
//var model = e.items[0];
e.items[0].set("receivereport", false)
}
},
Here is the full example:
Grid: change field value depending on another field
Well, I'm really stuck here. This example by Telerik shows how to change a field when editing to whatever you need. Exactly,
columns: [
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
],
...where "categoryDropDownEditor" is a client side function that does the trick.
In MVC version there seems to be nothing of the kind. Is there? I keep believing that it should. I just do not need to traverse partial HTML from server each time I need to decorate an input field. And this is seemingly what "EditorTemplate", the only one available for MVC, does.
OK. In case anyone will bump into the same. I ended up with this "too elegant" a solution:
.Events(e => e.Edit("editing"))
this line in grid initialization routine (server side) calls the named dynamic method (client side):
function editing(e) {
var input = e.container.find("input[name=Regex]");
var textbox = $(document.createElement('textarea')).attr({
id: input.id,
}).width(input.width()).height(input.height()).val(input.val());
input.hide();
textbox.insertAfter(input);
textbox.focus(function () {
/*to make this flexible, I'm storing the current width & height in an attribute*/
$(this).attr('data-defaultwidth', $(this).width());
$(this).attr('data-defaultheight', $(this).height());
$(this).animate({
width: 400
}, 'slow');
$(this).animate({
height: 300
}, 'slow');
}).blur(function () {
/* lookup the original width */
var w = $(this).attr('data-defaultwidth');
var h = $(this).attr('data-defaultheight');
$(this).animate({
width: w
}, 'slow');
$(this).animate({
height: h
}, 'slow');
input.val(textbox.val());
input.trigger('change');
});
}
End tada, although it's a pure hack.
I am using the jqgrid pager to just display an add and a refresh link for one of my grids. I tend to use the default icons for add, edit, delete, and refresh on most of my grids, which in turn, by jqgrid default, puts a | (bar) between the Add/Edit/Delete buttons and the refresh button.
On my "Games" grid, I'm using a custom Add button (which is displaying before the refresh), but there is no bar displaying before the refresh button. I've tried rearranging the order, adding a position option to navSeparatorAdd, and doing a lot of googling. However, I can't find anything that has helped me in this situation.
I haven't tried turning off Refresh and making a custom button, but that seems like a hack. Any ideas on how to get that bar after add & before refresh?
So, what I have: + # |
What I want: + | #
(The # is supposed to be the refresh icon)
Thanks,
ember
jQuery("#Games").jqGrid('navGrid',
'#GamesPager',
{edit:false, add:false, del:false, search:false,
refreshtitle: "Refresh"},
{}, //settings for edit
{}, // settings for add
{}, // settings for delete
{} // advanced searching settings
);
jQuery("#Games").jqGrid('navButtonAdd',
"#GamesPager",
{ caption:"Add Game",
buttonicon:"ui-icon-plus",
onClickButton:function(){
loadAddColorBox();
},
position: "first",
title:"Add Game",
cursor: "pointer"
}
);
jQuery("#Games").jqGrid('navSeparatorAdd',
"#GamesPager",
{sepclass : 'ui-separator',sepcontent: ''}
);
Separator
It is possible to group some action adding separator. This can be done using the navSeparatorAdd method
Syntax:
<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
...
</script>
here's link of documentation
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons
$(table_selector).jqGrid('navGrid', pager_selector, {
cloneToTop: true,
edit: false,
add: false,
del: false,
search: false,
refresh: true,
view: false
});
$(table_selector).jqGrid('navSeparatorAdd', table_selector + '_toppager', {
sepclass: 'ui-separator',
sepcontent: '',
position: 'first'
});
$(table_selector).jqGrid('navButtonAdd', table_selector + '_toppager', {
caption: 'save',
buttonicon: 'ui-icon ace-icon fa fa-pencil blue',
onClickButton: function() {
alert("1");
},
position: 'first'
});