This appears on all of the columns in my grid:
Chrome 28.0.1500.72 m:
Firefox 21.0:
All of the columns in my table look something like this:
{
text: 'Audit Type',
width: 100,
sortable: true,
dataIndex: 'requestType'
},
I have no idea what's causing this. The javascript console shows no errors about missing images either.
Any help that could point me in the right direction would be greatly appreciated
More info
I'm using Chrome Version 28.0.1500.72 m and Extjs 4.2.1.883
My app is run on my own computer... so a local server. I'm using Play Framework with Scala on my backend.
Oh what silliness.
I did this earlier:
.x-panel {margin: 8em;}
This ended up moving the entire grid except for the menu shadows.
Giving the grid an id property in its definition and having this instead in my stylesheet solves the problem:
#grid {margin: 8em;}
Related
Is it possible to disable the mobile UI feature in tinyMCE, and just show the regular editor?
I'm asking because it only shows a blank screen for me, in mobile (when I click on the "book" icon in the editor box.
I've searched for solutions to the blank page and I only found vague references to "a parent element having overflow set to anything but visible" which didn't help me much.
EDIT November 2019: TinyMCE 5.1 switches to the Silver theme by default on mobile devices. This workaround is no longer necessary.
Our documentation doesn't explicitly explain how to do this, and it isn't something we test so you may run into unexpected issues, but it is certainly possible.
Our mobile UI is implemented as a theme, even in TinyMCE 5, similar to how modern was our desktop theme for version 4 and silver is for version 5. By default when the editor detects it is on a mobile device the theme is set to mobile - we removed this from the v5 docs, but our v4 docs describe the defaults:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'mobile'
}
});
By extension of this concept, where the mobile block overrides the config, you can specify the mobile theme to be modern in TinyMCE 4, silver in TinyMCE 5 and the desktop interface will show:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'silver'
}
});
I have created a fiddle to demonstrate this which loads the desktop theme on my phone.
http://fiddle.tinymce.com/C9gaab/1
if you want to enable plugins (image, media, fullscreen etc.):
in config:
...
mobile: {
theme: 'silver'
},
...
in tinymce.min.js:
find
"lists","autolink","autosave"
replace to
"advlist", "autolink", "lists", "link", "image", "anchor", "searchreplace", "code", "fullscreen", "media", "table", "paste", "codesample"
or any plugins you need
I know, that source files should not be edited, but only this method helped me.
config the mobile like this:
mobile: {
theme: "silver",
menubar: false,
height: 300,
max_height: 500,
max_width: 500,
min_height: 400,
statusbar: false,
toolbar: false,
plugins: ["autosave", "lists", "autolink"]
}
Well, I just lost a night of sleep over this, so here's the dirty fix while #spyder can figure it out:
First, download the dev (unminified) version of tinyMCE here
Then, edit the file tinymce.js - Modify the function isOnMobile (should be around line 11930) to always return false, like this:
var isOnMobile = function (isTouchDevice, sectionResult) {
var isInline = sectionResult.settings().inline;
return false; //isTouchDevice && !isInline;
};
Finally, Save your changes and minify again (the unminified file is 1mb!). There are several online tools that can do this for you in case you don't these tools in place already.
Note that this only works if you are self-hosting. It ain't pretty, but until there is an official fix, it WORKS.
I'm answering this from the viewpoint of TinyMCE 6 but I think the same logic would work with TinyMCE 5 if you still want to use it for some reason.
The automatic switch to mobile features is poorly documented, but the logic seems to be that TinyMCE init object can include the property mobile to set defaults for the mobile clients. However, if you don't define this property, the TinyMCE internal default will be used instead of your generic config in the init object! This obviously results mobile clients getting totally different UI from the other clients.
As a result, you should always define the mobile property of your TinyMCE init object and use settings you've tested to work with the tools you use. For example, you could use configuration like
mobile: { // undo default mobile settings applied by TinyMCE core – many of these are not officially supported but seem to work pretty well with modern Android and iOS
resize: true,
object_resizing: "img",
menubar: true,
toolbar_mode: "floating",
toolbar_sticky: true,
table_grid: true,
}
or something similar to that. To see the currently available documentation, see https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/#configuring-mobile
I want to make a grid data according to JSON response of a method means if i send JSON Array with 3 element its create column name three different name as well as 10 ,20 or more dynamically according to Array size.
Please help me or suggest me some example code.If its not feasible in extjs please suggest me to another
frame work .
Sorry for my poor english.
Thanks
Naresh
Extjs 3 solution
You can add metaData to the JSON response. Inside the metaData you can send a field-config. Listen to the metachange event and update you grid accordingly.
You can find an example here: Dynamic Grid (ExtJs 3)
Extjs 4+ solution
There is a user component Dynamic Grid Link
Ext.create('Ext.window.Window', {
width: 400,
height: 400,
title: 'Example of Dynamic Grid'
layout: 'fit',
items: [
{
// All what you have to set! :)
xtype: 'dynamicGrid',
url: '/some/url'
}
]
});
This should do exactly what you are looking for!
I am newbie to Angular and Kendo,My case is like buttons other than edit must disappear for other users in the query screen and it should appear for the owner of the query alone.
Now it disappears after some time lag say one minute,why this lag occur?
Any help on this is greatly helpful for me....
On analysis,identified the below points:
-the function called in ng-show is not triggered immediately where ng-show is wrapped inside a template,then checked by assigning a constant value for ng-show still there is a delay in triggering the ng-show.But fixed style worked correctly example style=display:none..
-then i identified that angularjs directives are not invoked immediately after rendering kendoui grid row template, there is some delay to invoke the angularjs directives
Code:
$scope.showButton = function(userId){
if($scope.loggedInUserId == userId)
{
return true;
}
else
{
return false;
}
};
$scope.model.columns = [
{ field: "name",title:"Name", width: 300},
{ field: "userId",title:"User Id", width: 100},
{ field: "lastModified",title:"Last Modified Date", width: 200},
{ field: "visibility",title:"Visibility", width: 100},
{ template: "<img title='Edit' src='content/images/glacier/2.0.1/generic/normal/png21/d_040_edit_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_040_edit_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_040_edit_normal.png'\" ng-click='viewQuery(#=id#);disableSave(\"#=userId#\")' alt='Edit'><img title='Make Public' src='content/images/glacier/2.0.1/generic/normal/png21/d_150_team_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_150_team_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_150_team_normal.png'\" ng-click='makePublic(#=id#)' ng-show='showButton(\"#=userId#\")' alt='Public'><img title='Make Private' src='content/images/glacier/2.0.1/generic/normal/png21/d_118_user_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_118_user_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_118_user_normal.png'\" ng-click='makePrivate(#=id#)' ng-show='showButton(\"#=userId#\")' alt='Private'><img title='Delete' src='content/images/glacier/2.0.1/generic/normal/png21/d_030_delete_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_030_delete_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_030_delete_normal.png'\" ng-click='deleteQuery(#=id#)\' ng-show='showButton(\"#=userId#\")' alt='Delete'>", title: "Operations" },
];
$scope.model.gridOpts = {
columns: $scope.model.columns,
filterable: { extra: false },
scrollable: true,
height: "230%",
pageable: true,
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
};
Without having a JSFiddle to analyze, it will be hard to pin down the problem. But I'll provide a possible solution that you can at least investigate.
Angular is only able to hide those buttons after it, and everything it depends on, has started up. Which means downloading the angular code, waiting for everything else to load, parsing the HTML, resolving any data dependencies, etc. At that point it will make modifications to the DOM (which is when your buttons hide).
There are several ways to handle this, from using ng-cloak, not showing anything on the screen until it's been modified appropriately, or hiding all the optional controls and just showing what the user does have access to after Angular loads.
Here is one option which I just used in a project. Add this code at the TOP of your entry file (like index.html, default.html, whatever):
.ng-hide {
display: none !important;
}
Now apply the ng-hide class to any of those buttons you don't want to show until you know what they have access to.
By placing this at the top of the default file, it won't show at all until it's told to. If you place it in a .css file, then it will sometimes appear briefly until the .css file it loaded, parsed and applied.
Another option is to look at ng-cloak. You can try out it out here: http://plnkr.co/edit/?p=preview
The fact that it's taking upwards of 60 seconds I believe you said, leads me to believe that maybe it is waiting for required data to get resolved before it can analyze permissions.
If you don't understand how the resolve statement works in routes, you can read about here:
http://www.undefinednull.com/2014/02/17/resolve-in-angularjs-routes-explained-as-story/
I'm not sure if that will fix your problem, but once you can create a jsfiddle then you'll have many more people jumping in to answer this question.
I am trying to display sample data in a ng-grid via AngularJS. Everything looks correct to me. If I pass 'ngGrid' in the module definition within my local project the columns are getting stacked one below the other. I tried doing this in plunker , but it's not rendering properly.
Here is the sample code.
http://plnkr.co/edit/AHQUjbus908HBLxUaIWr
The issue is with the references to the external nggrid files. A lot of times referencing github files doesn't work very well. I've moved the nggrid js and css into local plunkr files and forked your plunkr. It now works.
http://plnkr.co/edit/N5T0Ys3Fc58NymAvzMFj?p=preview
Try adding
minWidth: 50,
width: '*'
in you columnDefs like,
{
field: 'severity',
displayName: 'Severity',
resizable: true,
minWidth: 50,
width: '*'
}
It worked for me.
I won't show treegrid icon each node.
I tried using:
1. "iconCls" config, with 'void' value.
2. Using a 'wrong' value.
Finally, I have the same that I expected, 'defaults icons' for all rows.
Someone know any form to delete these icons ?
thanks for all.
Just make sure you give an iconCls of, say treenode-no-icon. I do so in my model:
{name: 'iconCls', type: 'string', defaultValue: 'treenode-no-icon'},
Then in your css include:
.treenode-no-icon
{
display : none !important;
}
This was a few years ago, but here is a solution using ExtJS 6 that I discovered.
Using a custom theme, in the theme file associated with Ext.tree.View, I added the line:
$tree-icon-width : 0px;
My treepanel data now displays without any visible icons.