PDA

View Full Version : [CLOSED] Grid - set column renderer



sveins12
Sep 25, 2016, 4:13 PM
Could I set the column-renderer by javascript at runtime?



@{
var x = Html.X();
var data = new List<object>{
new{Name = "Lisa"},
new{Name = "Bart"}
};
}
@(
x.Grid()
.Columns(
x.Column()
.DataIndex("Name")
.Text("Name")
.Width(50)
.Flex(1)
)
.Store(x.Store()
.AutoDataBind(true)
.Fields(
x.ModelField().Name("Name")
)
.Data(data)
)
.Listeners(l => l.Initialize.Handler= @"

// I would like to set a columns renderer here.
// The following doesn't seem to work:

this.getColumns()[0].renderer = function(value){
return 'test: ' + value;
};
")
)

fabricio.murta
Sep 26, 2016, 6:03 PM
Hello @sveins12!

Your sample test case produces no output at all... Can you review it? Please ensure you are binding no layout with the test case, as like adding



@{
Layout = null;
}


to your code, so everything needed to run the test case is available in the testcase itself. Unless, of course, the test case (which I think it is not the case here, right?) requires a layout to be defined.

Thanks for understanding, I'm looking forward for your follow-up! I've checked a grid example and the documentation and seems the renderer works well, so I'm probably missing an important step from your test case.

sveins12
Sep 26, 2016, 7:00 PM
I loaded the view dynamically and it shows this output:

24755

If the dynamic rendererer function was working it should show the text 'test: ' in front of every value.

Now I have tried to put it into a standalone page, but then it seems like the first column header is taking up all the space in the display, and no data is showing:



@{
Layout = null;
var x = Html.X();
var data = new List<object>{
new{Name = "Lisa"},
new{Name = "Bart"}
};
}
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<body>
@x.ResourceManager()
@(
x.Grid()
.ItemHeight(45)
.Columns(
x.Column()
.DataIndex("Name")
.Text("Name")
.Flex(1)

)
.Store(x.Store()
.AutoDataBind(true)
.Fields(
x.ModelField().Name("Name")
)
.Data(data)
)
.Listeners(l => l.Initialize.Handler = @"

// I would like to set a columns renderer here.
// The following doesn't seem to work:

this.getColumns()[0].renderer = function(value){
return 'test: ' + value;
};
")
)
</body>
</html>

fabricio.murta
Sep 26, 2016, 8:52 PM
Hello @sveins12!

Now we're talking the same language! :)

Just add .FullScreen(true) to your grid definition. It will show just fine.

The outmost component of an example must be either a viewport or something with this setting so that it fits the window of the self-implied viewport the mobile page always have in the mobile version concept. You probably had a viewport or something like it in your layout, it just gets difficult to know to which point we are talking about the same example like that.

Providing the test case like you did now is much better for us to reproduce the issue in our side without fixing this and that every time, unable to point where our examples are diverging.

We'll investigate a proper way (if there's support at all) for changing the renderer on-the-fly of a panel and get back to you soon.

fabricio.murta
Sep 26, 2016, 9:04 PM
And hello again!

Just set the column's renderer via its set method!.. Just changing the config option like you did only affects the grid before it renders, or if you delete and re-render it entirely (which is cumbersome!).

Not only this, if you change the renderer via its setter at any time, you can just App.g1.refresh() for the new renderer results to apply!

See below the end code. Notice I added some HTML convention lines just to reduce amount of warnings on console upon page load:



@{
Layout = null;
var x = Html.X();
var data = new List<object>{
new{Name = "Lisa"},
new{Name = "Bart"}
};
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title></title>
</head>
<body>
@x.ResourceManager()
@(
x.Grid()
.ID("g1")
.ItemHeight(45)
.FullScreen(true)
.Columns(
x.Column()
.DataIndex("Name")
.Text("Name")
.Flex(1)
)
.Store(x.Store()
.Fields(
x.ModelField().Name("Name")
)
.Data(data)
)
.Listeners(l => l.Initialize.Handler = @"
// Use the column't setter method to set the renderer function
this.getColumns()[0].setRenderer(function(value){
return 'test: ' + value;
});
")
)
</body>
</html>


Hope this helps!

sveins12
Sep 27, 2016, 3:07 AM
setRenderer() worked. Thank you.

fabricio.murta
Sep 27, 2016, 9:40 PM
Glad it worked for you, thanks for the feedback!