Data Grid.Custom Single Record View

Appearance

View mode
Number of cards in a row Here you can select the number of cards to be placed in a row for each of supported screen resolutions. Your current resolution is highlighted in this way.
	Large desktop
	Desktop
	Tablet
	Phone

Page size

Total record count: 21.

Records per page

This example demonstrates how to customize a Single Record View form. For this purpose you have to override the view/grid.tpl template and then bind it with the OnGetCustomTemplate event. Click the button to see the event handler code.

A more complex example of customizing this form can be found in the NBA Demo.

        protected function doGetCustomTemplate($type, $part, $mode, &$result, &$params)
        {
            if ($part == PagePart::RecordCard && $mode == PageMode::View) {   
                $result = 'custom_single_record_view.tpl';
            }
        }

<div id="pgui-view-grid">
    {include file="page_header.tpl" pageTitle=$Grid.Title}

    <div class="{if $Grid.FormLayout->isHorizontal()}form-horizontal{/if}">

        {include file="forms/actions_view.tpl" top=true isHorizontal=$Grid.FormLayout->isHorizontal()}

        <div class="row">
            <div class="col-md-12 js-message-container"></div>
            <div class="clearfix"></div>
            <div class="form-static {if $Grid.FormLayout->isHorizontal()}form-horizontal col-lg-8{else}col-md-8 col-md-offset-2{/if}">
                <!--<Custom code>-->
                {assign var=Columns value=$Grid.FormLayout->getColumns()}
                <div class="demo-tabs-container">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#common-{$Grid.FormId}" aria-controls="common-{$Grid.FormId}" role="tab" data-toggle="tab">
                            Common
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#dimensions-display-{$Grid.FormId}" aria-controls="dimensions-display-{$Grid.FormId}" role="tab" data-toggle="tab">
                            Dimensions & Display
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#hardware-software-{$Grid.FormId}" aria-controls="hardware-software-{$Grid.FormId}" role="tab" data-toggle="tab">
                            Hardware & Software
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#camera-battery-{$Grid.FormId}" aria-controls="camera-battery-{$Grid.FormId}" role="tab" data-toggle="tab">
                            Camera & Battery
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="common-{$Grid.FormId}">
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.model_name}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.release_year}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.release_month}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.colors}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.photo}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.photo_back}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="dimensions-display-{$Grid.FormId}">
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.height}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.length}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.width}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.weight}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.display_type}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.display_size}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.display_resolution_x}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.display_resolution_y}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="hardware-software-{$Grid.FormId}">
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.chipset}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.cpu}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.gpu}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.storage_min}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.storage_max}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.os_basic}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.os_upgradable}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.web_browser}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="camera-battery-{$Grid.FormId}">
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.camera_resolution}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.camera_video_max_x}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.camera_video_max_y}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.battery_type}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.battery_standby_max_time}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.battery_talk_max_time}
                        {include file="custom_templates/custom_form_view_column.tpl" Col=$Columns.battery_music_play_max_time}
                    </div>
                </div>
                </div>
                <!--</Custom code>-->
            </div>
        </div>

        {include file="forms/actions_view.tpl" top=false isHorizontal=$Grid.FormLayout->isHorizontal()}
    </div>
</div>

	Model Name	Release Year	Os Basic
	Apple iPhone 12 Pro Max	2020	iOS 14
	Apple iPhone 12 Pro	2020	iOS 14
	Apple iPhone 12	2020	iOS 14
	Apple iPhone 12 mini	2020	iOS 14
	Apple iPhone SE (2020)	2020	iOS 13
	Apple iPhone 11 Pro Max	2019	iOS 13
	Apple iPhone 11 Pro	2019	iOS 13
	Apple iPhone 11	2019	iOS 13
	Apple iPhone XS Max	2018	iOS 12
	Apple iPhone XS	2018	iOS 12
There are no records to display