Sonu on .NET

I think it is time to let you guys try out or pre-beta release of the AjaxDataControls Version 2. We have added several features and improved the code. Please note that we are still testing the controls thoroughly and therefore I am not recommending you to use these in a live environment. There is no documentation yet either, however the project contains examples of the new features and new examples will be added shortly. The documentation will be updated within few days as well. The main reason to get this out was to receive useful feedback from you so that we improve the controls. Here is a list of features that we have added or changed:

• Grouping: you can now group rows in the Gridview control (see Grouping.aspx in the /gridview folder)
• New Events:
  • onMouseover / onMouseout (see mouseover.aspx)
    
  • DataBoundEvent: called after the control(s) has been databound (see Basic.aspx in the /datalist folder)
    
  • InsertCommandEvent: Adds a new row at the bottom of the control to add a new row (see InsertRow.aspx in the /gridview folder)
• insertRows/insertItems method: You can also add new rows into the gridview/datalist/repeater via the js insertRows/insertItems methods. (see InsertRow-ClientSide.aspx in the /Gridview folder and /datalist folder)
  
• Eval: You may now use the new Eval("ColumnName") expression instead of using the ItemDataBound/RowDataBound (see Basic.aspx in the /datalist folder)
• Drag/drop has been improved and is using jQuery instead of the ASP.NET Ajax framework - the jQuery files are included in the sample project..
  
• New AutoCreateScriptVariable Property: The default value is true. This will allow automatically create a javascript variable with the same name as the server ADC control.
• The GridViewCheckboxColumn will now add a checkbox to the header, which when clicked will check/uncheck all rows. (see DifferentColumns.aspx in the /Gridview folder).
  
• New DropDownListColumn Column: This column allows you to add a new column with a dropdownlist. (see ComplexEditing.aspx in the /gridview folder)

Once again, I would like to mention that this is a pre beta release.

You can get the source-code along with the binaries and the sample project from the below link:

Assembla Project Homepage

Source-Code

Binaries

We are looking forward for your feedback.

The other day I added some files to my Visual Studio project, which I deleted later, however somehow they were not deleted from within TFS. Now I did continue with my coding of other files etc.. and when it was time to check-in my changes, TFS wanted to check-in the deleted files as well, which was very strange to me, since the files did not exist anymore - the change was marked as "add" instead of "deleted". Due to that I was not able to check-in my other files. To overcome this issue you just need to undo the changes of the deleted files, which will delete the files permanently and allow you to check-in your other files back in. Hope this helps someone.

I have working on and off on version 2 of the AjaxDataControls. One feature that I wanted to implement and use was the databind items to all controls via the Eval() method. With the help of Onur, one of our ADC developers, we have now this ability to do so. Now instead of using the ItemDataBound event you can use directly the Eval method in your markup, which will look something like this:

