1.0.6 • Published 3 years ago

aspnet-gridview v1.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

aspnet-gridview

A simple JavaScript utility for generate grid view in asp.net syntax

Installation

Install with npm:

npm:

npm install aspnet-gridview --save

Importing

import { GridView, Columns, BoundField } from "aspnet-gridview";

Then...

Usage

import { GridView, Columns, BoundField } from "aspnet-gridview";

function App() {
  let sampleDataSource = [
    { Name: "Rajveer", Id: 104, Salary: 10000, Currency: "GBP" },
    { Name: "David", Id: 105, Salary: 15000, Currency: "GBP" },
    { Name: "Mohan", Id: 106, Salary: 12000, Currency: "GBP" },
    { Name: "Rajiv", Id: 107, Salary: 20000, Currency: "GBP" },
    { Name: "Shubham", Id: 108, Salary: 10000, Currency: "GBP" },
  ];
  const onButtonClick = (name, salary) => {
    alert(`${name} has ${salary}`);
  };
  return (
    <div style={{ padding: "10px" }}>
      <GridView
        id="grdHelloWorld"
        dataSource={sampleDataSource}
        emptyDataText="no data"
        width={500}
        allowPaging={true}
        allowSorting={true}
      >
        <Columns>
          <BoundField
            headerText="Id"
            dataField="Id"
            sortExpression="Id"
            visible={false}
          />
          <BoundField
            headerText="Name"
            dataField="Name"
            sortExpression="Name"
          />
          <BoundField
            headerText="Salary (INR)"
            dataField="Salary"
            sortExpression="Salary"
            itemStyle={{ textAlign: "right" }}
          />
          <BoundField
            headerText="Calculated Field"
            dataExpression={({ Salary }) => `${(Salary * 73.5).toFixed(2)}`}
            itemStyle={{ textAlign: "right" }}
          />
          <BoundField
            headerText="Action"
            dataExpression={(objRow) => (
              <button onClick={() => onButtonClick(objRow.Name, objRow.Salary)}>
                Click me
              </button>
            )}
          />
        </Columns>
      </GridView>
    </div>
  );
}
export default App;

Options

aspnet-gridview support paging and sorting

For libraries, we also recommend leaving it in dependencies:

   "dependencies": {
    "classnames": "^2.2.6",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },

License

MIT. Copyright (c) 2020 Rajveer Singh.

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago