Binding Images in WPF Listbox from DB

WPF Listbox Binding Images from DB

WPF ListBox control is quite different from windows win forms and it has lots of abilities to extend and design. With just ListBox we can design most of the equivalent controls available in ASP.Net data controls section. However the implementation of WPF ListBox is also quite different from win forms and ASP.Net controls.  Due to increase in the sale of Cheap Netbooks Under 200, more and more people are going to use browser based light weight applications that are hosted using a silver light or WPF. So it is better to use WPF, if required it is much easier to convert it to silverlight.For e.g. binding an image is bit tricky than we do in ASP.Net and the linq and Ms SQL Sample DB northwind may demand additional knowledge on the respective technologies

Fetching Database values using Linq to SQL

As it has been already discussed in detail in the article WPF Datagrid and Linq to SQL, I am not going to detail again here. We can use the Linq to SQL to fetch the data and pass it to the WPF to bind the ListBox. The equivalent datatypes will be chose for the respective database fields. So the important mapping we need to note is the Image Datatype in SQL server. This will be mapped as System.Data.Linq.Binary. So when binding this to the Image we need to convert System.Data.Linq.Binary to the expected BitmapSource format.

Converter for Image Source

Since we need to convert the System.Data.Linq.Binary to BitmapSource, we need to specify the converter while assigning the source for the Image in the markup. This can be specified as a StaticResource. Without creating a static resource the markup does not know how to create an instance of the converter class.

Static Resources for the Converter Class

So we need to create a static resource and map the respective class file in the resources section. In the resources section under Window.Resources, we can create the static resource with a reference to the class object. This class object can be specified in the window tag as an attribute xmlns. We can specify our own namespace. In this case I named it as local and targeted to the class ImageConverter.

Image Converter class using the IValueConverter Interface

This converter has to be implementing the IValueConverter. This IValueConverter has the contract to define two methods Convert and ConvertBack.  There are some interesting facts to note here in this converter for images. I realized after few hours of struggling that I need to offset 78 bytes for images from Northwind because of the Ole Datatype. The convertback function can be returning null or can throw a not implemented exception

More information and source code an be found at

Wpf Listbox Image Databinding FromDatabase

Ajaxified Row Filter for ASP.Net Gridview

Filter rows in Asp.Net Ajax GridView

When working in a large amount of data, filtering to get a subset is always essential. So I have written this code. Here I refer filter as filtering records at the application level not at the database level. Usually I put the data in the Viewstate or in session if the data is not too huge. Then apply the filter to get the data based on the filter.

Note:
1) As it is already explained in earlier articles in section Asp .Net GridView , I am not going to explain again how to get the data and bind the data from database.

2) Since this article is based on Ajax, without Ajax control kit the sample can not be even compiled. So please get the Ajax tool kit from the ASP.Net website.

DataView and RowFilter
As we use DataView for various DataBinding, I have opted to use DataView‘s RowFilter property over the DataTable‘s Select method. I don’t like the select method, because it returns the collection and binding or reapply other tasks like sorting is a pain.  Once the RowFilter is applied the DataView has to be bound again. This renders the filtered data in the GridView.

Enable Ajax using AjaxControlKit
As I have explained in earlier articles under Ajax categories, AjaxControlKit has to be installed. AjaxControlKit is available for download in CodePlex. Once it is installed, the controls will be available in the toolbox. Drop the controls ScriptManager, and UpdatePanel from the toolbox. Only one ScriptManager is allowed per page. Declare it only once. UpdatePanel can be used to update the contents during the PostBack. Wrap the controls with UpdatePanel which should be ajaxified. Finally add the trigger for the control and its event. CheckBoxList is ajaxified now.

For Source Code and related information

Asp.Net Ajax GridView Filter

How to build a Horizontal List using an ASP.net Repeater

Have you ever tried generating a horizontal list in ASP.Net?  There is no control in ASP.Net which natively supports this (to my knowledge).  Radio button list supports the list’s orientation as horizontal. But you can not use radio button list for a menu. I am trying to use a repeater to fabricate the menu so that you can add the other onClick events later to bind to the respective actions.

