Need help on setting width of the datatable column
Need help on setting width of the datatable column
I am unable to set the width of the column of a datatable, Can you please provide me the modified code of the below:
HTML :
C# server code :
public void ConvertAdhocDataToJSON(eUserRequestType RequestType)
{
const string infoImageTbl = "
{0} | {1} |
";
const string infoImage = "
";
hdnAdhoc.Value = null;
DataTable Dt;
try
{
Dt = GetAdhocData(RequestType);
lblBGSchedulesNo.Visible = false;
// Create JSON
var dtDataRows = (from eachRow in Dt.AsEnumerable()
select new
{
RbtnCol = eachRow.Field<string>("RbtnCol").Trim(),
ProfileName = eachRow.Field<string>("ProfileName").Trim(),
JobStatus = eachRow.Field<string>("JobStatus").Trim(),
LastRunOn = eachRow.Field<string>("LastRunOn").Trim()
}).ToList();
#region BindingHedaer
var ColNames = new List<object>();
foreach (DataColumn eachColName in Dt.Columns)
{
var columnDisplayName = string.Empty;
var columnInternalName = eachColName.ColumnName;
switch (columnInternalName.ToString())
{
case "RbtnCol":
columnDisplayName = ".";
break;
case "ProfileName":
columnDisplayName = string.Format(infoImageTbl, infoImage, "Job Name"); // "Job Name";
break;
case "JobStatus":
columnDisplayName = string.Format(infoImageTbl, infoImage, "Status"); // "Status";
break;
case "LastRunOn":
columnDisplayName = "Last Run Date";// "Last Run Date";
break;
default:
columnDisplayName = "";
break;
}
if (!string.IsNullOrEmpty(columnDisplayName))
{
ColNames.Add(new { title = columnDisplayName, mDataProp = columnInternalName });
}
}
#endregion
var ToolTips = new List<object>();
ToolTips.Add"Col1"); //col 1
ToolTips.Add("col2"); //col 2
//Create Label localization
var returnData = (new
{
TableData = dtDataRows,
TableColNames = ColNames,
ToolTipNames = ToolTips
});
//Create string form of JSON
JavaScriptSerializer serializer = new JavaScriptSerializer();
var json = serializer.Serialize(returnData);
hdnAdhoc.Value = json;
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "function", "<script type='text/javascript'>AdhocGrid();</script>", false);
tabManageProfiles.SelectedTab = 2;
this.DisplayPanel(2);
}
catch (Exception Ex)
{
Dt = null;
this.oProfileSchedulesWebManager.LogError(this.oProfileSchedulesWebManager.oProfileScheduleData.clientId, this.oProfileSchedulesWebManager.oProfileScheduleData.userId, moduleName, "SchedulesAdminQueue", Ex);
}
}
Jquery Code :
/Adhoc Grid/
function AdhocGrid()
{
var JSONData = jQuery.parseJSON($("#hdnAdhoc").val());
var columnsAdhoc = JSONData.TableColNames;
var dsAdhoc = JSONData.TableData;
var ToolTipNames = JSONData.ToolTipNames;
$("#divAdhoc").html("
");
$Adhoctable = $('#tblAdhocGrid');
//Setting grid properties
var tblAdhoc = $('#tblAdhocGrid').DataTable({
"data": dsAdhoc,
"columns": columnsAdhoc,
"aaSorting": [[3, "desc"]],
"bScrollInfinite": true,
"sScrollY": "400px",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"bPaginate": true,
"fnDrawCallback": function()
{
$Adhoctable.dataTable()._fnScrollDraw();
$Adhoctable.closest(".dataTables_scrollBody").height(370);
},
"bAutoWidth": false // Disable the auto width calculation
});
//For Applying Tooltip
$('th').hover(function()
{
var sTitle;
sTitle = jQuery(this).text();
var colIndex = $(this).index();
if (colIndex == 1) { this.setAttribute('title', ToolTipNames[0]); }
else if (colIndex == 2) { this.setAttribute('title',ToolTipNames[1]);}
},
function()
{
$(this).css("background", "");
});
// new $.fn.dataTable.FixedHeader(tblAdhoc);
} //End of Adhoc function
As i am not able to set the width of the columns whenever i am doing the resize of the window header columns width not increasing to maximum.
Please help me as soon as possible, My deliver date is very near.
Regards
Madhu