Custom Grid Library

This package (KUICC: Kendo UI Core Components) provides web component wrappers for Kendo UI Core widgets. All functionalities of Kendo UI Core except AngularJS are supported.

Important Note This package is NOT published by Progress Software Corporation, the owner of Kendo UI frameworks, and so no supports are provided from the company.

Stable version 0.0.83

Features

1. Main component: custom-grid

1.1. [dataSource]="<<Array_any>>" - The main array over which the grid is build. 1.2. dataSourcePk = "<<Obj_string>>" - Identification key of the dataSource in question. It is used as a unique identifier in the table, to find certain information, as well as to process details at the row level. 1.3. width = "<>", height = "<>" - The basic dimension of the grid. Can be used in pixels, %, em or viewport units. 1.4. overflowX = "<> & overflowY = "<>" - The way of sizing the container in wich the grid is held. It can have 3 values: * scroll = scroll inside the grid container when the size of the elements in the grid is larger than the size of the table. * hidden = the content of the grid is hidden if the size of the table is smaller than the size of the elements used inside it. * auto = scrolling behavior is set automatically based on the dimensions of the grid, and elements inside it. 1.5. [(filters)]="<>" - Object containing the filters in the grid's header. 1.6. (triggerFilters) = <>($event) - An event to whom we associate an callback function that will be called hen a filters is completed. The callback function should contain a logic to determin the filtering method. Below is an example of implementation:

filtersHandler(event: any){
    switch (event.filterMethod) {
    case filterMethod.local:
        this.filteredData = this.testData.values;
        let filterObj = event.filters;
        Object.keys(filterObj).forEach((element, index) => {
        var filter: string = Object.values(filterObj)[index] != null ? Object.values(filterObj)[index].toString() : null;
        if (!(filter == "" || filter == null)) {
            this.filteredData = this.testData.values.filter(x => { return x[element] && x[element].toLowerCase().includes(filter.toLowerCase()) });
        }
        });
        break;
    case filterMethod.server:
        console.log("NotImplemented");
        break;
    default: console.log("Invalid filter logic");
        return;
    }
}

1.7. [filterMethod] = "<>" - This parameter help us differentiate the filtering method: * filterMethod.local = filtering will be done on the client-side, with the internal logic, see previous example. * filterMethod.server = filtering will be done on the client, the filtering logic being develop server-side, in the example above, in the block for filterMethod.server, the "get" function will be called with the parameters "filters".

1.8. [popoverConfiguration] = "<>" - Parameter that configures the pop-over at row level. Generic form of the object : popoverConfig = {translation: string, action: string}. Action is an constant to identify witch function should be called. This parameter is used in pair with popoverHandler. An example of implementation is presented below:

popoverHandler(event: any) {
    if (event) {
    switch (event.action) {
        case 'popoverAction-approve':
        this.approve(event.id);
        break;
        case 'popoverAction-reject':
        this.reject(event.id);
        break;
        default: return;
    }
    }      
}

1.9. (scroll) = "<>($event)" - This parameter gives us the possibily to apply the "infinite-scroll" feature. Pay attention!: To use This property we have to make sure our datasource is paged. An example of implementation:

scrollHandler (event: any) {
    if (((window.scrollY + window.innerHeight) * 1.3> = document.body.clientHeight) && this.dataLoaded && this.hasMore) {
    this.simulateApiCall (false); // loadData method
    }
}

1.10. rowHasDetails = "<<Obj_boolean>>" - This parameters determines whether the grid will have the "details expand" feature.

1.11. [detailsLoadMethod] = "<>" - With this parameter we determine if the row details are provided directly or if a separate method to load details data is needed. *server *local

1.12. [rowDetails] = "<>" - Support object that contains the details data's.

1.13. (detailsToggled) = "<>($event)" - This function is called when you expand the details section. eg:

handlerRowToggled(event: string){
    this._dataService.GetDetailsByRowId(event).subscribe(result => {
            this.rowDetails = result;
        });
    }
}

