Create custom columns for ASP.NET DATAGRID

xiaoxiao2021-03-06  111

Marcie Robillard

DataGridgirl.com

September 2003

Introduction

Have to admit that DataGrid code for Microsoft® ASP.NET includes a large number of duplicates. Although I am deeply troubled by this control, I still have to find shortcuts that simplify such tasks. No one is willing to do repetitive work, right? In order to get rid of this annoying work, we have to package repeated code in multiple projects into a reusable package. This is the problem to be solved by object-oriented programming, and it is no exception to use DataGrid. For DataGrid controls, to implement this, you need to place a common code into a built-in column type (will be used in the first example) and then create a customized custom use in multiple DataGrid objects. Column type.

This article describes the process of using the DROPDOWNLIST control in a DataGrid column using standard TemplateColumn, and then converts the logic to your custom DataGrid column type, I call it DropDownColumn. Some free DataGrid columns have been created for you, and you can download the desired type to Metabuilders.com.

Repeated use

If your team is the same as many organizations, the business logic and / or data access logic has been divided into separate components or component sets, while the remaining ASP.NET files, ASPX and their code only contain pure representations logic. ("Pure" is a relatively word.) However, even if the logic of the layer is sometimes repeated, this, the next time a certain user is coming to you, "I want my app in 'finance. When you look like Susu, you can reuse some of the "Financial" application part indicates that the content quickly builds such an application. You may also want to pack some logic, sell it on the web or distribute it in your Web site. ASP.NET makes it easier to implement more than ever, because it allows you to create your own server control, or export column type from an existing type to get the required features.

DropDownList solution

Suppose you are editing the Northwind database (or other work) in your local Microsoft SQL ServerTM, you want your users (we call them Ed, Warehouse Care) to edit the Orders table. One of the fields contains transport information (Shipvia), and the ED is capable of modifying information about the field. In display mode, transportation companies should appear as plain text. When the ED clicks the Edit button, you don't just provide him with a TextBox to edit the transport mode code (1, 2 or 3), but also provide him with a DropDownList that you can select different transport companies. (Because ED can't remember which number of transportation companies correspond to, the DropDownList program can help him solve this problem.)

Figure 1: Select Transportation Company

Built-in DataGrid column

After understanding the problem of the problem, now let's take a step, look at the five DataGrid column types built in the ASP.NET and its parent type DataGridColumn.

Boundcolumn. This is the standard display of the text field. It is displayed as plain text, but when the DataGrid is in "editing" mode, it will be converted to TextBox. You can also choose the formatting option. HyperlinkColumn. Used to display text data and represent a web address (URL). The URL can be the same as the display text, and they can be set separately. It is displayed as

Figure 2: 5 built-in columns inherited from DataGridColumn

Although these column types are very useful, they just understand the beginning of the DataGrid column.

Traditional method: DROPDOWNLIST in TemplateColumn

Before studying how to create a new column type, let's take a look at how to use DropDownList to use DropDownList directly to use DropDownList to solve the drop-down list without custom columns. ItemTemplate will only contain plain text representative of the current value, and EditItemTemplate contains a control that needs to be managed at runtime.

Runat = "server" cssclass = "grid"

AutogenerateColumn = "false">

EditText = "Edit" canceltext = "ca Zancel"

UpdateText = "Update" />

Datafield = "ORDERID" readonly = "True"

Headeertext = "Order ID" />

Datafield = "ShipName" Headertext = "ship to"

Readonly = "True" />

Datafield = "ShipCountry" Headertext = "Country" readonly = "true" />

<% # Container.DataItem ("shipvia")%>

Bind the code of DataGrid:

Sub bindgrid ()

DIM SQL AS STRING = "Select OrderID,

ShipName, ShipCountry, Shipvia from Orders

DIM DA As SqldataAdapter = New SqldataAdapter (SQL, Connstr)

DIM DS AS New DataSet

Da.fill (DS, "Orders")

DataGrid1.datasource = ds.tables ("Orders"). DefaultView

DataGrid1.databind ()

End Sub

The currently edited item is bound to DropDownlist when triggering a DataGrid ItemDatabase. When using the itemDatabase event, check the listitemType of the current project, otherwise you may find that you are using the HeaderItem or other non-applicable project types. Quote the DropDownList control for EditItem. In the following code, I use the cell control set directly (in order to keep the following examples), however, you can use a simple method to specify ID directly to the DROPDOWNLIST control, and use the DataGrid project's FindControl method locate control Quote. Since the DataGrid is bound to the DataTable default view, the element of the view is the DataRowView type, so you can convert the DataItem property of the current project to a DataRowView instance. This way, you can directly reference the fields in DataItem directly by field name. Using this method, save the current value of "ShipVia" into this record and use it to select the corresponding drop-down list item.

