Comments (0)

By yomgal, 02/15/2012 6:05 PM

Internet Explorer offer CSS elements to style scrollbars, for example class

.FlatScrollbars
{
   scrollbar-face-color: #f0f0f0;
   scrollbar-shadow-color: silver;
   scrollbar-highlight-color: silver;
   scrollbar-3dlight-color: #f0f0f0;
   scrollbar-darkshadow-color: #f0f0f0;
   scrollbar-track-color: #f0f0f0;
   scrollbar-arrow-color: #000000;
}

applied to a DOM element will render nice flat scrollbars:

Yes, it’s not standard CSS, but other browsers offer similar extensions (WebKit, I am looking at you). So, it works nice and well, but what if you want to style scrollbars of an IFRAME? Continue reading 'Style IFRAME scrollbars in IE'»

Comments (0)

By yomgal, 02/09/2012 5:44 PM

Classic Infragistics UltraWebGrid allows you to programmaticaly specify CSS styles for its various elements. For example code like this:

xmyGrid.DisplayLayout.HeaderStyleDefault.CssClass = "HeaderStyle"
xmyGrid.DisplayLayout.RowStyleDefault.CssClass = "RowStyle"

Would set style of grid header and rows via external CSS class. You would expect that simple defining classes like this:

.HeaderStyle {  /* style definition goes here */ }
.RowStyle {  /* style definition goes here */ }

should do the trick, but you may experience some unwanted, erratic behavior: styles getting lost, styles getting mixed up (row would get a header style and vise versa).

To fix this we should let grid know that header style should apply only to header row (THEAD/TH HTML elements) and row style applies only to rows with data (TBODY/TD elements). This is done via slight adjustments of the above CSS to point it to specific elements:

THEAD.HeaderStyle TR TH{  /* style definition goes here */ }
TBODY.RowStyle TR TD {  /* style definition goes here */ }

This way there’s no confusion, styles apply exactly were they belong. Also you may need to set grids MergeStyles property to False and make each class fully define it’s element (including fonts, colors, backgrounds etc.)

Comments (0)

By Yuriy, 01/12/2012 4:46 PM

If you’re still using classic Infragistics Controls and want to make them work in modern browsers, sometimes a little additional work is required. Hopefully this little trick will save you some time.

UltraWebGrid has a neat property TopItemSpacing, when set to Auto it automatically spreads top level menu items across the menu control, giving them nice spacing in between. Unfortunately this property seems to work in Internet Explorer only, in Firefox (and Chrome and etc.) it is ignored, rendering menu in Compact mode giving top level items crowded “too-close-for-comfort” look.

The solution is to take spacing in our own hands. Set TopItemSpacing to Compact and instead add right padding to TopLevelParentItemStyle and TopLevelLeafItemStyle elements of the menu. For example (from the markup point of view):

<TopLevelLeafItemStyle Cursor="Hand" Height="18px" BorderWidth="1px" Font-Size="8pt">
   <Padding Right="6px" />
</TopLevelLeafItemStyle>

Actual pixel value of the padding is up to your particular scenario, but the final result is top level menu items will be nicely spaced both in IE and in Firefox.

Comments (0)

By Yuriy, 05/19/2011 4:08 PM

When Infragistics UltraWebGrid is not in LoadOnDemand mode, you need to rebind the grid to the data source in PageIndexChanged event for paging to work. What’s neat – before the rebind, grid is still on the old page, effectively giving you “BeforePageIndexChanged” or “PageIndexChanging” event in server-side code:

Protected Sub xuwgGrid_PageIndexChanged(sender As Object, e As UltraWebGrid.PageEventArgs) Handles xuwgGrid.PageIndexChanged

   'Page hasn't changed yet, collect data from the old page
   'Or cancel the rebind and remain on the old page

   'rebinding the grid to the datasource
    BindGrid()

   'New page is in effect

End Sub

Comments (0)

By Yuriy, 03/02/2011 2:39 PM

If you’re using Infragistics UltraWebGrid and manually handling grid’s RowFilterApplying event by doing your own filtering/querying and then canceling the event by setting parameter e.Cancel = True, one of the side-effects is that column filter icon never changes to “applied” image.

To work around this limitation you need to change the image yourself. This involves 2 steps:

1st step – In the server side, code in RowFilterApplying event handler loops thru filtered columns, getting column index, filtered state and calling a JavaScript function that would actually set the image:

Protected Sub xmyGrid_RowFilterApplying(ByVal sender As Object, ByVal e As UltraWebGrid.FilterEventArgs) Handles xmyGrid.RowFilterApplying

    ' ... Your own filtering/querying code

    Dim xGrid As UltraWebGrid = sender

    For Each oFilter As ColumnFilter In xGrid.Rows.ColumnFilters
         If oFilter.FilterConditions.Count = 0 OrElse oFilter.FilterConditions(0).ComparisonOperator = FilterComparisionOperator.All Then
            RunJavascript(Me, "setFilterIcon(" & oFilter.Column.Index & ", 'MyImages/ig_tblFilter.gif');")
         Else
            RunJavascript(Me, "setFilterIcon(" & oFilter.Column.Index & ", 'MyImages/ig_tblFilterApplied.gif');")
         End If
    Next

    e.Cancel = True

