[CLOSED] Grid - set column renderer

  1. #1

    [CLOSED] Grid - set column renderer

    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;
                };
            ")
    )
    Last edited by fabricio.murta; Sep 27, 2016 at 8:40 PM.
  2. #2
    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.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I loaded the view dynamically and it shows this output:

    Click image for larger version. 

Name:	Capture.JPG 
Views:	12 
Size:	11.4 KB 
ID:	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>
  4. #4
    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.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    setRenderer() worked. Thank you.
  7. #7
    Glad it worked for you, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Custom parameter in grid column Renderer
    By alscg in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 16, 2013, 3:01 AM
  2. Replies: 1
    Last Post: Dec 06, 2012, 3:27 PM
  3. Grid Column Renderer
    By karthik.arian03 in forum 1.x Help
    Replies: 8
    Last Post: Feb 11, 2011, 6:34 AM
  4. [CLOSED] number renderer in grid column
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 05, 2010, 10:01 AM
  5. [CLOSED] Grid Column Renderer for Currency £
    By CMA in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 07, 2010, 4:52 PM

Posting Permissions