<AjaxData:Repeater ID="Repeater1" runat="server">
  <ItemTemplate>
    Name: {{ Eval(FirstName }}
    Last mame: {{ Eval(LastName }}
    Age: {{ Eval (Age) }}
  </ItemTemplate>
</AjaxData:Repeater>

More examples will be coming soon.

jQuery is a great library. I use jQuery in several of my projects and have to say that it is the best library I have ever used. Its a easily extendable as well. For the past, I have been using the drag and drop features, they perform much better than what the ASP.NET ajax library. Recently I also tried the Table drag and drop plugin, which allows you to change the row positions of a table; and guess what it works like a charm.

jQuery 1.3 was released just few days back and has lots of improvements as well as new features. Nettus has a nice summary of the new features along with charts and other statistics to show the goodness of the latest release. Our very own member Xun Ding, has several jQuery articles to help you get started - checkout his blog: http://dotnetslackers.com/Community/blogs/xun/default.aspx

I strongly recommend the jQuery library.

I just came to know from  Guy Barrett, that Windows7 is already available to download for MSDN and Technet subscribers. I am downloading it at this moment.

Get it now, before the first 2.5Million copies are gone and you can't download it anymore.

I have finally joined the forces of twitter - first I didn't really like it, but now I love it. I think its a great way to stay connected with others. In my twitter I will be posting about dotnetslackers, ajaxdatacontrols and my life :)

Follow me: http://twitter.com/dotnetslackers

A similar question was asked today in the ADC forums. Remember that the ADC controls can bind pure Javascript arrays without any problems. Here is a quick example:

<AjaxData:Gridview ID="ImagesList" runat="server" Visible=True>
    <Columns>
        <AjaxData:GridViewBoundColumn DataField="Id" HeaderText="Id"></AjaxData:GridViewBoundColumn>
        <AjaxData:GridViewBoundColumn DataField="Name" HeaderText="Name"></AjaxData:GridViewBoundColumn>
    </Columns>
</AjaxData:Gridview>


function pageLoad(sender, e)
{
    var data = new Array();
    data[0] = { Id: 1, Name: "Sonu Kapoor" };
    data[1] = { Id: 2, Name: "Xun Ding" };
    data[2] = { Id: 3, Name: "Gabriel" };
    data[3] = { Id: 3, Name: "Onur" };
    adc.set_dataSource(data);
    adc.dataBind();
}

See other FAQ examples.

I just received the notification from Microsoft that I have been re-awarded for the MVP 2009. Its a great feeling to get awarded from Microsoft. I truely appreciate that.

Thanks MS.

Today we launched a new project on which Granville and Luca have been working on. The result is a nice PDF e-book that you can download for free here on DotNetSlackers.

For more info visit: http://dotnetslackers.com/projects/Data-Structures-And-Algorithms/

I just saw on Bertrands blog (via DotNetSlackers), that the Ajax Futures Preview 1 is available. It also includes client-side template rendering. I have been waiting to try that feature out to see how it differs from the AjaxDataControls project here at DotNetSlackers. Besides that, it also includes several other features. I will be looking into the client-side template rendering engine and let you know my thoughts.

If you are one of the users that is using our AjaxDataControls, then we need your help. We are planing to work on the AjaxDataControls to fix current bugs and to add new features - this may be released as a SP or as a new release. We are not sure about this yet.

Nonetheless, we need your help to submit feedback and feature requests to us. Please visit our wish list forum and submit your feedback there:

http://dotnetslackers.com/Community/forums/wishlist/73.aspx

Thank you

This is a followup small how-to on my previous post:

AjaxDataControls (ADC) FAQ - How to get started with the AjaxDataControls with Visual Studio 2005? 

The basic idea is the same, however to make it easy to get started with VS2008 and ADC, I will repeat some steps that were used in my previous post.

Fireup up Visual Studio 2008 and select File->New Website. The first thing you will notice is that there is no "Ajax Enabled Website" template anymore. The reason is simple: ASP.NET Ajax is already built into .NET 3.5. Therefore we will go ahead and select "ASP.NET Web Site". I will call my project simply ADCSampleWebsiteVS2008 - feel free to change this to whatever you like.

Once you have created the empty project, you need to make sure that you add the necessary AjaxDataControls.dll, which you can get from:

http://codeplex.com/ajaxdatacontrols

However make sure that you get the binaries that were compiled for .net 3.5.

Once you have added the dll, we need to make some small changes to the web.config and add the following line between the <controls> section:

<add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>

Your section should look like this now:

<pages>
  <controls>
    ....
    <add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>
  </controls>
</pages>

If you want to return DataTables from your webservice or pageMethods you will also need to declare the following converters:

<jsonSerialization maxJsonLength="4194304">
  <converters>
    <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>
    <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>
    <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>
  </converters>
</jsonSerialization>

Besides that you will need to download the ASP.NET Futures and add the binaries Microsoft.Web.Preview.dll to your website project - make sure that you use the .net 3.5 binaries here as well.

This should go in between the <scripting>/<webServices> section.

You are now done with the web.config.

The rest is basically the same as described here. You need to add the webservice - a test function and the script code. Follow the steps in the mentioned post and you should be ready to go.

You can download the ADCSample VS2008 Website from here.

We have finally launched a new ranking system at DotNetSlackers. You can read about it here:

http://dotnetslackers.com/ranks

Any feedback is appreciated.

Welcome to the AjaxDataControls FAQ.

1. How to get started with the AjaxDataControls with Visual Studio 2005?
2. AjaxDataControls (ADC) FAQ - How to get started with the AjaxDataControls and Visual Studio 2008?
3. How to loop through all items?
4. How to get the desired item from the control?
5. How to use the SelectedIndexChangedEvent in the DataList control?
6. How to use plain JS to bind the GridView?
7. How to use the ItemCommandEvent of the ADC Repeater Control?
8. How to create nested ADC controls a.k.a parent/child?
   

If you feel there are questions missing in this FAQ, please feel free to email me through the contact form.

Please note that this page is under constriction.

Last Updated: 15-Jan-2009

This is a quick how to post for everyone that would like to get started with the AjaxDataControls. I will cover all steps one by one to show you easy the controls can be used.

Open Visual Studio 2005 and create a new ASP.NET Ajax Enabled Website:

Add a reference to the AjaxDataControls.dll to your bin folder. You can download the binaries from here.

Once you have added the dll, we need to make some small changes to the web.config and add the following line between the <controls> section:

<add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>

Your section should look like this now:

<pages>
  <controls>
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, 
    Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>
  </controls>
</pages>

If you want to return DataTables from your webservice or pageMethods you will also need to declare the following converters:

<jsonSerialization maxJsonLength="4194304">
  <converters>
    <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>
    <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>
    <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>
  </converters>
</jsonSerialization>

Besides that you will need to download the ASP.NET Futures and add the binaries Microsoft.Web.Preview.dll to your website project.

This should go in between the <scripting>/<webServices> section.

You are now done with the web.config.

Now let us start with a simple webservice that will return some test data. Right click on the project and select "Add New Item" and select "Web Service" and give it the name DataService.asmx.

Open the DataService.vb and add the following namespace:

Imports System.Web.Script.Services
Imports System.Data

Replace this line:

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

with:

<ScriptService()> _

Add a test function that will return a DataTable with some test data:

<WebMethod()> _
Public Function TestData() As DataTable
  Dim dt As New DataTable("t1")
  dt.Columns.Add("image")
  dt.Columns.Add("title")

  For i As Integer = 0 To 10
    dt.Rows.Add(New Object() {"c:\img" & i.ToString() & ".jpg", "image-" & i.ToString()})
  Next

  Return dt
End Function

Open the default.aspx and drop an AjaxData Gridview into the page and give it the id MyGrid. By default it will autogenerate the columns for you based on your datasource. Next we need to set the webservice that we created earlier into the ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Services>
    <asp:ServiceReference Path="~/DataService.asmx" />
  </Services>
</asp:ScriptManager>

Below the GridView markup add the following BLOCKED SCRIPT

<script type="text/javascript">
var _grid = null;
function pageLoad(sender, e)
{
  _grid = $find('<%= MyGrid.ClientID %>');
  DataService.TestData(onLoadSuccess);
}
       
function onLoadSuccess(result)
{
  _grid.set_dataSource(result.rows);
  _grid.dataBind();
}       
</script>

The first function is called automatically by the asp.net ajax framework whenever the page has loaded. In that function I retrieve an object of the Gridview control and store it into a local variable. Then I make a webservice call to the TestData function and pass the onLoadSuccess function to it, which will be called when the call has finished.

The onLoadSuccess takes the returned data sets the datasource via the set_dataSource function and binds the grid. Here is the result:

You can download the ADCSample Website from here.