Why ASP.Net over the other data controls.
ASP.net repeater is a very simple control which just repeats the items defined in the ItemTemplate. It does not add anything other than this. This gives us more possibilities in generating the code as we like. And for this menu we don’t need any paging or runtime sorting options. So with a little CSS and JavaScript we are ready to use the horizontal menu we created.

Bind the Data
Please refer to the data controls section for how to connect the data and bind the data controls. I am just skipping those areas, since I have explained in few articles in the earlier days in detail.

Constructing a menu
To get a menu we need two divs. One is the outer div(we call it as OuterPanel) and another one is the div used for each menu item. So we place the repeater inside the OuterPanel. Let the repeater handle the placing of inner divs(we call as ItemPanel). After assigning the proper class names, the application is ready to run.

If you run at this stage you will notice that the ItemPanels are placed vertically. That is the default behaviour of the divs. They don’t sit horizontally. To bring the menu items floating next to each other we need to use the property float:left for the menu items.

Fixing few for a decent looking menu
At this stage if you run, you can notice the ItemPanels are overlapping the OuterPanel. This is due to the float:left assigned to the ItemPanels. To fix this you can add float:left to the OuterPanel. Apply some padding, margin, background the menu will look decent.

For Screen capture and the source code visit Asp.Net Repeater Horizontal List Menu

Datagridview Printing in VB.Net

Printing Datagridview using VB.Net

There will be situations to just print a DataGridView in a application than designing again the columns and rows in a Crystal Report. But in .Net there is no straight forward way to do this or in other words this is not supported natively. To print the Datagridview we need to draw all the objects using Graphics Object given in the PrintDocument before calling print method in the respective PrintDocument. Printing the gridview using All In One Printers is not that much difficult task if following is done properly.

PrintDocument and the Graphics Object

So as I earlier said we need to actually draw all including text using the Graphics object.  The print document needs to be prepared before actual printing starts. So we can use the event PrintPage, in this event we can draw all the objects as we need.

Draw the DataGridView like a table using lines

To get a tabular data to represent the DataGridView, we need to do the following
• Draw an outer rectangle as the border to table
• Draw a line for every row
• Draw a line for every column while iterating the cell
• Draw the cell value as text
All the above said items can be drawn with the help of the DataGridView’s native properties, Left, Top, Height, Width, Row.Hieght, and Column. Width

Refer source code VB.Net Print Datagridview in WinForms

Asp.net Array List and databinding

DataBinding is an integral part in programming User Interfaces. It really reduces the work load of populating the data into the control from respective DataSource. The DataSource is usually impletemted an interface called IEnumerator. It implies that all the objects that implement an IEnumerator interface can be used to DataBind the controls.

Binding a GridView with ArrayList

Though Binding a GridView is very simple task in VB.Net, the following is essential.

• Understanding   how to use a DataSource 
• Once the DataSource is given how to bind the data.

ArrayList OR Array?
Since the ArrayList is easier to use I have chosen ArrayList over array. Array needs to be re dim every time when the collection is changed. If you want to add a new item then you have to re dim the array. But ArrayList are much easier to work with. The reason behind is, it is something like collection in Classic VB. You can add, remove the items easily. There is absolutely no need to worry about the count of items. As a new item will be added, removed and the count will be calculated automatically

GridView Row Sorting

Since the GridView natively supports the sorting, I tried to sort the ArrayList and rebind again. This is really much easier. Call the sort method of the ArrayList and assign the DataSource again and call the DataBind. That’s it the GridView will be sorted.

For source code and more information read more here Asp.Net Array List

LinkButton in a GridView to delete

We can delete a row in a GridView several ways. But I am here to explain how to use a LinkButton to delete a row. LinkButton is a fantastic control for raising a PostBack at the same time it is very flexible to style and format using style sheets and CSS.

I usually take the Northwind sample database for articles. So in this article I will be using the products table.

How Use LinkButton inside a GridView

