1079 Views
6 minutes read
Categories
Office 365 SharePoint

Kendo Grids vs UI Fabric Grids in SPFx

Most SPFx applications have grids in various modules like dashboard, tasks, to-dos. There are various third-party grids that can be used in these areas. I have used both UI fabric and Kendo grids in these scenarios. Both are good third-party controls and come with their pros and cons so based on requirement you should decide which one to use.

Application/Usage Areas:

Kendo Grids/Office UI Fabric Grids usage areas:

  • Dashboards with different views-Task board, Project board, Resource board all these need various views for different people in different roles viewing the application. In these areas both grids can be used for viewing data with sort, filter, refinement etc features.
  • Editable list for resources /tasks/to-dos-Various applications require grids with editable columns for editing tasks, resources, adding new tasks/resources etc. Both these grids can be used in these cases.
  • Matrix representations-These grids can be used to show matrix representation of task/resource, project/resource, resource/availability mapping.
  • Timesheets-These grids can be used to represent timesheet data entry.
  • Listing Data in general-These grids can be used to display lists of data like books, projects, users, machineries etc. One can change view of these lists as per requirements.

Implementation in SPFx Projects:

Below is a set of basic steps for creating both types of grids

Steps to create Office UI Fabric grid in SPFx:

Create a sample basic grid:
  • When a SPFx project is created by default all the Office UI Fabric packages get installed. In the. tsx/.jsx file first you need to import the necessary libraries:
import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
  • Then you need to place the grid (here DetailsList) in render function:
<MarqueeSelection selection={this._selection}>
          <DetailsList
            items={items}
            columns={this._columns}
            setKey="set"
            layoutMode={DetailsListLayoutMode.justified}
            selection={this._selection}
            selectionPreservedOnEmptyClick={true}
          />
</MarqueeSelection>
  • In the above sample items is the data array for example:
this._dataItems = [];
    for (let i = 0; i < 200; i++) {
      this._ dataItems.push({
        key: i,
        name: 'Data ' + i,
        value: i
      });
    }
  • In the above sample this._columns is the list of columns for this grid:
this._columns = [
      { key: 'col1', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 150, isResizable: true },
      { key: 'col2', name: 'Value', fieldName: 'value', minWidth: 100, maxWidth: 150, isResizable: true }
    ]; 
Kendo Grids vs UI Fabric Grids in SPFx

Steps to create Kendo React grid in SPFx:

Create a sample basic grid:
  • Kendo Grid packages need to be installed in an SPFx application:
npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs
  • In the. tsx/.jsx file first you need to import the necessary libraries after installing the above:
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
  • Then you need to place the grid in render function:
<Grid
                    style={{ height: '400px' }}
                    data={this.state.gridData}
                >
                    <Column field="ProdID" title="ID" width="40px" />
                    <Column field="ProdName" title="Name" width="250px" />
                    
                </Grid>
  • In the above sample state.gridData is the data array for example:
[{
    "ProdID" : 1,
    "ProdName" : "Tea",
    
}, {
    "ProdID" : 2,
    "ProdName" : "Coffee",
    
}, {
    "ProdID" : 3,
    "ProdName" : "Milk",
    
}
Kendo Grids vs UI Fabric Grids in SPFx

Comparison between Office UI Fabric and Kendo grid:

Office UI Fabric grid:

Pros:

  • It comes with SPFx package installation. No extra packages need to be installed.
  • The look and feel of Office UI Fabric is consistent with SharePoint look and feel. So, UI wise no extra customization is required.
  • The controls in Office UI Fabric have features consistent with similar in-built controls in SharePoint. So, when used in SPFx webparts with another SharePoint provided webparts it blends in.
  • Documentation for the various Office UI fabric controls is adequate.

Cons:

  • It is heavy weight. As a result, the Office UI Fabric controls load slower.
  • Customization of controls is tricky as not all events are exposed.
  • Need to write too much code (long code) for simple features.
  • Not all features are available. For example, I had to choose Kendo over Office UI fabric as I had a requirement for nested grids which was not available in UI Fabric.

Kendo React grid:

Pros:

  • It is light weight. The controls load very fast and have good performance.
  • Coding is not at all lengthy for Kendo UI controls.
  • A lot more controls are available in Kendo than Office UI fabric.
  • More events are exposed for customization. On figuring out the correct control and even the customization of code is easy.
  • Has different versions for jQuery, angular and so can work in different platforms.

Cons:

  • It needs to be installed separately and added to the package. Although trial version is free, the consumer version is chargeable.
  • The look and feel needs to be modified with CSS to make it identical with SharePoint controls.
  • The features of the controls are not exactly like in-built SharePoint controls and hence customization is required.
  • Documentation of the API is not at all good. So, although a lot more controls and events are available it becomes difficult to find the correct ones to use.

Conclusion

Based on project requirements, budgets, team etc you should wisely choose the third-party libraries. Both Office Ui fabric and Kendo are good in their own way. So, it is up to your judgement to decide which one to use.

Debopoma Chaudhury

About Debopoma Chaudhury

Debopoma has around 8+ years of experience in Software Development. She has expertise in Estimation, Analysis, Design, Development and Testing using C#, Ext.JS, Angular JS, Bootstrap, jQuery and SQL. Also, she has exposure on Microsoft technologies using AJAX, Telerik Controls, Web Application in Visual Studio 2008, ASP.Net 4.0, Bryntum Gantt and hold proficiency in Regression Analysis, Agile Methodology, Test Execution and Test Documentation.

Debopoma did her Graduation in B.Tech (Computer Science Engineering ) from St. Thomas College in 2008 and was the Gold Medalist in her University WBUT.

Prior to joining Netwoven, she was working with Infosys and Kovair Pvt. Ltd, Kolkata as Team Lead.

A native of West Bengal, she is presently living in Kolkata with her spouse. During her leisure time, she loves singing, writing short stories and travelling.

LinkedinTwitterFacebook

Leave a Reply

Your email address will not be published. Required fields are marked *