.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

How to set column widths to a jQuery datatable ?

Posted By:      Posted Date: April 10, 2011    Points: 0   Category :ASP.Net

Hi, I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).

Here is the screen shot:


Here is my code:

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
            "bRetrieve": false,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '10%' } ]


<div id="ratesandcharges1Div" style="width: 650px;"> 

<table id="ratesandcharges1" class="grid" >

View Complete Post

More Related Resource Links

how can we split a datatable into two ,based on a column at runtime

hi , ihave a problem that to assaign values to two listviews from single datatable based on a column which have values 0, 1. it is wpf app the listview has a grid . i need to specify the result data as datacontext

Clone GridView-Columns Widths (assign the Column-Width from 1 Gridview to another)


Hi everyone,

I've googled quite a lot, but couldn't find a solution - in the end this forum always helped me out the best! :)

This is my problem: I've got my Gridview gv_1, it gets its data from the code behind through a DataSet, gets generated like it should be, and assigns it's column-width to the longest entry in the datarow. Now I've got my Gridview gv_2, which has other entries and column widhts (gets filled the same way) - what I want to do is to change the width of the columns that the gridviews have the same overall width.

I've uploaded a screenshot: http://stepdown.elementfx.com/image16.jpg

What I've already tried is playing around with the GridView.HeaderRow.Cells[0].Width-Property, but when I debug it (after it's DataBound) I've got no values, meaning the values are "0.0" etc. The try to assign a value also didnt work (not directly for Width and not for Width.Value).

The next problem I could encounter is that my second GridView has no visible HeaderRow - and as far as I've googled people always somehow set the width of the column - but I'm not even that far yet. ;)

So the perfect solution (working in my head at least) would be to get the width of each column from the 2 gridviews, pick the larger one, and ass

Delete row from datatable based on column value



I am populating a datatable with data from MSSQL and I have a need to then remove all rows in the datatable that have a certain value in a specific column.

Is there any way I can remove rows from a datatable by specifying the value in the column it should identify the rows by that should be removed? (eg like in MSSQL how you can say delete from tablename where field=value)?

DataTable and it's Gridview - A Column Order Question


Well, I've been developing with gridviews for quite some time now.  Just recently I came across a situation that has me stumped.  Here's how the gridview has been working for me.


