ShareItGrid

Tag Helper <table>

A table with custom functionality. Can be used either with an explicit custom header row for more flexibility or without.

Attributes

<table>

bool ShareitGrid

This makes the table a ShareItGrid. If not set then all functionality for this and child tags will be ignored. This is a required field.

ShareItGrid ShareItGridModel

The ShareItGrid helper class object to be passed to the grid which contains the data model in it. This is a required field.

string RowIdName

Default: "id"

The property name used to post back to the edit action for the primary key id field.

string DeleteTypeName

Default: "delete"

The property name used to post back to the delete action to designate if this is "delete" or "undelete".

string DeleteConfirmation

Default: "Are you sure you want to delete this item"

The confirmation text displayed when deleting.

string UnDeleteConfirmation

Default: "Are you sure you want to undelete this item"

The confirmation text displayed when undeleting.

string Action

Default: "Edit"

The action to call when Add or Edit button is pressed.

bool AddButton

Default: true

Show an Add button. Only used if no explicit header row supplied.

string AddAction

The action to call when Add button is pressed. Overrides the Action property only for Add. Only used if no explicit header row supplied.

string AddId

An id to add to the Add button. Only used if no explicit header row supplied.

bool ShowCount

Default: true

Show the count in the footer.

bool CountPagingSeparateLines

Default: false

Separate the paging and count lines.

bool AutoShowPaging

Default: true

Hide the paging controls until there is more than 1 page.

bool StickyHeader

Default: false

Makes the top header row sticky for when using long row numbers.

string StickyHeaderBodyHeight

Default: 80vh

Change the default height of the grid when using sticky headers.

<th>

bool AddButton

Inserts an "Add" icon into this header field before any child content.

string AddAction

Default: "Edit"

The action URL to post back to when pressing the Add button.

string AddId

If exists then use this primary key Id for the new entry. If null then automatically create one.

<sort>

Child of <th>. Sort this column by clicking on the contents of this tag.

string Field

The data source field name to sort.

Directions Direction

Which direction to sort by. If null then start with Ascending.

bool ShowIcon

Default: true

Show the sorted direction icon.


        public enum Directions { Asc, Desc, None }

<tr>

string RowId

If exists then use this primary key Id for edits and deletes on this row. This can be overridden by child objects.

<td>

bool DeleteButton

Inserts a "Delete" icon into this field before any child content.

string DeleteAction

Default: "Delete"

The action URL to post back to when pressing the Delete or Undelete button.

string DeleteId

If exists then use this primary key Id for the delete or undelete. If null then use the RowId in the <tr> tag.

bool Active

Is this record currently active or deleted. Used to determine which icon to render.

string HeaderText

The text to put in the column header. Only used if no explicit header row supplied

string HeaderSortField

The fieldname to use when sorting by this column. Only used if no explicit header row supplied

<edit>

Child of <td>. Edit this row by clicking on the contents of this tag.

string EditId

If exists then use this primary key Id for the edit. If null then use the RowId in the <tr> tag.

string EditAction

The action URL to post back to when pressing the Edit button. Overrides the Action property only for Edit.

public ShareItGrid(string tableId, HttpContext httpContext)

This helper class holds the data model and enacts sorting and paging.

string tableId

The Id string value of the <table> tag.

HttpContext httpContext

The HttpContext to pass to the control.

bool AllowPaging

Default: true

Does this grid allow paging.

int PageSize

Default: 30

Number of rows per page.

int PageNumsPageSize

Default: 10

The number of page number links to display in the footer at a time for each "page number page".

<table-add>

Shows an Add button somewhere on the page that acts as an Add button for the specified grid.

string Text

Default: "Add"

The text to display on the button.

string ShareItGridId

The Id of the grid to act on behalf of.

string Class

CSS class to add to the button.

<table-ajax-grid>

Loads a table via ajax and all paging and sorting operations.

string ShareItGridAjaxUrl

The url for rendering the grid.

string ControlIds

A comma separated list of control ids to use in the POST request.

string FilterId

The id of a filter to use to filter this grid. This prevents other filters intended for other grids on the same page from acting on this grid.

List<ExtraParameter> ExtraParameters

A list of Extra Parameters to pass to the child grid.

bool ReadOnly

Make the child grid read only.

bool ManualLoad

Do not automatically populate the grid. This is used to allow another event or javascript to call ShareItLibrary.ShareItGrid.AjaxLoad(gridId) when ready to load the grid.

string ChildId

Provide a reference to the child grid. If this exists then sorting and paging will be kept across HTML page refreshes for the child grid.

string LibraryUrl

Default: "/lib/shareit-library/images/"

The location of the waiting gif for when the grid is refreshing.

Javascript

event loaded

