I am using jQgrid version 4.6.0 (Free version) and trying to edit the height of textbox which gets rendered when we set editable: true in Column model. I want the textbox height to fit into complete grid cell.
Here the width of rendered textbox is fine and fits in the cell but how can I increase the height of textbox?
Trying to achieve:-
There are some trick which you can use. You can editoptions in the column defined something like
editoptions: { style: "height:40px;" }
It will set style attribute on the textbox creating during editing. I think that the trick will work for any editing mode which you will use.
UPDATED: One can do the following in case of usage cell editing:
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
var tr = this.rows[iRow], h = $(tr).height(),
$input = $(tr.cells[iCol]).find("input"),
delta = $input.outerHeight() - $input.height();
$input.height(h - delta);
}
Inside of the most callbacks this will be initialized to the DOM of the <table> element (see here), which supports rows property to quick access to the row by rowIndex and the row (<tr>) supports cells array which can be used to get the cell by cell index. The rest of the code should be clear I hope.
Related
I have a .net, C# Windows Form project. I'm using DevExpress 19.1. On my GridControl, I have conditional formatting for when a column is less than 0. I want the cell to be highlighted red when the value is less than 0, but it's not working. I've tried using an expression, a condition and value, applying to just a column, applying to the whole role, but I never get the highlighting to work. Can someone tell me what I'm doing wrong?
Here is how the rule looks liked in code:
gridFormatRule3.ApplyToRow = true;
gridFormatRule3.Column = this.colQuantityLeft;
gridFormatRule3.ColumnApplyTo = this.colQuantityLeft;
gridFormatRule3.Name = "Format0";
formatConditionRuleValue3.Appearance.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(255)))), ((int)(((byte)(128)))), ((int)(((byte)(128)))));
formatConditionRuleValue3.Appearance.Options.UseBackColor = true;
formatConditionRuleValue3.Condition = DevExpress.XtraEditors.FormatCondition.Less;
formatConditionRuleValue3.Expression = "[QuantityLeft] < 0";
formatConditionRuleValue3.Value1 = 0;
gridFormatRule3.Rule = formatConditionRuleValue3;
this.gvProducts.FormatRules.Add(gridFormatRule3);
Here's how I set the rules in the Designer:
Here's the output where you can see the value is less than 0 and the background color is not changed:
I see that you have only one row in the grid. The grid always has a focused row. The focused row appearance has a higher priority than conditional appearance. Disable the GridView.OptionsSelection.EnableAppearanceFocusedCell and GridView.OptionsSelection.EnableAppearanceFocusedRow properties to remove the focused row appearance.
this.gvProducts.OptionsSelection.EnableAppearanceFocusedCell = false;
this.gvProducts.OptionsSelection.EnableAppearanceFocusedRow = false;
Alternatively, set the FormatConditionRuleValue.Appearance.Options.HighPriority property to true.
formatConditionRuleValue3.Appearance.Options.HighPriority = true;
Set the AppearanceOptionsEx.HighPriority Property to True.
I am new to .NET. I am converting an existing HTML and asp.net website into responsive. I converted an ASP DataGrid into responsive using the no more tables approach and it is working perfectly except that column headers are overlapped. The DataGrid columns are elements like:
<asp:BoundColumn DataField="M_DATENAME" HeaderText="Day"></asp:BoundColumn>
and some of these columns contain <span> elements, therefore in the small screen sizes when the headers are added before td(s), these columns get overlapped.
So I tried two ways:
As per the Udemy course using data-title or data-th attribute:
no-more-tables td:before { content: attr(data-title); }
However, the problem is that asp BoundColumn has no attribute called data-title or data-th
Second way is adding headers manually based on the example -> problem with it: Some of the columns are set to be Invisible and visible in certain conditions only. So at some point these headers text get overlapped.
So what could be the solution to my problem?
Or how can I add the BoundColumn HeaderText as a value of the content css property instead of the data-title or data-th.
I found a solution for the problem. Actually the problem was caused from the DataGrid columns that have null values (empty), therefore these cells were not displaying while the headers were displaying and thus overlapping with next cells. I did the following to achieve that:
1) I added <ItemStyle CssClass="headerStyle5"/> for each BoundColumn and TemplateColumn
2) Then in the CSS, instead of adding titles with absolute column position, I referenced columns using the headerStyle name I added in step 1 as the following:
#no-more-tables td[class="headerStyle1"]:before { content: "Date"; }
#no-more-tables td[class="headerStyle2"]:before { content: "Day"; }
#no-more-tables td[class="headerStyle10"]:before { content: "Remarks"; }
3) in the VB.NET, I wrote below code to loop through all empty cells and add a label with just space which will case the cell to show
Dim i As Integer
For i = 0 To DataGrid1.Columns.Count - 1
If e.Item.Cells(i).Text.Trim Is Nothing Or e.Item.Cells(i).Text.Trim = "" Then
Dim sosoLabel As New Label
sosoLabel.Text = "<label> </label>"
e.Item.Cells(i).Controls.Add(sosoLabel)
End If
Next
and now it is working perfectly :)
I have a couple of OptionGroups with very long captions that run across the width of the page, which looks very bad. I tried restricting the width of the OptionGroup using setWidth and via CSS, and also tried restricting the width of the parent container; all without effect.
So I made a grid layout with an option group in the first column (spanning all rows), and individual labels for the captions in the second column (one per row). However, in case the captions span multiple lines (which they do in my case), this leads to the radio buttons / checkboxes no longer being aligned to the captions. (Regrettably, I'm not allowed to post images.) For instance,
(o) This is a multiline
(o) caption
This is another multiline
caption
I resolved this by creating one OptionGroup per label, and adding each option group in the first column:
(o) This is a multiline
caption
(o) This is another multiline
caption
Clearly, in case of radio buttons, this means multiple buttons can be selected at the same time, since they are no longer linked via a single OptionGroup. Therefore, I registered listeners which, each time a button is selected, de-select all other buttons. And this brings me to my problem; since this "unchecking" is done at the server side, there will unavoidably be some lag, meaning that for some time, multiple radio buttons will appear selected at the client side.
Any ideas on how to resolve this? I only started working with Vaadin recently, so I'm far from an expert. Is there some simple way of restricting the caption width (some magical undocumented CSS class), or do I need to extend / adapt the client-side widget implementation?
Thanks,
William
What you need is FlexibleOptionGroup add-on.
Here is an example implementation:
#Override
protected void init(VaadinRequest request) {
Container cont = new IndexedContainer();
cont.addContainerProperty("caption", String.class, "");
// very long strings in the following setValue() methods
cont.getContainerProperty(cont.addItem(), "caption").setValue("I have...");
cont.getContainerProperty(cont.addItem(), "caption").setValue("So I ma...");
FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
fog.setCaption("FlexibleOptionGroup:");
fog.setItemCaptionPropertyId("caption");
fog.setMultiSelect(true); // force using CheckBoxes
VerticalLayout fogLayout = new VerticalLayout();
Iterator<FlexibleOptionGroupItemComponent> iter;
iter = fog.getItemComponentIterator();
while(iter.hasNext()) {
// OptionGroupItem part (CheckBox or RadioButton)
FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
// CustomComponent part
Label caption = new Label(fogItemComponent.getCaption());
caption.setWidth(400, Unit.PIXELS);
fogLayout.addComponent(new HorizontalLayout(fogItemComponent, caption));
}
setContent(fogLayout);
}
The above code produces:
When showing the html I would need to know the height of the text box in order to align things below it properly.
In order to pass it html and have it rendered as such you would set the htmlText property instead of the text property. Once the text box has been added to the display list you can get it's height just like normal.
If you are trying to get the value of the height and width immediately after setting insance.htmlText, you are not going to get the calculated size of the container. You can add an event listener for FlexEvent.UPDATE_COMPLETE or force validation to do it synchronously and use getExplicitOrMeasuredHeight(). Be careful when forcing validation, it is expensive and does not necessarily need to be done in most cases. I've included a right and wrong way of making it synchronous that was not entirely obvious to me at first.
Wrong:
var container : Box = new Box;
var text : Text = new Text;
container.addChild(text);
text.htmlText = "<b>THIS IS A TEST</b>";
trace( text.getExplicitOrMeasuredHeight() > 0 ) // False
Right:
var container : Box = new Box;
var text : Text = new Text;
container.addChild(text);
text.htmlText = "<b>THIS IS A TEST</b>";
text.validateNow(); // Forces the validation methods to run and update the component
trace( text.getExplicitOrMeasuredHeight() > 0 ) // True
In my flex app I store the widths and visiblility of columns in an xml file. When the app loads it reads from the xml file and sets he columns values as applicable:
for(i = 0; i < columnsOrder.length; i++){
newOrder[i] = myDG.columns[Number(columnsOrder[i]) - 1];
newOrder[i].visible = (Number(columnsVisiblity[i]) == 1);
newOrder[i].width = Number(columnsWidth[i]);
}
myDG.columns = newOrder;
myDG.invalidateList();
The problem appears to be setting the visibility (it sets the visible field correctly but messes up the width)... I've tried setting it after setting the width (outside of the loop) and before the loop as well. It resizes the columns properly if I don't do anything with the visibility.
Any ideas?
Add an import statement at the top of your class file:
import mx.core.mx_internal;
Then remove using the mx_internal namespace, remove the owner of the column, change the width and then reasign the parent:
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
This ought to do the trick (well, it did for us after a couple of days of swearing)
Is you horizontalScrollPolicy set to false on the datagrid?
"If the DataGrid's horizontalScrollPolicy property is false, all visible columns must fit in the displayable area, and the DataGrid will not always honor the width of the columns if the total width of the columns is too small or too large for the displayable area."
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#width
I was able to get it to work by calling the above loop in a function twice... the first time it add the visible columns, the second time it sets the correct width. Not the best solution but I cannot spend any more time on it.