PDA

View Full Version : [CLOSED] Grid Columns not occupying full space of the grid



PriceRightHTML5team
Apr 29, 2014, 7:52 AM
Hi,

I have grid in which some column header text is dynamic, that's why i have not set the width to columns of the grid.
The issue i am facing is that, columns of the grid does not occupy the full space of the grid, a blank column with white space is get rendered.

Below snapshot will give you clear idea:
10231

Here is my Sample Code:

// Model




public class ComparisonDTO
{
public string Headers { get; set; }

public string Scenario1Value { get; set; }

public string Scenario2Value { get; set; }

public string NPVdiff { get; set; }

public string NPVPercentagediff { get; set; }
}



// Controller




public List<ComparisonDTO> GetData()
{

List<ComparisonDTO> lst = new List<ComparisonDTO>();

ComparisonDTO cmp = new ComparisonDTO
{
Headers = "Percentile 1",
Scenario1Value = "557K",
Scenario2Value = "550K",
NPVdiff = "7K",
NPVPercentagediff = "0.88%"
};

lst.Add(cmp);

cmp = new ComparisonDTO
{
Headers = "Percentile 2",
Scenario1Value = "557K",
Scenario2Value = "550K",
NPVdiff = "7K",
NPVPercentagediff = "0.88%"
};

lst.Add(cmp);

cmp = new ComparisonDTO
{
Headers = "Percentile 3",
Scenario1Value = "557K",
Scenario2Value = "550K",
NPVdiff = "7K",
NPVPercentagediff = "0.88%"
};

cmp = new ComparisonDTO
{
Headers = "Discounting Rate",
Scenario1Value = "3%",
Scenario2Value = "5%",
NPVdiff = "",
NPVPercentagediff = ""
};

lst.Add(cmp);

return lst;

}

public ActionResult Index()
{
// Dynamic Column Header
ViewBag.ColHeader1 = "Test Grid Column Header 1";
ViewBag.ColHeader2 = "Test Grid Column Header 2";

var model = GetData();
return View(model);
}



// View



@model List<POC_DynamicCharts.Controllers.GridController.Compa risonDTO>
@{
ViewBag.Title = "Index";
var X = Html.X();
}
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))

<h2>Test Grid</h2>

@(

Html.X().Container().Width(700).Items(
Html.X().GridPanel().Width(700).ID("grdNPV").Height(160).EnableColumnHide(false)
.Store
(
Html.X().Store().ID("StoreNPV")
.DataSource(Model)
.Model
(
Html.X().Model()
.Fields
(
new ModelField("Headers"),
new ModelField("Scenario1Value"),
new ModelField("Scenario2Value"),
new ModelField("NPVdiff"),
new ModelField("NPVPercentagediff")

)
)
)
.ColumnModel
(
Html.X().Column().Text("").ID("colHeaders").DataIndex("Headers"),
Html.X().Column().Text(ViewBag.ColHeader1).ID("colScenario1Value").DataIndex("Scenario1Value"),
Html.X().Column().Text(ViewBag.ColHeader2).ID("colScenario2Value").DataIndex("Scenario2Value"),
Html.X().Column().Text("NPV Diff").ID("colNPVdiff").DataIndex("NPVdiff"),
Html.X().Column().Text("NPV % Diff").ID("colNPVPercentagediff").DataIndex("NPVPercentagediff")

)
.SortableColumns(false)
.Features
(
Html.X().Grouping().HideGroupedHeader(false)
)
)//Grid Container

)



Thanks

Daniil
Apr 29, 2014, 10:36 AM
Hi @PriceRightHTML5team,

There is 100 width by default. To stretch a column, you should specify its Flex property.

PriceRightHTML5team
Apr 29, 2014, 11:10 AM
Thanks Daniil...

It is working fine.