Craig Stuntz’s Weblog : Using jqGrid with ASP.NET MVC: Search and Formatting. This is the fourth post in a series on using jqGrid with ASP.NET MVC. Today, we’re going to examine search and formatting results. I will implement a search feature and fix the problem with formatting date columns which I observed in the last post. I’ve updated the demo solution with these new features, and also fixed a bug reported by last time. If you’re new to the series, you might want to start at the beginning. First, let’s fix the date display. In order to change the date "column" in the results of the query to a formatted string, we simply need to project into an anonymous type.
Note that in this revised solution I’ve updated the mock repository to return more sensible dates. Important update: This code works correctly with LINQ to Objects, as with my demo repository, but will not work with LINQ to SQL. Now let’s add a search feature. I want the search box to appear above the grid at all times, rather than requiring the user to press a toolbutton to see it. That’s all for today. The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file).
Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other.
No CSS hacks The CSS used for this layout is 100% valid and hack free. No Images No JavaScript Safari. Ext JS - JavaScript Library. TableKit. Return to article Introduction TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax. Demo: Sortable/Resizable/Editable Click the table header cells to sort the column, resize the column by dragging the right border of a header cell, click a cell in the table body to edit the value.
Urgency Date Time Title Status Requested By Cost Size Keyboard is Broken In Progress Tom Closed Help, I'm on fire! New John My cup holder is not working Mark Windows is crashing Bill 06/07/2006xxx The ring came off my pudding can Assigned Blank Screen Xavier Should I open this email? The internet is broken Jill I can't print Documentation TableKit Basics Installation Reference the script in your HTML: Prototype and tablekit.js are required of course; Fastinit is optional. Simple Usage The easiest way to use TableKit is reference the script in your HTML and give you tables appropriate classes: Options Usage Styles. Enhancing the DataGrid with Grouped Rows and Su... [ Download Code Sample ] Often the need arises to be able to group data in a DataGrid under subheadings.
I will discuss and demonstrate three methods wth which to achieve grouping and subheadings in a DataGrid. After the DataGrid has been populated, the column with the group names is updated so that each group name spans all corresponding rows.Before the DataGrid has been populated, the data source is manipulated to add extra rows to act as subheadings.While the DataGrid is being populated, an extra subheading row is added each time the value of the group name column changes. With the first option, the resulting table would resemble the following: With the second and third options, the resulting table would resemble the following: The Grid Control for ASP.NET: Ajax support, cod...