1.      A stored procedure from the database is called (three parameters are passed (reporttype, name, location)

2.     The data is retrieved using the SqlDataAdapter to fill a Datatable


4.     Columns are created programmatically as it reads the DataTable results (headertext, datafield, and dataformatstring are set at runtime)

5.     The Gridview triggers the databind event - and voila it works.


My dilemma is this:  the stored procedure (that I haven't developed) returns a various set of columns and column order.  I have one report type that does the following:


ReportType 1:  column orders returned in the following order when running directly in SQL

            col B, col C, col D, col E, col A


when I run the report through my gridview, the column order is as follows:


Report Column widths in 2008 vs 2008 R2

I have a report that basically draws a calender and shades in days for when a person has been absent.  This report looks fine when I preview it in designer, and when I deploy it to a 2008 SSRS instance.  However, when I deploy it to an SSRS 2008 R2 instance, the column width for some of the days grows huge, and actually requires you to scroll to see the entire report width (the report should fit on an 8.5 X 11 page).  What could have changed between 2008 and 2008 R2 for this to happen?  The report also looks fine when you load it into Report Builder and preview it on the R2 instance.

Disable hyperlink in Jquery datatable


I have the following piece of code.

 String activityDate = "<input type='hidden' value='" + row["logID"] + "'><a class='ActivityLogLink' href=#>" + String.Format("{0:dd/MM/yyyy}",row["actDate"]) + "</a>";                


deleteImage = "<input type='hidden' value='" + row["logID"] + "'><a class='logDeleteLink' href='#'>" + "<img id='img' src='" + "Images/delete_enabled.gif" + "' alt='Delete' style='border-style:none'/>" + "</a>";

This is a web method and return type is Json.

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

This list we are going to assign it to HTMl table using Jquery datatable.

My requirement is enable or disable the hyperlink and image based on some data from Database like beloww

if(isFlag == true)



DataTable column names not matching the case



I am getting a datatable from the SQL Server. In SQL Server the column headers are fine (mix of Capital and Small Letters). But when i am

getting it in the front end, all the column names are in lower case.

How can i get the column names in original Case.

Thanks in advance

How to add validation rule programmatically on datagrid column, whose itemsource is datatable?

I want as user ends editing a datagrid cell, a validation rule should be applied on this cell for error checking like whether its value is null or not and in case of null it should display the error on that cell. All this i want to do programmatically not in xaml. Can anybody guide me with an example ?

wroking on datatable to fetch only distinct values of particular column to assign to dropdown list.


As I kept my fetched datatables into session and accessing it on another page there I am

wroking on datatable to fetch only distinct values of particular column to assign to dropdown list.

SharePoint Calculated Column Formula or Using JavaScript/jQuery



I have one issue in creating a calculated column formula:

The idea is:

|	Column1			|	Column2			|	Column3			|
|	Name1			|	(empty)			|	Name1			|
|	(empty)			|	Name2			|	Name2 			|
|	Name3			|	(empty)			|	Name3			|

For example we have 2 columns (Column 1 and Column 2) that may have or may not have a value but at least one of them will have a value.

Column 3 is the calculated column that will check if Column 1 has value and Column 2 is empty(by default Column 2 will be empty because Column 1 has value :)) then the value in Column 3 will be the same value as Column 1. Otheriwse if Column 1 is empty and Column 2 has a value, the Column's 3 value will be the value from Column 2.

Can this be achieved with JavaScript or jQuery ? to fill the column's 3 value based on the other two columns if have or not value?


jQuery jqGrid Edit Column



I have sucessfully managed to set up the jqGrid and have it so that when a user clicks a row the final column turns into a combo box with three possible values. When they select a value and then select the next row the value is saved to the database.

What I need to do next is have it so that if they select option 'R' in the combo box I display a modal popup asking them if they definitely want to do that and making them provide some more information. But I'm having trouble figuring out how to access an event handler for the combo box in the grid so that I can do some sort of selectedindexchanged event.

Can anyone help?


GridView Confirmation Box Using JQuery BlockUI in asp.net

JQuery is the most popular JavaScript library. One of the main reasons for its fame is the plugin architecture. Anyone can create a separate library that leverage the JQuery library. In this article we are going to look at the BlockUI library which is used to block the user screen while performing a task.

jQuery $(document).ready() and ASP.NET Ajax asynchronous postback

Many call it the ASP.NET jQuery postback problem, but using the technique below should make it no problem anymore. $(document).ready() isn't called after an asynchronous postback. What this means? You lose the functionality that should be executed within $(document).ready() after an UpdatePanel rendered its contents after an asynchronous postback.

call JavaScript - jQuery code from ASP.NET Server-Side

jQuery got so close to me lately that I can see myself adding the scripts to my project almost unconsciously. The thing is, jQuery is very useful for me, in almost all situations and it has been a do or die enhancement for all my project since I first put my hands on it.

Of course while using it, you encounter few situations which need a bit of research to solve, mostly when you are trying to combine it with some other technologies like: UpdatePanels and ASP.NET Ajax. For instance there are many situations when I would like to run some jQuery magic based on some decision that I make on the server side.

Making Ajax Callbacks to the Server Using jQuery with ASP.NET

In the first part of this article series I introduced jQuery's functionality and how it provides a rich client side programming model. This time around I'll expand on these concepts and show you how you can use jQuery in combination with ASP.NET using it as an AJAX backend to retrieve data. I'll also discuss how you can create ASP.NET controls and otherwise interact with jQuery content from ASP.NET pages in WebForms.

jQuery is just a JavaScript library so it will work seamlessly with ASP.NET both from page code as well as through backend driven code using the Page.ClientScript object or ScriptManager. You can use jQuery on its own as a client side and Ajax library that communicates with ASP.NET or you can use jQuery in combination with ASP.NET AJAX. The two actually complement each other quite well as jQuery provides functionality that the ASP.NET AJAX library does not and vice versa. For the most part the interaction between the two libraries is trouble free except for a few very rare edge cases.

Displaying Row Details Tooltip on GridView using JQuery

Continuing exploring JQuery! I decided to implement a feature to display some kind of details related to a row displayed on GridView. For example when displaying employees details on GridView some information might not fit in the GridView because it will make it huge and wide. These infomration can be diplayed as Tooltip. Or when you want to display a picture and some kind of formated text to be diplayed as tooltip when mouse hover on the image.

jQuery: Highlight Gridview Rows with Checkbox

Im learning and experimenting with jQuery and ASP.NET. Below is a simple solution I created to highlight rows in a gridview by clicking on a checkbox next to the row.

Gridview setup:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend