how to display image

[samaremad]

i have problem that i upload image by [imageUploadEditer] (in the form) to the database but it didnt display instead of that in image column it appear as string location

how can i solve this problem ?

[edwardch]

Hey @samaremad, check out the demo of inline image in grid, and check out the code that goes in the InlineImageInGridColumns.cs file here.

Good luck!

[samaremad]

first : thank you for your reply
second : i edit the grid page as shown
namespace KRVoting.Dashboard {

@Serenity.Decorators.registerClass()
export class NomineeGrid extends Serenity.EntityGrid<NomineeRow, any> {
    protected getColumnsKey() { return 'Dashboard.Nominee'; }
    protected getDialogType() { return NomineeDialog; }
    protected getIdProperty() { return NomineeRow.idProperty; }
    protected getInsertPermission() { return NomineeRow.insertPermission; }
    protected getLocalTextPrefix() { return NomineeRow.localTextPrefix; }
    protected getService() { return NomineeService.baseUrl; }

    constructor(container: JQuery) {
        super(container);
    }

    ****protected getSlickOptions(): Slick.GridOptions {
        let opt = super.getSlickOptions();
        opt.rowHeight = 150;
        return opt;
    }****  (this what i add )

    getButtons() {
        var buttons = super.getButtons();
        var MyRow = NomineeRow.Fields;

        buttons.push(KRVoting.Common.ExcelExportHelper.createToolButton({
            grid: this,
            onViewSubmit: () => this.onViewSubmit(),
            service: NomineeService.baseUrl + '/ListExcel',
            separator: true,
           // hint: "This is the Hint",
          //  title: "This is the Title"
        }));

        return buttons;
    } 
    
    protected getQuickSearchFields():
      Serenity.QuickSearchField[] {
        return [
           { name: "", title: "all" },
            { name: "full_name", title: "Full name" },
            { name: "Email", title: "Email" },
           { name: "username", title: "Username" },
            { name: "position", title: "Position" }];
    }
}

}

but i dont know how to edit the index

here is my index page:
@{
ViewData["Title"] = Serenity.LocalText.Get("Db.Dashboard.Nominee.EntityPlural");
}

<script type="text/javascript"> jQuery(function () { new KRVoting.Dashboard.NomineeGrid($('#GridDiv'), {}).init(); Q.initFullHeightGridPage($('#GridDiv')); }); </script>

[VictorTomaili]

@samaremad you need add formatter for show images inline.

https://github.com/serenity-is/Serene/blob/master/Serene/Serene.Core/Modules/BasicSamples/Grids/InlineImageInGrid/InlineImageFormatter.ts

https://github.com/serenity-is/Serene/blob/master/Serene/Serene.Core/Modules/BasicSamples/Grids/InlineImageInGrid/InlineImageInGridColumns.cs#L16

then adjust the height of row for make images visible well
https://github.com/serenity-is/Serene/blob/master/Serene/Serene.Core/Modules/BasicSamples/Grids/InlineImageInGrid/InlineImageInGrid.ts#L20