1.14. [rowChecable] = "<<Obj_boolean>>" - This parameter determines if the grid has the "row-check" feature. If this parameter is set to true, you should provide a support object to bind the selected rows into that.

1.15. [(checkedRows)] = "<>" - Support object for "row-check" feature.

1.16. [disabledRows] = "<<Obj_array>>" - Support object to mark the read-only rows in the grid. This array contains the id's [dataSourcePK] of the rows you want to disable.

1.17. [disabledReasons] = "<>" - This parameters provide further more informations about disabled rows. eg:

    disabledReasons: any = [
        { title: "ReasonTitle", description: "Reason description" },
        { title: "ReasonTitle2", description: "ReasonDescription2" }
    ]

Secondary component custom-grid-column

2.1. [title] = "<>" - The title displayed in the grid header. Preferably key in a translation json. 2.2. [field] = "<<value_string>>" - The name of the column in dataSource, to identify the data displayed in that certain column. 2.3. width = "<>" - This property represents the value of the width of each column. If this property is not set, the columns will be dimensioned according to the width of the grid. 2.4. redirectLink = "<<value_string>>" - The property sets the route you will be redirected at click on that cell. 2.5. columnType = "<> - Sets the column data type displayed: * date - calendar date depending on the chosen culture * text (default) - string * number - decimal number, 2 decimal points * ng-switcher

2.6. [disabled] = "<<Obj_boolean>>" - Read-only at column level.

2.7. [stateClasses] = "<>" - Sets the specified class based on the evaluation of the expression.

stateClasses = [
    { className: "state-card-approved", expression: "row.stateCode == 'Approved'" },
    { className: "state-card-canceled", expression: "row.stateCode == 'Canceled'" },
    { className: "state-card-pending", expression: "row.stateCode == 'PendingApproval'" },
    { className: "state-card-nostatus", expression: "row.stateCode == 'Initialized'" },
]

with the class: 

.state-card-approved {
    display: inherit;
    width: 113px;  
    border-radius: 6px;
    background-color: rgba(100, 200, 188, 0.1);
    color: #000;
    padding: 6px;
    font-size: 14px;
    text-align: center;
}

2.8. [hasPageSizeSelection]="<<Obj_boolean>> - If set true, you will be able to choose from a dropdown how many records is showed in the page.

2.9 detailsTitle = "<>" - Details title

2.10 (action) = "<<handlerFunction($event)>> - Callback to an internal function that executes at cell click.

2.11 missingText = "<> - Lable that is displayed if there are no data to display in the cell. If this parameter is not set and theres no data to render then the cell will be empty.

Example of usage:

<div class="list-container">
    <custom-grid [dataSource]="companylistDatasource"
                dataSourcePK="id"
                noDataImg="../../../assets/img/startup.svg"
                (scroll)="scrollHandler()"
                [(filters)]="filters"
                (triggerFilters)="filterHandler($event)"
                [filterMethod]="filterMethod.server"
                [popoverConfiguration]="popoverConfig" 
                (popOver)="popoverHandler($event)"
                [rowHasDetails]="false"
                width="1140px"
                [hasPageSizeSelection] = "true"
    >
        <custom-grid-column [title]="'companyList.name'" field="name" width="166px" redirectLink="company/saveCompany">
        </custom-grid-column>
        <custom-grid-column [title]="'companyList.uniqueIdentifier'" field="uniqueIdentifier" width="170px">
        </custom-grid-column>
        <custom-grid-column [title]="'companyList.address'" field="address" width="170px">
        </custom-grid-column>
        <custom-grid-column [title]="'companyList.contactPerson'" field="contactPerson" width="116px">
        </custom-grid-column>
        <custom-grid-column [title]="'companyList.toActivate'" field="toActivate" width="176px" [hasFilter]="false" [stateClasses]="stateClasses">
        </custom-grid-column>
    </custom-grid>
</div>