Tiggered when an Ajax grid is loaded. For Ajax grid use the parent Ajax grid id. $('#Grid').on('loaded', Function)

event delete

Tiggered when a delete or undelete button is pressed in the grid. For Ajax grid use the parent Ajax grid id. $('#Grid').on('delete', Function)

string ControlIds

A comma separated list of control ids to use in the POST request.

ShareItLibrary.ShareItGrid.AjaxLoad(gridId)

Loads or reloads the grid with the id gridId.

$.fn.SiGridSelectAll

Selects all items on the grid and stores their values in the indexedDb. $('#MyGrid').SiGridSelectAll();

$.fn.SiGridCacheValues

Returns all selected values on a grid that are stored in indexedDb. var x = $('#MyGrid').SiGridCacheValues();

$.fn.SiGridFieldCacheRemoveAsync

Clears the passed selected values on a grid that are stored in indexedDb. $('#MyGrid').SiGridFieldCacheRemoveAsync(rowIds);

$.fn.SiGridClearFieldCacheValues

Clears all selected values on a grid that are stored in indexedDb. $('#MyGrid').SiGridClearFieldCacheValues();

$.fn.SiGridAjaxLoad

Refreshes a grid. $('#MyGrid').SiGridAjaxLoad();

Simple Grid

Razor@model ShareItGrid

<table shareit-grid="true" id="MyGrid" share-it-grid-model="@Model">
    @{
        var data = Model.ModelGet<MyModel>();
    }
    <tbody>
        @foreach (var m in data)
        {
            <tr row-id="@m.Id">
                <td header-text="Name Field" header-sort-field="Name"><edit>@m.Name</edit></td>
                <td header-text="Description">@m.Description</td>
                <td header-text="Note">@m.Note</td>
                <td delete-button="true" delete-action="Delete" active="@m.Active"></td>
            </tr>
        }
    </tbody>
</table>

Simple Grid with extra rows and custom footer

Razor@model ShareItGrid

<table shareit-grid="true" id="MyGrid" share-it-grid-model="@Model">
    @{
        var data = Model.ModelGet<MyModel>();
    }
    <tbody>
        @foreach (var m in data)
        {
            <tr row-id="@m.Id">
                <td header-text="Name Field" header-sort-field="Name"><edit>@m.Name</edit></td>
                <td header-text="Description">@m.Description</td>
                <td header-text="Note">@m.Note</td>
                <td delete-button="true" delete-action="Delete" active="@m.Active"></td>
            </tr>
        }

        <tr>
            <td>Not data driven row</td>
            <td>Last row</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Count:</td>
            <td>@data.Count()</td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

Full example

Razor@model ShareItGrid

<table shareit-grid="true" id="MyGrid" share-it-grid-model="@Model">
    <thead>
        <tr>
            <th><sort field="Name">Name</sort></th>
            <th>Description</th>
            <th>Note</th>
            <th add-button="true"></th>
        </tr>
    </thead>

    @{
        var data = Model.ModelGet<MyModel>();
    }
    <tbody>
        @foreach (var m in data)
        {
            <tr row-id="@m.Id">
                <td><edit>@m.Name</edit></td>
                <td>@m.Description</td>
                <td>@m.Note</td>
                <td delete-button="true" delete-action="Delete" active="@m.Active"></td>
            </tr>
        }

        <tr>
            <td>Not data driven row</td>
            <td>Last row</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Count:</td>
            <td>@data.Count()</td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

C#

var myData = ... Get IQueryable Data Source

var sig = new ShareItGrid("MyGrid", HttpContext)

{

PageSize = 100,

PageNumsPageSize = 20

};

sig.Process(myData);

return View(sig);

Ajax Grid

Razor - MyGridGrid.cshtml@model ShareItGrid

<table shareit-grid="true" id="MyGrid" share-it-grid-model="@Model">
    @{
        var data = Model.ModelGet<MyModel>();
    }
    <tbody>
        @foreach (var m in data)
        {
            <tr row-id="@m.Id">
                <td><edit>@m.Name</edit></td>
                <td>@m.Description</td>
                <td>@m.Note</td>
                <td delete-button="true" delete-action="Delete" active="@m.Active"></td>
            </tr>
        }
    </tbody>
</table>

Razor - MainPage.cshtml

<table-ajax-grid id="MyGridGrid" share-it-grid-ajax-url="/Controller/MyGridGrid" control-ids="MyId"></table-ajax-grid>

C#[HttpPost]
public IActionResult MyGrid(Guid myId)
{
    var sig = new ShareItGrid("MyGrid", HttpContext, db.MyTable.Where(e => e.MyId == myId).OrderBy(e => e.MySortField));
    return PartialView(data);
}