Grid columns are showing first time without specified width,
Below is the code illustrated this issue,
@(Html.Infragistics().Grid<GridVM>() .ID("myGrid") .Width("100%") //.Height("600px") .AutoGenerateColumns(false).Columns(column => {
column.For(x => x.Serial).Width("0%").DataType("string");column.For(x => x.CName).Width("27%").DataType("string"); column.For(x => x.JTitle).Width("13%").DataType("string"); column.For(x => x.CmpName).Width("21%").DataType("string"); column.For(x => x.CEmailId).Width("17%").DataType("string"); column.For(x => x.CNumber).Width("12%").DataType("string"); column.For(x => x.CNumber).Width("12%").DataType("string");
column.For(x => x.CNumber).Width("0%").DataType("string");
}).DataSourceUrl(Url.Action("GetPartialView", "Controller", new { Id = ViewData["Id"] })) .DataBind() .Render() )
If i run above code then first time when this grid rendered on client browser it is showing all columns with equal width instead columns should have same width which i've been set in Width settings. And when DataSourceUrl get data then column width is correctly adjust.
Can you please give me sample code for its resolution?
Also, i'm not sure about this BUT if height specified then its width set at first time. You can figure out this happening as well.
Thanks,
Sanjay
Hello Sanjay,
Thank you for posting in our community.
I followed the steps that you suggested and created a small sample illustrating your scenario. However I was unable to reproduced the described behavior. I set the width initially and all columns are correctly rendered. For example:
@(Html.Infragistics().Grid(Model) .ID("grid1") .Width("100%") .AutoGenerateColumns(false) .PrimaryKey("ProductID") .Columns(col => { col.For(c => c.ProductID).Width("0%").DataType("number"); col.For(c => c.Name).Width("80%").DataType("string"); col.For(c => c.ProductNumber).Width("30%").DataType("string"); col.For(c => c.ReleaseDate).Width("0%").DataType("date"); }) .DataSourceUrl(Url.Action("GetData")) .Render())
@(Html.Infragistics().Grid(Model)
.ID("grid1")
.Width("100%")
.AutoGenerateColumns(false)
.PrimaryKey("ProductID")
.Columns(col =>
{
col.For(c => c.ProductID).Width("0%").DataType("number");
col.For(c => c.Name).Width("80%").DataType("string");
col.For(c => c.ProductNumber).Width("30%").DataType("string");
col.For(c => c.ReleaseDate).Width("0%").DataType("date");
})
.DataSourceUrl(Url.Action("GetData"))
.Render())
I am also attaching my sample for your reference. Please test it and let mw know what is the result on your side. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify my sample and send it back to me for further investigation.
Please feel free to continue sending updates to this case at any time.
Hi Vasya,
Thanks so much for your reply!
I've executed your solution and issue is easily replicating. Please find the attachment for your reference purpose.
Replication steps.
1. Make breakpoint on server side function i.e GetDate so that grid wait for getting long results. Please have a look in same attachment for breakpoint settings.
Thanks & Regards,
Thank you for getting back to me.
What I can suggest for handling this issue is when setting column`s width to 0% to recalculate the rest of the column`s width in order to make the total visible percent 100. For example:
@(Html.Infragistics().Grid(Model) .ID("grid1") .Width("100%") .AutoGenerateColumns(false) .PrimaryKey("ProductID") .Columns(col => { col.For(c => c.ProductID).Width("0%").DataType("number"); col.For(c => c.Name).Width("80%").DataType("string"); col.For(c => c.ProductNumber).Width("20%").DataType("string"); col.For(c => c.ReleaseDate).Width("0%").DataType("date"); }) .DataSourceUrl(Url.Action("GetData")) .Render())
col.For(c => c.ProductNumber).Width("20%").DataType("string");
Additionally, what I can suggest for achieving your requirement is initially setting these column`s Hidden option to true. There is no need to enable Hiding feature to set column`s hidden property. For example:
@(Html.Infragistics().Grid(Model) .ID("grid1") .Width("100%") .AutoGenerateColumns(false) .PrimaryKey("ProductID") .Columns(col => { col.For(c => c.ProductID).Width("0%").DataType("number").Hidden(true); col.For(c => c.Name).Width("80%").DataType("string"); col.For(c => c.ProductNumber).Width("20%").DataType("string"); col.For(c => c.ReleaseDate).DataType("date").Hidden(true); }) .DataSourceUrl(Url.Action("GetData")) .Render())
col.For(c => c.ProductID).Width("0%").DataType("number").Hidden(true);
col.For(c => c.ReleaseDate).DataType("date").Hidden(true);
Please test this on your side and let me know weather any of these approaches helps you resolve your issue.
Looking forward to hearing from you.
Thanks so much for suggesting me this solution.
BUT, i need hidden columns in client side as 0% column have id or desired hidden values which i want to use while rendering the grid.
And also, perhaps you have not noticed in attached screen shot that all the columns are equal width as these should be in 80% 20% ratio.
If possible then can you please put Height = 600px and observe that columns' width is OK.
Looking forward to hear from you.
I created the following case for you: CAS-158067-W5M7Q8 and will update you through it. You could see it in your account in the 'Support Activity' page.
Please let me know if you have any additional questions regarding this matter.