Friday, February 13, 2009

Dynamic Data : Part 2 [ In-Place Editing and Grid Customization ]

I have already written about Dynamic Data with ASP.NET 3.5 , that was primarily with LINQ to SQL few months back, Since onwards there are few discussion going around whether LINQ to SQL is scrapped or outdated, well nothing official it seems.

Well in this Part 2, I am here discussing few small things which I skipped in my last article, well this time I am using bit different template as “Dynamic Data Entities Web Site” [ Hope you have necessary .NET 3.5 Service packs and stuff to get these Dynamic Data Templates ]. I am using Entity Data Model here.Starting screen will give you idea and help you to proceed, rest of the steps remains as it is which I have already covered in my last article.


Now we need to Add “ADO.NET Entity Data Model”, since we are now concentrating on Entity Data Model instead of LINQ to SQL.


Now you need to add following line to your Global.asax :             [Note : I am using AdventureWorks Database]

model.RegisterContext(GetType(AdventureWorksModel.AdventureWorksEntities), New ContextConfiguration() With {.ScaffoldAllTables = True})

Then just run your application and you will get output like : [ I did lot of customization in design, you can also go ahead and make changes in Style.css]


In-place editing using Dynamic Data Template :

Usually when we use Dynamic Data Template, and once we start doing CRUD Operations, it usually redirects us to various pages like Insert,Edit etc. So to avoid that navigation and to make those CRUD operations quickly, we just need to uncomment following lines in Global.asax and we will get In-place editing, just uncomment following :

routes.Add(New DynamicDataRoute("{table}/ListDetails.aspx") With { _
           .Action = PageAction.List, _
           .ViewName = "ListDetails", _
           .Model = model})

       routes.Add(New DynamicDataRoute("{table}/ListDetails.aspx") With { _
           .Action = PageAction.Details, _
           .ViewName = "ListDetails", _
           .Model = model})

Basically, above lines supports combined-page mode and routes to corresponding Insert,Edit page etc. These lines are nothing but the routing definitions which decide way to route and perform operation making use same page.Output will look like this :


You can see marking in Red Select,Edit,Delete and New options on same page, Grid on Top and Edit,Delete,New template below that, You just need to click on “Select” to do Edit,Delete and Insert operation.

Customization of Grid :

By default, GridView in Dynamic Data Template will show all the columns available in table, to customize this experience, first you need to go to “ListDetails.aspx” under Page Templates, then you need to locate <asp:GridView> tag and  you need to remove following things :


You need to make AutoGenerateColumns="False" and then need to add columns which you want accordingly in <Columns> template like this :

     <asp:DynamicField DataField="EmployeeID" HeaderText="EmployeeID" />
     <asp:DynamicField DataField="ContactID" HeaderText="ContactID" />
     <asp:DynamicField DataField="Title" HeaderText="Title" />
     <asp:DynamicField DataField="BirthDate" HeaderText="BirthDate" />                  
     <asp:DynamicField DataField="MaritalStatus" HeaderText="MaritalStatus" />
     <asp:DynamicField DataField="Gender" HeaderText="Gender" />
     <asp:DynamicField DataField="HireDate" HeaderText="HireDate" />
     <asp:DynamicField DataField="SalariedFlag" HeaderText="SalariedFlag" /> 

You can see the output in following screen, we can clearly see that we made those Edit and Delete buttons invisible and also we removed unwanted columns, now only the specific columns which we declared in <Columns> template are there.


This is how you can customize columns in GridView, its very straight forward though, especially those who have good exposure on ASP.NET Grid programming.

Hope this will help you to customize your Dynamic Data experience upto certain level, well in upcoming parts, I will show you more way to enhance the same.


No comments: