GridView With SharePoint List Style

Standard

Working With SharePoint GridView, how to create menu items links with dynamic flags

The good thing that SharePoint offers is SharePoint controls , SharePoint controls is an asp.net web controls with additional options that appear like SharePoint portals look and feel , its give your controls a good look and easy to enhance just understand it !

This topic cover how to create your first SharePoint gridview with menu items, there is many options you can find it like sorting menu, filtering columns and more but its out of this article scope try to discover it or we will discuss it in another topics.

Overview

First of all add namespace SharePoint.dll in your solution then open your ASPX page or user control and add register tag to SharePoint web controls namespace

Now you can add your SharePoint gridview easily like a normal asp.net gridview

SharePoint GridView

Inside columns tag you can add a normal asp.net bound field , button field , Image field ,etc… but here you can also add two additional fields  SPBoundField and SPMenuField

SPBoundField like normal BoundField but it got its header style from the SharePoint css style itself and it appears like the header of any SharePoint list like this

SPMenuField is the column which appear like the SharePoint lists view web parts let’s take a look

I think it has a very good look do lets describe

How to

Items menu contains two parts, first part the menu template and second part the menu field inside the grid view so the first thing is to create the menu template, it contains links, icons, URLs and all things related to the menu then when we create a menu field column (SPMenuField) inside your SharePoint gridview just we will till it we use this template let’s take a look at the template code

As we see you can add your items to the menu by adding MenuItemTemplate element inside MenuTemplate Element.

MenuTemplate most important attributes

Attrbuite Description
EnableSorting This attribute will enable sorting in the column which will use this template

MenuItemTemplate Most important attributes

Attribute Description
Text Link text that’s appear in the menu
ImageUrl icon URL that will appear beside  the link
Sequence The order of the item to appear in the menu (e.g 2 means it will appear as a second item in the menu)
AuthenticationRestrications This attributes allow this item to appear for 3 types of the users and these is its values 

-AllUsers

-AnonoymousUsersOnly

-AuthnticatedUsersOnly

CientOnClickNavigateUrl url to the page which you want to make the item linked to it
ClientOnClickScript You can add your custom javascript calling here and it will execute when the user click on the link

Now we will use this template inside our gridview with SPMenuField like this

How to make make links with dynamic flags (Query Strings ) on your menu item

We will create our paramter  inside the Menu Field column then pass it to it’s template

This attribute TokenNameAndValueFields takes parameters which you want to pass to the template in this example we will see FIELDID=ID   ,FIELDID  is our variable that’s carry the field value and ID is a data field from the data source of this gridview  , you can many variables just separate   between them by   “ , ”

For example FIELDID=ID, FIELDTITLE=Title, etc….

Now we will use FIELDID in our item template as a query string variable, see this figure

We added attribute ClientOnClickNavigateUrl which contain the URL that the user will go to it when he clicks on this item , for example we put here the URL for view item default page in SharePoint , it takes item id as a query string variable as we see ?ID=%FIELDID%  , we added here our variable between %% now SharePoint gridview will render this to be ID=item id

Note: if you want to make your item in gridview as a link (Without opening the menu item) just add NavigateUrlFormat in your Menu field element inside gridview itself like this

Now if you click on the item inside gridview itself we will go to Yahoo , if you open the menu you can choose between your items

Suppose you want to add a query string variable here in your link also ! it’s easy     just we will add an attribute inside Menu Field named NavigateUrlFields it takes the names of data fields you want to add it inisde your link take a look its easy !

Title is the data field and title={0} means get the first parameter you can add more just separate between them also with “ , ” character for example Title , ID , etc…. then add in your link    title={0}&id={1}&etc…

Enjoy!

Advertisements

5 thoughts on “GridView With SharePoint List Style

  1. Howdy! I understand this is kind of off-topic however I needed to ask.
    Does running a well-established website like yours take a lot of work?

    I’m brand new to writing a blog however I do write in my journal everyday. I’d
    like to start a blog so I can easily share my own experience and views
    online. Please let me know if you have any ideas or tips for brand new aspiring blog owners.

    Thankyou!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s