Private sub DataGrid1_itemdatabase (Byval Sender As Object, _

Byval e as system.web.ui.webcontrols.DataGriditeMeventArgs_

Handles DataGrid1.ItemDatabase

If E.Item.ItemType = ListItemType.editItem Then

DIM DRV AS DATAROWVIEW = CTYPE (E.Item.DataItem, DataRowView)

DIM CURRENTSHIP As String = DRV ("Shipvia")

DIM DDL As DropdownList = _

CType (E.Item.cells (4) .controls (1), DropdownList

DIM SQL AS STRING = _

"Select ShipperID, CompanyName from Shippers Order by ShipperID"

DIM DA As SqldataAdapter = New SqldataAdapter (SQL, Connstr)

DIM DS AS New DataSet

DIM ITEM AS LISTITEM

Da.fill (DS, "Shippers")

DDL.DataSource = DS.TABLES ("shippers"). DefaultView

DDL.DATATEXTFIELD = "CompanyName"

DDL.DataValuefield = "shipperid"

DDL.DATABIND ()

item = ddl.Items.FindByvalue (currentship)

IF not item is nothing kil.selected = true

END IF

End Sub

Finally, write the code that retrieves the currently selected value from the DropDownList, and executes the database update:

Private sub DataGrid1_updateCommand (Byval Source As Object, _

Byval e as system.Web.ui.WebControls.DataGridCommandEventArgs_

Handles DataGrid1.UpdateCommand

DIM DDL As DropdownList = _

CType (E.Item.cells (4) .controls (1), DropdownList

Dim newship as integer = ddl.selectedValue

Dim ORDERID AS INTEGER = INT32.PARS (E.Item.cells (1) .text)

DIM SQL AS STRING = _

"Update Orders Set Shipvia = @ ship where orderid = @ ID"

DIM CONN As SqlConnection = New SqlConnection (Connstr)

DIM CMD AS New Sqlcommand (SQL, CONN)

Cmd.Parameters.Add (New Sqlparameter ("@ ship", newship))

Cmd.Parameters.Add (New Sqlparameter ("@ ID", ORDERID))

Conn.open ()

Cmd.executenonquery ()

CONN.CLOSE ()

DataGrid1.editIndex = -1

Bindgrid ()

End Sub

All columns: DataGridColumn

We review all the parent types of the built-in type type DataGridColumn. (See Figure 1.) It contains properties and methods commonly used in all DataGrid columns. Types with star indicate that you want to use the type of custom column type.

DataGridColumn property

FooterStyle (TableItemStyle) Footertext HeaderImageURL (String) HeadersTyle Headertext (String) ItemStyle (TableItemStyle) Sortexpression Visible DataGridColumn Method

Initialize Initializecell LoadViewState OncolumnChanged SaveViewState TRACKVIEWSTATE

Reusable methods: Create DropDownColumn

First create a new category library in Microsoft® Visual Studio® .NET and name it MycustomColumn. Add a new class DROPDOWNCOLUMN and make sure you add a namespace in your class definition so your initial code is as follows:

Namespace mycustomcolumn

Public Class DropdownColumn

Inherits DataGridColumn

Public DataSource As ICollection

Public DataField As String

Public DataTextField As String

Public DataValuefield As String

END CLASS

End Namespace

I also declare 4 public properties as shown below:

DataSource. It is used to populate DROPDOWNLISTs. Can be anything that implements the ICollection interface. In the example of this article, I use ArrayList and DataView. Datafield. It is the field in the parent DataGrid data source that corresponds to the data selected from the drop-down list. For example, if DataSource contains a status set, DataField will be similar to "Statecode", or you can use the status free naming field in the table. DataTextField. This is the text to be displayed in the drop-down list, or it is not. Datavaluefield. This is the value indicating the special drop-down option. DataValueField is usually an integer value or other code, and DataTextField is a more meaningful text description for users.

Next, override Initializecell, it is a natural event of the DataGrid column. All cells in the column will happen to INITIALIZECELL, which is very similar to the itemcreated events directly using DataGrid. You can use it to manage cell content, such as setting Headertext, add the DropDownList control you will add data. I have added a handler to the cell's DataBinding event, which needs to take different processing based on whether the current is currently editing. Each system.web.ui.control has a DataBinding event. When the data is bind to the control, you can access the underlying data here, this example is the TableCell object in the DataGrid.

Public Overrides Sub Initializecell (Byval Cell As Tablecell, _

Byval columnIndex as integer, _

BYVAL ITEMTYPE AS LISTITEMTYPE)

MyBase.Initializecell (Cell, ColumnIndex, ItemType) Select Case ItemType

Case ListItemType.Header

Cell.Text = Headertext

Case ListItemType.Item, ListItemType.alternatingItem

AddHandler Cell.Database, Addressof ItemDataBinding

Case ListItemType.editItem

AddHandler Cell.Databinding, Addressof EditItAbinding

DIM DDL AS New DropDownList

Cell.Controls.Add (DDL)

End SELECT

End Sub

Next is the ItemDataBinding routine, the routine is triggered when data or alternatingItem in the DataGrid is performed. You need to reference back to TableCell, you can directly convert the "sender" object that is passed to the event, and then use the Tablecell's NamingContainer attribute to reference the current DataGridItem. This can only display the contents of Datafield in plain text format, just like displayed in BoundColumn. Finally, if the user specified by the user does not exist, I will display more friendly error messages for the user, not only the "index beyond range".

Private sub itemdatabase (Byval E AS Object, ByVal E as Eventargs)

DIM Cell as Tablecell = CType (Sender, Tablecell)

DIM DGI As DataGridItem = CType (Cell.namingContainer, DataGridItem)

Try

Cell.Text = DGI.DataItem (Datafield)

Catch Rangeex As IndexOutofRangeException

Throw new Exception ("Specified Datafield Was Not Found.")

Catch Otherex As Exception

Throw new Exception (Otherex.innerexception.tostring)

END TRY

End Sub

Next, write the code of the EditItemDataBinding event. When a row enters the Edit mode, the event will be triggered on our custom column cell. Retrieve the current cell again and insert the DROPDOWNLIST control when the Initializecell method is called. Add an empty project in DropDown to the first option, if the current data in the column does not match any items you choose from the DataSource collection and placed in the list, select this option.

Then, you need to determine the type of the incoming collection. In this case, I will handle two cases: Passing a set of strings through ArrayList, or DataView in the data table, which is constructed by the DATAROWVIEW project. For string data, I will enter a new ListItem and set the value of the pull-up item and the text. Since both cases are the same, only the text is required here. But I will select the corresponding item to make a selection according to the value so as to be consistent with the next example, and the next example will set a separate value attribute. For the DataRowView project, in the previous example, it has been pointed out that DataRowViewInstance ("FieldName") returns an object indicating the data in the field. You can use the same method to retrieve the values ​​you need for DataTextField and DataValueFields. Finally, some exceptions are throwing with common errors encountered when the developer uses columns, such as send invalid field names to the DataField property, or incompatible DataSource type. I have made hardcodes to the abnormal message to be popped, but I hope that you save these messages to a more configurable location in the actual application. For example, if you want to use your application within a global scale, you can save it to your web.config file or resource file. Similarly, you don't have to throw "Data Datafield" exceptions again, because it may have been captured in the ItemDataBinding event before the DataGrid is placed in the "Edit" mode.

Private sub EditItemDataBinding (Byval Sender as Object, _

ByVal e as evenTargs)

DIM Cell as Tablecell = CType (Sender, Tablecell)

DIM DDL As DropdownList = _

CType (Cell.Controls (0), DropDownList

Dim DataSourceItem as Object

DIM ITEM AS LISTITEM

DIM DGI As DataGridItem

'Add an empty option first

DDL.Items.Add (New ListItem (")))

For Each DataSourceItem in Datasource

Select Case DatasourceItem.gettype.tostring

Case "system.string" 'Apply to the ArrayList example

Item = New ListItem (DatasourceItem, DataSourceItem)

DDL.Items.Add (item)

Case "System.Data.DataRowView"

DIM DRV AS DATAROWVIEW = _

CType (DatasourceItem, DataRowView)

item = new_

Listitem (DRV (DRV (DRV (DRV (DataTextField), DRV (DataValuefield))

DDL.Items.Add (item)

Case Else

Throw New Exception ("Invalid DataSource Type.")

End SELECT

NEXT

Try

DGI = CType (Cell.namingContainer, DataGridItem)

item = ddl.Items.FindByValue (DGI.DataITEM (DataField))

Catch Rangeex As IndexOutofRangeException

Throw New Exception ("Specified Datafield Was Not Found.") Catch Otherex As Exception

Throw new Exception (Otherex.innerexception.tostring)

END TRY

IF not item is nothing kil.selected = true

End Sub

Use DropDownColumn

The above is all the code you need to create a DROPDOWNCOLUMN class. Let's take a look at how to use the control in your application. If you are studying at home, but have not yet started, please compile the namespace created above to MyCustomColumn.dll and copy it to the / bin folder of the application you want to experiment. In this example, I created a new web application UsecustomColumn, and add a reference to my / bin directory mycustomcolumn.dll. Add @REGISTER instructions on the top of the ASPX file:

<% @ Register tagprefix = "dggg"

Namespace = "mycustomcolumn"

AskEMBLY = "MyCustomColumn"%>

Note that the new DataGrid column type does not appear in the Visual Studio .Net property generator for DataGrid, so you need to enter the HTML view and add a column declaration. Make sure the DataGrid declaration is located in a group of

... tags, these tags are used to process postback. The rest of the ASPX file should be as follows:

<% @ Page language = "vb"

Autoeventwireup = "false"

Codebehind = "Webform1.aspx.vb"

Inherits = "usecustomcolumn.webform1"

TRACE = "false" debug = "true"%>

Webform1 </ Title></p> <p><Link rel = "stylesheet" type = "text / css" href = "styles.css"></p> <p><meta name = "generator" content = "Microsoft Visual Studio.Net 7.0"></p> <p><meta name = "code_language" content = "Visual Basic 7.0"></p> <p><meta name = "vs_defaultclientscript" content = "javascript"></p> <p><meta name = "vs_targetschema"</p> <p>Content = "http://schemas.microsoft.com/intellisense/ie5> </ head></p> <p><body></p> <p><form id = "form1" method = "post" runat = "server"></p> <p><asp: datagrid id = "datagrid1"</p> <p>Runat = "server" cssclass = "grid"</p> <p>AutogenerateColumn = "false"></p> <p><Columns></p> <p><asp: editcommandcolumn</p> <p>EditText = "Edit" canceltext = "ca Zancel"</p> <p>UpdateText = "Update" /></p> <p><asp: boundcolumn</p> <p>Datafield = "OrderID"</p> <p>Readonly = "True"</p> <p>Headeertext = "Order ID" /></p> <p><asp: boundcolumn</p> <p>Datafield = "ShipName"</p> <p>Headertext = "ship to"</p> <p>Readonly = "True" /></p> <p><asp: boundcolumn</p> <p>Datafield = "shipcountry"</p> <p>Headertext = "country"</p> <p>Readonly = "True" /></p> <p><DGG: DropDownColumn Datafield = "Shipvia" Headertext = "Ship method" /></p> <p></ Columns></p> <p></ ask: DataGrid></p> <p></ form></p> <p></ body></p> <p></ Html></p> <p>DataGrid is bound to the ORDERS table of the Northwind sample, and custom DropDownColumn is bound to the Shipvia column. Now I only set the DataField property, because I just bind to a simple ArrayList, don't need DataTextField and DataValueField properties. If you have a predefined constant list or you need a quick setup option, the ArrayList option is the simplest. Datasource DataSource DataSource is set in the code, first reference DropDownColumn:</p> <p>DIM DDC as mycustomcolumn.dropdowncolumn</p> <p>DDC = CType (DataGrid1.columns (4), MyCustomColumn.dropdownColumn)</p> <p>Dim Al As New ArrayList</p> <p>Al.Add ("Shipping Company A")</p> <p>Al.Add ("Shipping Company B")</p> <p>Al.Add ("Shipping Company C")</p> <p>DDC.DataSource = Al</p> <p>Below is the result of run this code:</p> <p>Figure 3: Using ArrayList</p> <p>Next, I need to convert the example to use the active table in the database. Shipvia is the foreign key to lookup Table Shippers, I specify it as Datasource for DROPDOWNCOLUMN. I also need to change the DROPDOWNCOLUMN declaration to include DataTextField and DataValuefield names that match the corresponding fields in the Shippers table: <dGG: DropdownColumn</p> <p>Datafield = "shipvia"</p> <p>DataTextField = "CompanyName"</p> <p>Datavaluefield = "shipperid" Headertext = "ship method" /></p> <p>Then bind two ORDERS tables to the DataGrid, bind the shippers table to the custom column:</p> <p>DIM SQL AS STRING =</p> <p>"Select Orderid, ShipName, ShipCountry, Shipvia from Orders"</p> <p>DIM DA As SqldataAdapter = New SqldataAdapter (SQL, Connstr)</p> <p>DIM DS AS New DataSet</p> <p>Da.fill (DS, "Orders")</p> <p>'DIM CMD as Sqlcommand = New Sqlcommand (SQL, CONN)</p> <p>'Conn.open ()</p> <p>'DataGrid1.DataSource = _</p> <p>Cmd.executeReader (Commandbehavior.CloseConnection)</p> <p>DataGrid1.datasource = ds.tables ("Orders"). DefaultView</p> <p>SQL = "SELECT SHIPPERID, COMPANYNAME" & _</p> <p>"From shippers Order by ShipperID"</p> <p>Da.selectCommand.comMandText = SQL</p> <p>Da.fill (DS, "Shippers")</p> <p>DDC.DataSource = DS.TABLES ("shippers"). DefaultView</p> <p>DataGrid1.databind ()</p> <p>DataGridColumn automatically selects the correct item according to the value (1, 2 or 3) in the Orderation table, as follows:</p> <p>Figure 4: Retrieve data from the database</p> <p>The last step using DropDownColumn is to retrieve the selected value to pass back the database update. To do this, just reference the DropDownList control in the cell, and determine its SelectedValue property:</p> <p>Private sub DataGrid1_UpdateCommand (_</p> <p>Byval Source as object, _</p> <p>Byval e as system.Web.ui.WebControls.DataGridCommandEventArgs_</p> <p>Handles DataGrid1.UpdateCommand</p> <p>DIM CustomDDL as DropdownList = _</p> <p>CType (E.Item.cells (4) .controls (0), DropdownList)</p> <p>Dim newship as integer = customddl.selectedValue</p> <p>Dim ORDERID AS INTEGER = INT32.PARS (E.Item.cells (1) .text) DIM SQL AS STRING = _</p> <p>"Update Orders Set Shipvia = @ ship where orderid = @ ID"</p> <p>DIM CONN As SqlConnection = New SqlConnection (Connstr)</p> <p>DIM CMD AS New Sqlcommand (SQL, CONN)</p> <p>Cmd.Parameters.Add (New Sqlparameter ("@ ship", newship))</p> <p>Cmd.Parameters.Add (New Sqlparameter ("@ ID", ORDERID))</p> <p>Conn.open ()</p> <p>Cmd.executenonquery ()</p> <p>CONN.CLOSE ()</p> <p>DataGrid1.editIndex = -1</p> <p>Bindgrid ()</p> <p>End Sub</p> <p>summary</p> <p>The above is an overview of how to create a new type with DataGridColumn for the parent type, how to make data bindings and how to apply it to the actual application. This is just an example of reusable DataGrid columns, so you need to check your own application to determine which repetition features can be encapsulated in their own custom DataGrid columns. You can develop your own columns to resolve common problems (for example, display DropDownList in columns) or meet your company's special needs. You also don't have to stick to this example. You can include a ASP.NET control in the custom column, you can write more complex structures, such as nesting a series of controls, third-party content, or the entire DataGrid control to column, Performing multi-layer information. In short, you can give full play to your imagination.</p> <p>5 built-in column types are very useful, which meets the needs of most of the cases that use the DataGrid control. There is no development of your own control now, just put some meaningful content in the templateColumn. Creating a custom column allows you to break through these restrictions, add a rich functionality in your DataGrid application.</p> <p>About the Author</p> <p>"DataGrid Girl" Marcie Robillard is the best ASP.NET expert in Microsoft, she is an independent ASP.NET consultant and trainer. ASP.NET DATAGRID is her profession, she also created a Web site DataGridgirl.com for this purpose. You can find the link of the excellent DataGrid article from this site, book review of DataGrid content, and increasing DataGrid FAQ. Marcie also spent a lot of time to host the ASP.NET Forum, answering questions about DataGrid. Marcie current tasks are to guide our company to develop their own .NET technology. If your organization needs this expertise or training, please contact marcie@dataGridgirl.com.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-101722.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="101722" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.098</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'Lqh4MIoKyvF3kXWw09rv1hmAjil1DIwYcrsxKGHcycY4bnAugpRqDdPZf_2FTzPWh6AICuaeABQeTH4Dns'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>