Fixed column : header and rows alignment getting disturb
Fixed column : header and rows alignment getting disturb
hi all,
I m using fixed column plugin in my application, in fixed column if i given more than 2 than header and rows alignment mash up.
Please see below code which i used. How to set header and row alignment proper.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Datatabedotnetexample._Default" %>
var oTable;
$(document).ready(function () {
oTable = $('#myDataTable').dataTable
({
"sDom": 'C<"clear">lfrtip',
"oColVis":
{
"activate": "mouseover",
"buttonText": "Change columns",
},
"oColReorder": {
},
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
//"bPaginate": true,
"sScrollY": "500px",
"bPaginate": false,
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "Default.aspx/binddata",
"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
var data1 = JSON.stringify(aoData);
$.ajax({
type: "POST",
url: sUrl,
contentType: 'application/json',
dataType: 'json',
data: "{'Collection': '" + data1 + "'}",
success: function (json) {
var s = $.parseJSON(json.d);
fnCallback(s);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText)
}
});
},
"aoColumns": [
//Assign the data to rows
{"mDataProp": "ID" ,
"fnRender": function (obj, val) {
return "" + obj.aData.Name + "";
}},
{ "mDataProp": "Name" },
{ "mDataProp": "Address" },
{ "mDataProp": "Town" },
{ "mDataProp": "Country" },
{ "mDataProp": "Email" },
{ "mDataProp": "Gender" },
{ "mDataProp": "Phone", "bVisible": false }
]
});
new FixedColumns(oTable, {
"iLeftColumns": 3,
"iLeftWidth": 610
});
$( "#dialog" ).dialog({
autoOpen: false,
width: 600,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
$( ".myClass" ).live('click',function( event ) {
//$( "#dialog" ).dialog( "open" );
$("#dialog").html('').dialog("open");
$("#modalIframeIdaprv").attr("src", "Testpopup.aspx");
//return false;
event.preventDefault();
});
});
function closepopup() {
$("#dialog").dialog('close');
}
<%--
--%>
ID
Company name
Address
Town
Country
Email
Gender
Phone
I m using fixed column plugin in my application, in fixed column if i given more than 2 than header and rows alignment mash up.
Please see below code which i used. How to set header and row alignment proper.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Datatabedotnetexample._Default" %>
var oTable;
$(document).ready(function () {
oTable = $('#myDataTable').dataTable
({
"sDom": 'C<"clear">lfrtip',
"oColVis":
{
"activate": "mouseover",
"buttonText": "Change columns",
},
"oColReorder": {
},
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
//"bPaginate": true,
"sScrollY": "500px",
"bPaginate": false,
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "Default.aspx/binddata",
"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
var data1 = JSON.stringify(aoData);
$.ajax({
type: "POST",
url: sUrl,
contentType: 'application/json',
dataType: 'json',
data: "{'Collection': '" + data1 + "'}",
success: function (json) {
var s = $.parseJSON(json.d);
fnCallback(s);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText)
}
});
},
"aoColumns": [
//Assign the data to rows
{"mDataProp": "ID" ,
"fnRender": function (obj, val) {
return "" + obj.aData.Name + "";
}},
{ "mDataProp": "Name" },
{ "mDataProp": "Address" },
{ "mDataProp": "Town" },
{ "mDataProp": "Country" },
{ "mDataProp": "Email" },
{ "mDataProp": "Gender" },
{ "mDataProp": "Phone", "bVisible": false }
]
});
new FixedColumns(oTable, {
"iLeftColumns": 3,
"iLeftWidth": 610
});
$( "#dialog" ).dialog({
autoOpen: false,
width: 600,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
$( ".myClass" ).live('click',function( event ) {
//$( "#dialog" ).dialog( "open" );
$("#dialog").html('').dialog("open");
$("#modalIframeIdaprv").attr("src", "Testpopup.aspx");
//return false;
event.preventDefault();
});
});
function closepopup() {
$("#dialog").dialog('close');
}
<%--
--%>
ID
Company name
Address
Town
Country
Gender
Phone
This discussion has been closed.
Replies
Allan