Untitled

@page
@model Indotalent.Pages.Warehouses.WarehouseListModel
@{
    Layout = "~/Pages/Shared/Dashmin/_Admin.cshtml";
    var statusMessage = Model.StatusMessage;
    Model.StatusMessage = string.Empty;
}

@using Microsoft.AspNetCore.Mvc.Localization

@inject IViewLocalizer Localizer

<style>
    /* General table styling */
    #Grid {
        font-family: Arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        border: 1px solid #e0e0e0;
    }

    .e-grid .e-headercell, .e-grid .e-rowcell {
        padding: 12px 8px;
        text-align: left;
        vertical-align: middle;
    }

    .e-grid .e-row {
        border-bottom: 1px solid #e0e0e0;
    }

    .e-grid .e-headercontent, .e-grid .e-headercell {
        background-color: #f5f5f5;
        font-weight: bold;
        color: #333;
    }

    /* Toolbar buttons styling */
    .e-toolbar-items .e-tbar-btn, .e-toolbar-items .e-tbar-btn-text {
        background-color: #007bff;
        color: white;
        border-radius: 4px;
        padding: 8px 12px;
        margin-right: 5px;
        font-size: 14px;
        font-weight: 500;
    }

    .e-toolbar-items .e-tbar-btn:hover {
        background-color: #0056b3;
    }

    /* Pagination buttons styling */
    .e-pager .e-numericcontainer .e-link {
        padding: 8px 12px;
        margin: 0 5px;
        background-color: #007bff;
        color: white;
        border-radius: 4px;
    }

    .e-pager .e-numericcontainer .e-link:hover {
        background-color: #0056b3;
    }

    /* Table row hover effect */
    .e-grid .e-row:hover {
        background-color: #f1f1f1;
    }

    /* Align columns for better readability */
    .e-grid .e-rowcell, .e-grid .e-headercell {
        text-align: center;
    }
</style>
<div class="row">
    <div class="col-12">
        <div id="Grid"></div>
    </div>
</div>
 @section Scripts {
    <script>

      var grid = new ej.grids.Grid({
    height: getDashminGridHeight(),
    dataSource: new ej.data.DataManager({
        url: '/odata/Warehouse',
        adaptor: new ej.data.ODataV4Adaptor()
    }),
    allowFiltering: true,
    allowSorting: true,
    allowSelection: true,
    
    allowTextWrap: true,
    allowResizing: true,
    allowPaging: true,
    allowExcelExport: true,
    filterSettings: { type: 'CheckBox' },
    sortSettings: { columns: [{ field: 'CreatedAtUtc', direction: 'Descending' }] },
    pageSettings: { currentPage: 1, pageSize: 50, pageSizes: ["10", "20", "50", "100", "200", "All"] },
    selectionSettings: { persistSelection: true, type: 'Single' },
    autoFit: true,
    showColumnMenu: true,
    gridLines: 'Horizontal',
    columns: [
        { type: 'checkbox', width: 60 },
        {
            field: 'RowGuid', isPrimaryKey: true, headerText: 'RowGuid', visible: false
        },
        { field: 'CreatedAtUtc', width: 200, format: 'yyyy-MM-dd HH:ss', textAlign: 'Left', headerText: '@Localizer["CreatedAtUtc"]', type: 'dateTime' },
        { field: 'Name', headerText: '@Localizer["Name"]', width: 100, textAlign: 'center' },
        { field: 'DevicId', headerText: '@Localizer["DevicId"]', width: 100, textAlign: 'center' },
        { field: 'ShelvesCount', headerText: '@Localizer["Shelves"]', width: 100, textAlign: 'center' },
        { field: 'FloorsCount', headerText: '@Localizer["Floors"]', width: 200, textAlign: 'center' },
        { field: 'BoxPlacesCount', headerText: '@Localizer["Box Places"]', width: 200, textAlign: 'center' },
        { field: 'AvaliableBoxPlacesCount', headerText: '@Localizer["Avaliable BoxPlaces"]', width: 200, textAlign: 'center' }
    ],
    toolbar: [
        'ExcelExport', 'Search',
        { type: 'Separator' },
        { text: '@Localizer["Add"]', tooltipText: 'Add', prefixIcon: 'e-add', id: 'AddCustom' },
        { text: '@Localizer["Edit"]', tooltipText: 'Edit', prefixIcon: 'e-edit', id: 'EditCustom' },
        { text: '@Localizer["Delete"]', tooltipText: 'Delete', prefixIcon: 'e-delete', id: 'DeleteCustom' },
        { text: '@Localizer["Generate Shelves"]', tooltipText: 'Generate Shelves', prefixIcon: 'e-add', id: 'Generate' },
    ],
    beforeDataBound: () => { },
    dataBound: function () {
        grid.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'Generate'], false);
        grid.autoFitColumns(['CreatedAtUtc', 'Name', 'SystemWarehouse', 'Description']);
    },
    rowSelected: () => {
        if (grid.getSelectedRecords().length == 1) {
            if (grid.getSelectedRecords()[0].IsEmpty == true) {
                grid.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'Generate'], true);
            } else {
                grid.toolbarModule.enableItems(['EditCustom', 'DeleteCustom'], true);
            }
        } else {
            grid.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'Generate'], false);
        }
    },
    rowDeselected: () => {
        if (grid.getSelectedRecords().length == 1) {
            grid.toolbarModule.enableItems(['EditCustom', 'DeleteCustom'], true);
        } else {
            grid.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'Generate'], false);
        }
    },
    rowSelecting: () => {
        if (grid.getSelectedRecords().length) {
            grid.clearSelection();
        }
    },
    toolbarClick: (args) => {
        // toolbarClick logic remains unchanged
    }
});

grid.appendTo('#Grid');


       
    </script>
}