You can use the LinkButton inside a GridView with the help of TemplateField. Use the ItemTemplate in the TemplateField for displaying the LinkButton. To get the clicked row information in the code behind, LinkButton has two properties mainly to interact. That is CommandName and CommandArgument.

CommandName

CommandName can be used to define what the action the LinkButton is going to be performed. In our case it is going to perform Delete but wait don’t use delete as a CommandName. The reason behind is, the button field in the GridView is already using the delete name. So you will not be getting the RowCommand event. So always be specific on actions and try to avoid the inbuilt action commands. Unless you are purposely raising the delete command please stay away from using the built-in action commands.

CommandArgument

Now it is time to pass the active data (in our case it is a primary key which is product id). The easiest way to pass the product id from markup to code behind on PostBack is using the command argument.

 To bind the product id to the LinkButton using command argument,

‘<%# DataBinder.Eval(Container.DataItem, “ProductID”)%>’>

read more with source code here LinkButton GridView

VB.Net DataGridView Databinding

DataGridView is very simple in .Net. Provided the knowledge of connecting to database, executing the SQL Select Queries and filling the dataset with the data fetched is necessary. While data reader also can be used for light weight read only purposes, I am explaining here with dataset. Since the coming articles in this website will refer back this article for DataBinding samples

Connect To DataBase

We are going to use the following namespaces for using the database related objects in ADO.Net,

Import System.Data
Import System.Data.SqlClient

Next step is to get the connection to the database. Since we have already decided to use the SqlClient, we have to use SqlConnection to open a connection as follows.

1. Initialize the connection object

Dim ConnectionToFetch As New SqlConnection

2. Specify the connection string

ConnectionToFetch.ConnectionString = “Server= localhost\SQLEXPRESS;Database=Northwind;Trusted_Connection=true”

3. Open the connection

ConnectionToFetch.Open()

Note: Northwind database can be obtained from MSDN

http://blogs.msdn.com/smartclientdata/archive/2005/11/02/488258.aspx

Next step is to use the opened connection to fetch data. We have several options to fetch the data. But in this example I am going to use SqlDataAdapter and DataSet.

Read the Data

1. Initialize the SqlDataAdapter and DataSet

Dim SampleDataAdapter As New SqlDataAdapter
Dim SampleSource As New DataSet

2. Create a command object

3. Connect the command object with the opened active connection

4. Assign the command object to the SqlDataAdapter

Dim SelectQry = “SELECT * FROM Products ”

Dim SampleCommand As New SqlCommand()
Dim SampleDataAdapter = New SqlDataAdapter()
SampleCommand.CommandText = SelectQry
SampleCommand.Connection = Connection
SampleDataAdapter.SelectCommand = SampleCommand

5. Use SqlDataAdapter’s fill method to fill the dataset

ConnectionToFetch.Fill(SampleSource)

6. Close the connection

ConnectionToFetch.Close()

7. Assign the dataset to the GridView’s Datasource

GridView1.DataSource = dsGrid.Tables(0)

8. Bind the GridView with Dataset

GridView1.DataBind()

Please find the source code here (VB.Net DataGridView)

Article written by Pon Saravanan

GridView Alphabetical Paging in BottomPagerRow

Sometimes the data will be more helpful if presented in a nice and user friendly manner. I have noticed this in the hierarchical GridView which I had explained earlier in previous articles. Like that, this paging also gives an excellent way to group and present the data on the screen. Whenever there is a need of alphabetical lists such as names, products, cities, you may try the Alphabetical Paging.

Wait! There is no built in support for Alphabetical Paging. So there is a need of this article with complete working source code. I have coded this as far as I can explain easily.Look at the screen shots to have a fair idea about how this suppose to work.

Construct the Pager Row

For this example, the buttons for all the alphabets will be placed in the bottom pager. Since totally 26 buttons to be created, to make it simple I created a function to create all the buttons. Just after DataBinding the controls have to be created i.e. the function has to be called. When creating buttons, using the command argument the alphabets are passed and command name is given as PAGINATE for differentiate the command from other commands.