End Sub

During the loop code double checks if filter is applied to current column and if so passes URL of “applied” filter image to the JavaScript function – in this case “MyImages/ig_tblFilterApplied.gif”. Otherwise URL of “empty” filter is passed – in this case “MyImages/ig_tblFilter.gif”. To generate JavaScript call from ASP.NET code I am using RunJavascript function which works correctly both on normal postback and Infragistics partial postback (read WARP panel).

2nd step – And here’s JavaScript function that sets the image:

// Set's filter icon of the specifiec column
function setFilterIcon(i_iColumnIndex, i_sFilterImageURL) {
    var sThId = igtbl_getGridById('xmyGrid').Bands[0].Columns[i_iColumnIndex].Element.id;
    document.getElementById(sThId).firstChild.lastChild.src = i_sFilterImageURL
}

Using passed in column index, code locates column object and its DOM “TH” element (note: You have to get an ID of the element first, and then locate element by calling document.getElementById, using Column.Element for some reason returns an empty TH tag). Once element is located, code locates filter image inside and sets its source to passed image URL

Comments (0)

By Yuriy, 10/30/2010 9:16 AM

Infragistics Aikido WebDataGrid offers a nice built-in ColumnMoving behavior. When enabled – it allows user to drag columns to change their order:

But what if you want to keep this behavior and add your own custom column drag-and-drop? For example to create your own column grouping, since WebHierarchicalDataGrid doesn’t handle grouping well.

In this post I will describe a simple technique how to both keep behavior shown above and implement custom column drag-and-drop:

Continue reading 'WebDataGrid: Custom drag and drop columns when Colum Moving behavior is enabled'»

Comments (0)

By Yuriy, 10/07/2010 4:18 PM

Infragistics UltraWebGrid offers extensive client-side Object model and objects at several level of hierarchy offer “.find” method to locate cell with specific data. For example to locate a cell with specific text in a specific column – following code can be used:

//Find cell in first grid column with text "67"
var oGrid = igtbl_getGridById('xmyGrid')
var iLookUpValue = '67'
var oFoundCell =  oGrid.Bands[0].Columns[0].find(iLookUpValue, false)

This works, but unfortunately the “.find” method searches for cell’s text instead of value, thus finding any partial match. In the example above cells with values 567, 671 etc. will be found which is no good in many cases, for example when you’re looking for a numeric ID.

Fortunately the “.find” method accepts regular expression as a search parameter. The solution is to apply “^…$” RegEx expression to perform exact match. So if we change the last line in the code above to:

var oFoundCell =  oGrid.Bands[0].Columns[0].find('^' + iLookUpValue + '$', false)

only exact match will be searched for.

Comments (2)

By Yuriy, 08/09/2010 12:38 PM

A while back I posted a method to highlight rows on mouse over in Infragistics UltraWebGrid. Over the time turned out that it had several limitations the main being: if you enable additional styling for some elements of the grid, they’re not preserved after mouse-over/mouse-out events. For example if you set a SelectedRowStyleDefault property with a different background and then move mouse over a selected row – that style will be removed.

So, here’s a complete solution to work around that limitation: Continue reading 'Ultrawebgrid: Highlight row on MouseOver with Selection enabled'»

Comments (0)

By Yuriy, 08/03/2010 11:25 AM

IE6 just won’t die. I know, continue to support it is a bad idea, but unfortunately many developers have no choice, some environments, especially corporate intranet will continue to use it until second coming (and then Safari will rule the world).

So, here is a small tip: If you need to use a named color from CSS3+ specification that old tired browser doesn’t understand – just use color’s hex equivalent instead. For example instead of

style="border: solid 1px LightGray;"

which will do nothing in IE6 use

style="border: solid 1px #d3d3d3;"

which will render nice light-gray border.

Comments (2)

By Yuriy, 07/08/2010 12:38 PM

Hyperlinks are designed for clicking, to lead you somewhere else, but sometimes this  behavior is undesired. In my case a grid control displayed some HTML data in its cells (including hyperlinks) and clicking on those links caused some undesired effects. I still wanted to display HTML and allow clicking on other grid elements (e.g. checkboxes) just needed a way to prevent hyperlinks clicks.

Remember that events bubble? That gave me an idea to wrap the grid control in a DIV to catch click events. This way I can check event source and if it’s a hyperlink – cancel the event, otherwise allow it. Well that’s pretty much it. Here’s a stump for the DIV wrapper:

<div onclick="return checkClickSrc()">
    <!-- Controls to check go here-->
</div>

and here’s the JavaScript code that does the check:

function checkClickSrc() {
    return event.srcElement.tagName != 'A'
    //for firefox: return event.target.tagName != 'A'
}