29 Sep 2010

ASP.Net GridView Context Menu

Written by Russell. Posted in All, Technology

This post will cover how to add a context menu to a GridView in ASP.Net utilizing jQuery. Once your site is setup to utilize jQuery, you can simply include a new style sheet and script file and get awesome functionality fairly easy! Take a look at this site here to download the required files and their code samples. Mine below shows how I used this on a GridView in ASP.NET…

GridView

&lt;asp:GridView ID="gvResults" runat="server" DataKeyNames="PERSONID" AutoGenerateColumns="False"
    CellPadding="4" ForeColor="#333333" OnSelectedIndexChanged="gvResults_SelectedIndexChanged"
    Width="100%" OnRowDataBound="gvResults_RowDataBound" meta:resourcekey="gvResultsResource1"&gt;
    &lt;AlternatingRowStyle BackColor="White" ForeColor="#284775" /&gt;
    &lt;Columns&gt;
        &lt;asp:BoundField DataField="PERSONID" HeaderText="PERSON ID" meta:resourcekey="BoundFieldResource1" /&gt;
        &lt;asp:BoundField DataField="FNAME" HeaderText="FIRST NAME" meta:resourcekey="BoundFieldResource2" /&gt;
        &lt;asp:BoundField DataField="LNAME" HeaderText="LAST NAME" meta:resourcekey="BoundFieldResource3" /&gt;
        &lt;asp:BoundField DataField="DOB" HeaderText="DATE OF BIRTH" HtmlEncode="False" meta:resourcekey="BoundFieldResource4" /&gt;
    &lt;/Columns&gt;
    &lt;EditRowStyle BackColor="#999999" /&gt;
    &lt;EmptyDataTemplate&gt;
        &lt;span style="color: Red;"&gt;
            &lt;asp:Literal ID="litErrorNoResultsFound" runat="server" EnableViewState="False" meta:resourcekey="litErrorNoResultsFoundResource1"
                OnInit="litErrorNoResultsFound_Init"&gt;&lt;/asp:Literal&gt;
        &lt;/span&gt;
    &lt;/EmptyDataTemplate&gt;
    &lt;FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
    &lt;HeaderStyle BackColor="#3494CC" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" /&gt;
    &lt;PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /&gt;
    &lt;RowStyle BackColor="#F7F6F3" ForeColor="#333333" /&gt;
    &lt;SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /&gt;
&lt;/asp:GridView&gt;

<asp:GridView ID="gvResults" runat="server" DataKeyNames="PERSONID" AutoGenerateColumns="False"

CellPadding="4" ForeColor="#333333" OnSelectedIndexChanged="gvResults_SelectedIndexChanged"

Width="100%" OnRowDataBound="gvResults_RowDataBound" meta:resourcekey="gvResultsResource1">

<asp:BoundField DataField="PERSONID" HeaderText="PERSON ID" meta:resourcekey="BoundFieldResource1" />

<asp:BoundField DataField="FNAME" HeaderText="FIRST NAME" meta:resourcekey="BoundFieldResource2" />

<asp:BoundField DataField="LNAME" HeaderText="LAST NAME" meta:resourcekey="BoundFieldResource3" />

<asp:BoundField DataField="DOB" HeaderText="DATE OF BIRTH" HtmlEncode="False" meta:resourcekey="BoundFieldResource4" />

</Columns>

<asp:Literal ID="litErrorNoResultsFound" runat="server" EnableViewState="False" meta:resourcekey="litErrorNoResultsFoundResource1"

OnInit="litErrorNoResultsFound_Init"></asp:Literal>

</span>

</EmptyDataTemplate>

</asp:GridView>

jQuery Initialization

        $(document).ready(function() {
            $(".recentRow").contextMenu({ menu: 'recentMenu' }, function(action, el, pos) { contextMenuWork(action, el, pos); });

        function contextMenuWork(action, el, pos) {
            var personid = $(el).find("#PersonID").text();
            switch (action) {
                case "viewContact":
                {
                    window.location = "Person.aspx?id=" + personid;
                    break;
                }
                case "viewTasks":
                {
                    window.location = "ClientTasks.aspx?id=" + personid;
                    break;
                }
            }

$(document).ready(function() {

$(".recentRow").contextMenu({ menu: 'recentMenu' }, function(action, el, pos) { contextMenuWork(action, el, pos); });

function contextMenuWork(action, el, pos) {

var personid = $(el).find("#PersonID").text();

switch (action) {

case "viewContact":

{

window.location = "Person.aspx?id=" + personid;

break;

}

case "viewTasks":

{

window.location = "ClientTasks.aspx?id=" + personid;

break;

}

28 Sep 2010

ASP.Net MVC MarkItUp Rich Text Editor

Written by Russell. Posted in All, Technology

MarkItUp identifies itself as being the Universal Markup Editor and from as far as I can tell, this is probably true! It was very easy to integrate the jQuery editor into my new Blog Admin views. I will try to illustrate how I was able to do this below. In addition to the jQuery MarkItUp files, you will also need to download the MarkUp to HTML parser/enhancer of your choice. I used the MarkdownSharp framework which is what the makes of StackOverflow.com have recently converted to an Open Source project.

Download the MarkItUp Files and MarkDown Sharp

You’ll need to take a look at the MarkItUp Website and download a couple of different files. - markItUp! pack 1.1.6 - Basic MarkDown Set - MarkDownSharp

Include MarkItUp Folder In Your Project

Now that you have the files downloaded, you need to deploy them to your MVC site. I have deployed the MarkItUp folder to my Scripts directory. The MarkItUp folder contains 3 different folders (sets, skins, and templates) and you’ll find a couple of .js files in the root of the folder. Once the MarkItUp folder is in your project, open up the MarkDown file that you downloaded above. You will need to deploy this folder into the Sets folder described above in your project.

Posts Tagged ‘UI’

GridView

Menu

jQuery Initialization

Download the MarkItUp Files and MarkDown Sharp

Include MarkItUp Folder In Your Project