How to Design the interface for the grid so that it will fully fill all the requirements of a simple or complex grid?

[Nishant]

Hi ,

I want to design a grid interface which can be used to create a simple grid or complex grid.

Requirements;-

1) Simple grid columns or grid with multiple span columns.

2) Filter, Custom Filter & Multi Select dropdown Filters

3) Columns with editable controls features like fields having text fields, dropdown fields and radio buttons.

What I have done:-

To achieve above requirements I have created below things

1) Created a grid interface.

2) Create a grid config file having different properties for different functionality. This will be loaded while creating the grid.

Issues:-

But my template file becomes too big to meet all my custom and complex requirements. It is now very difficult to maintain.

How could I design the grid interface so that all the functionality will be properly distributed and connected?

[Martin Bechev]

Hi Nishant,

I am not sure that understand the requirements correctly and what is expected behavior by the Grid. However, I will provide some useful links from our official documentation for the listed features that the Grid must support.

1) Defining Columns and Spanned Columns

2) Creating custom MultiSelect filter

3) Implement Editable Grid and Setup Custom DropDownList edit control

To provide further assistance on the case please provide some more details about what is the desired end goal and what you mean by 'Grid design interface'. Thank you in advance.

Regards,
Martin
Progress Telerik

[Nishant]

Hi Martin,

Thanks for your reply.

Q-what do you mean by 'Grid design interface'?

Ans:- I have created my grid as a directive and am using it  where I have my requirements.

Requirements:-

1)  What  is the best way to divide the template so that  it will be managed /maintained properly?

2)  How to improvise the directive so that I can add  any type of grid whether normal or complex grid?

3) How to divide the grid as per the functionality/requirement wise?

Please find the attached template file.

[Martin Bechev]

Hi Nishant,

If I understand correctly you are trying to create a common Grid implementation that can be used across different components in the application and eliminate the repetitive code in the HTML. Please correct me if I am wrong.

Generally, we strongly recommend defining the Grid and implementing its built-in features, following the official Grid documentation API.

When creating custom wrapper components or if the components are not set up in accordance with the official product documentation are considered outside of the scope of the support service. Delivering full implementation and integration with the customer’s environment or third-party products and tools based on specifications or wireframes is also considered in the scope of Professional Services.

When the Grid is wrapped into a custom component you can dynamically inject columns for example, using the <ng-content> as the following demo represents:

https://stackblitz.com/edit/angular-yn37gl-1cq4qx

or dynamically generate the columns from an array of column configurations like:

<!-- app.component.html -->
<grid-wrapper-component [columnsConfig]="config">
</grid-wrapper-component>

<!-- grid-wrapper.component.html -->
<kendo-grid
        #grid
        [kendoGridBinding]="gridData"
        [pageSize]="5"
        [sortable]="true"
        [pageable]="true"
        [filterable]="true">

        <kendo-grid-column *ngFor="let column of columnsConfig" ...>
        </kendo-grid-column>
</kendo-grid>

In case different column templates need to be defined, the developer should toggle their visibility based on a column property with *ngIf, like:

<kendo-grid-column *ngFor="let column of columnsConfig" ...>

 <ng-template *ngIf="column.field===''id'" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        Custom content
        </ng-template>
</kendo-grid-column>

Regards