Constraints in Pager Row control creation

1) To wire up the events in asp.net, the controls which are fired the PostBack should be available during the PostBack. Otherwise the event will not be mapped to the respective control. As a result just a PostBack only will happen. Since we are creating the controls at the code behind, the above rule applies.

2) Due to the nature for alphabetical paging, we will display/enable the alphabetical buttons even though there is no data for that particular alphabet. That means when you click on that letter, you will be served with the no records found (technically, the EmptyDataTemplate will be displayed). If the EmptyDataTemplate is displayed, you will no longer see the pager row. As a result you will be in dead end and you can not proceed to click on further letters. To workaround this I have recreated once again the pager row at the EmptyDataTemplate.  Finally a reusable function is written for catering both the cases EmptyDataTemplate and pager template at footer.

Paging with the support of RowCommand

The pagination is provided to the GridView with the help of RowCommand. As we have already seen the link buttons with alphabets are assigned with command name, command argument appropriately. So in the row command event the respective alphabet can be fetched. Based on that letter, the data can be fetched from the database. After binding the data the page row has to be recreated.

As I have already mentioned, while creating the pager row, the current DataSource has to be verified for creating pager row for footer or EmptyDataTemplate.

For complete source code please refer here(GridView Alphabetical Paging)

Hierarchical GridView

Hierarchical GridView Using TemplateField

I usually choose a TreeView for this kind of hierarchical data or I choose ASP.Net menu. But there are some situations you may need to have various controls on each node. If this is your case then the Asp.Net Hierarchical GridView is right choice. But wait one moment, there is no   Hierarchical Grid  as we have in Classic VB.

However we can still get a Asp.Net Hierarchical GridView, by using a GridView inside another GridView’s TemplateField. This example I am using a label with ‘+’ (Plus) sign for expanding and a ‘-‘(Minus) sign for collapsing. This is handled by JavaScript. I have used CSS to style the label so the user will click on the (+) and (-) without further instructions.

RowDataBound to access the inner GridView

The inner GridView is named as GridView2 and it is placed inside the ItemTemplate in the TemplateField of the GridView1. So to access each row the RowDataBound is the right event. Further all the controls can be accessed in a row using the rows FindControl Method.

Hierarchical Data

For simpler explanation I always use the Northwind Database. So for this example also I have chosen the Categories and products. Category is used in the outer GridView. And the Product is used in the inner GridView. In the RowDataBound event using the DataItem property we can access the Category ID of the respective row. Then the Category ID is used to fetch the respective Product rows from the Database.

Read More with full source code here (Hierarchical Asp.Net GridView)

Calendar inside a ASP.Net GridView

Calendar in a GridView template

Unlike other controls, calendar is taking too much of space for its usage. In most of the applications calendar will be hidden just after selecting the date. Earlier days in classic asp, we used a popup to load it on demand (sometimes used inline as well).  Here in this sample we are going to use a calendar control inside a GridView’s TemplateField. To make it close to real time, I have added a Textbox and a button to pop the calendar.

Show Hide calendar

As already explained to reduce the space used by calendar, it is easier to toggle visibility using a JavaScript. Since the calendar control is going to be at each row, the respective control’s client ids have to be passed. Otherwise we can not access those controls from JavaScript.

Attach Client Events at RowDataBound

To pass the Client ID’s of all the required controls to JavaScript, the right place is the RowDataBound event. This event will be fired for every rows while binding data. So the client script can be prepared added to attributes of the control. Remember to return false at the end, otherwise there will be an unnecessary PostBack to server.

Handling Calendar OnSelectionChanged

Remember the calendar control is not available directly.  It is contained in the GridView control’s ItemTemplate. In order to handle this event, we can either use a RowCommand, or a specific event to handle this.

I have chosen the second model for this sample. In this specific event, the control which has raised the event can be fetched using the first parameter named as sender.
Using this we can traverse back to fetch the row and the calendar’s siblings. We have fetched the textbox control same way, assigned the selected date to it.

For source code please refer (GridView Calendar)