SP2010 : Color coded Calendar

Scenario:
I have used color coded calendar in MOSS 2007 but using it in SP2010 was little tricky. Here's some of the things which can make you life easier.



Steps:
1. Create or open a calendar with some data

2. Add a new column named "Color" of "Choice" type with some color choices. Color selection available

3. Add a new column named "CalendarText"
>>>> Column Type is Calculated
>>>> Insert Column Field value should be 'Color' (created in the step 2).
>>>> Data type returned = single line of text.
>>>> Formula is: ="<span style='color:white;background-color:"&Color&"'>"&Title&"</span>"

4. Modify the existing view, or create a new view of 'Calendar View' type.

5. Change the field used for the Month View Title, Day View Title and Week View Title to "CalendarText".

6. Save and exit (The HTML for "<span" will now be displayed.

Some JavaScript/Jquery will be needed to fix the HTML tags.

7. Download this text file

8. Download this DWP file

9. Save the text file in Shared Documents library. ( as of now this is hard-coded location ).If you uploading it to a different location , you will need to open DWP file and change text file location accordingly.

10. Navigate to the calendar view and edit page

11. Import the DWP webpart BELOW the calendar WP. You are all set now.

SP2010 Model window closing automatically

Scenario:
Now since SP2010 have lot of support in-build for client side programming, I thought to leverage the same for one of the Pop Up requirement. User will click a button and there will a model popup to select values , selected value will be returned back to main window.

Issue : Model window was poping up but getting closed right away.

Reason:
I was using a ASP.Net server side Button , and so I realized that it is calling the client script on button click which is poping up the model window properly but then as soon as postback happens it was getting closed.

Solution:
There are 2 solutions to it in my opinion
1. Switch to HTML input control
2. return false from the function which you are using to open model window, which will prevent the server side event.

Code:

function myCallback(dialogResult, returnValue) {alert('Hello');}

function openSPModel(
var options = {url: '/_layouts/mypage.aspx', width: 500, dialogReturnValueCallback:myCallback};

SP.UI.ModalDialog.showModalDialog(options);
return false;
}

Article:

MVC Warning users accidental delete

Scenario:
Another requirement, this was for the Grid Control. Multiple records are displayed in the grid and each record had action links to Delete the record.

Client wanted to warn user to avoid accidential delete.

Solution:
JQuery

Script:

 
 <script language="javascript" type="text/javascript">
$('div#grid a').each(function () {
      if ($(this).text() == 'Delete') {
  
         var originalUrl = this.href;

         this.href = '#';

         $(this).click(function (el) {
                      
         var yesno = confirm("Do you really want to delete.");
         if (yesno) 
         {
             window.location = originalUrl;
         }
     });
   }
});
</script>

MVC2 Warning user before navigation on filled form

Scenario:
We deal with so many system on day to day basic and every system has different navigation system. For one of our requirement we had multiple data entry screens.

Now one of the use case was what if user fill the form and click on hyperlink by mistake which will navigate him away from the page and user will use the filled in form data.
1. Client wanted that user should be warned in such case.
2. This should work on New form.
3. This should work on Edit form , that means if user will have prefilled information but should be warned only in the case of changes made.

Solution:
While we thought of multiple solutions, few worked for New but not for edit. Also we wanted kind of generic solution which works on other pages and doesn't depend upon how many textboxes / drop downs/ other controls on the form.

View ( Script ):

 <script language="javascript" type="text/javascript">

     var initialdata = $('#frmSample').serialize();

  $('#cancelLink').click(function () {
          var frmData = $('#frmSample').serialize();
                if (WarnIfDirty(frmData)) return false;
            });

    function WarnIfDirty(frmData) {
            if (initialdata != frmData) {
                return !confirm("There is unsaved data on this page. Do you wish to continue?");
            }
            else {
                return false;
            }
        }
    </script>

View ( HTML ):

                <%= Html.ActionLink("Index", "Index", "NextView", null, new { name = "cancelLink", id = "cancelLink" })%>

MVC2 Master-Child Dropdown

Scenario:
Past month I got a chance to work on MVC 2 project. While there is lot of tutorial available but a real project always have its own learning.

One of the requirement was to have parent-child drop down for Country-State information. State Drop down will be hidden until Country is selected.

Assumptions:
1. Country is the master drop down
2. State drop down will be child drop down and is wrapped in div 'StateArea'
3. On selection of Country , State drop down should get values.
4. View Model class is 'AssociatedViewModel'

Solution: JQuery was the solution. JQuery will make a ajax call to the GetStates() action in Controller to get all the states for selcted country.

View ( Script ):

   <script language="javascript" type="text/javascript">

     window.onload = function () {

     // Load the form values collection in variable
     var frmCollection = $(":input");

     $('#CountryID').change(function (e) {
               
      if ($('#CountryID').val() == 0)
                {
      $("#StateArea").hide(); // Hide the div containing state drop down
      
      }
      else 
      {
           $.ajax({
              url: "GetStates",
              data: frmCollection,
              type: "GET",
              datatype: "json",
              success: function (result) {
                            
                  $("#StateArea").show(); // Show the div containing state drop down
                            
                  $("#State").empty();

                  $("#State").append("<option selected='true'>Select State</option>");

                  $.each(result, function (i, item) 
                  {
                       $("#State").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
                   });
                        },
                   error: function (result) {
                        }
                    });
                }
            });
 </script>

View ( View HTML ):

    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm())
       {%>

 <fieldset>
<table> <tr>
                <th>
                    <b>Category Of Recommendation : </b>
                </th>
                <th>
                    <%= Html.DropDownListFor(model => model.Country, Model.Countries,
                                                              "Select Country", new { Title = "Country", style = "width:auto" })%>
                   
                </th>
            </tr>
            <tr id="specificRecommendationArea">
                <th>
                    <b>Specific Recommendation : </b>
                </th>
                <th>
                    <%= Html.DropDownListFor(model => model.State  , Model.States ,
                                                            "Select States", new { Title = "States", style = "width:auto" })%>
                 
                </th>
            </tr>
        </table>
 </fieldset>
 <%} %> 

Controller:

  public ActionResult GetSpecificRecommendations(AssociatedViewModel viewModel)
        {
  SomeDataServiceClient client = new SomeDataServiceClient();

viewModel.States = new SelectList(wcfclient.GetAllStatesByCountry(viewModel.Country.Value), "State", "Description");

  return Json(viewModel.States, JsonRequestBehavior.AllowGet);
        }
 

Article:

Left Nav Toggle with persistence

Scenario:
While now web is flooded with amazing scripts that can increase user experience, there is always a need to develop something new very specific to your client.

So my client wanted to Toggle left navigation with persistence. Simple script did the magic.

Solution Details:
You can add this script to master page to provide functionality throughout. Two main pieces which drives this are :

1. JavaScript ( to be placed in head tag )
2. HTML control/element to trigger the call to JavaScript function
3. JavaScript ( to be placed at the end of the page, so that it can execute on page load )

JavaScript( this will go in head tag ):

<script type="text/javascript" >

    function getCookie(Name) {
        var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return ""
    }

    setCookie = function setCookie(name, value) {
        document.cookie = name + "=" + value + ";path=/" //cookie value is domain wide (path=/)
    }


    function togglefn() {

        var e = document.getElementById('s4-leftpanel');
        var e1 = document.getElementById('MSO_ContentTable');

        if (e.style.display != "none") {
            setCookie('showLeftNav', 'no');
            e.style.display = "none";
            e1.style.marginLeft = "10px";
        }
        else {
            setCookie('showLeftNav', 'yes');
            e.style.display = "block";
            e1.style.marginLeft = "155px";
        }
    }
</script>

HTML element ( some where in body tag):

<a href="javascript:togglefn();">hide/show</a>

JavaScript( this will go towards page end ):

<script type="text/javascript" >
     var persistedLeftNav = getCookie('showLeftNav');

     if (persistedLeftNav == 'undefined') {
         setCookie('showLeftNav', 'yes');
     }
     else {
         if (persistedLeftNav == 'no') {
             togglefn();
         }
     }
</script>

TabControl in sharepoint

Scenario:
Tab Control for Webpart zone in sharepoint using JQuery

Insert into HTML Head:

<script type="text/javascript" src="tabcontent.js"/>
<script type="text/javascript" src="jquery.js"/>
<script type="text/javascript" src="jquery.dropshadow.js"/>
<script type="text/javascript">
 window.onload = function()
 { 
  $(".shadow").dropShadow({left: 10, top: 10, blur: 3});
  $("p").dropShadow({left: 6, top: 6, blur: 3});    
  $(".dropShadow").show();   
 } 
</script>

Insert into HTML Body:

<div>
 <ul id="tabcontrol" class="shadetabs">
  <li><a href="#" rel="Tab1" class="selected">Tab1</a></li>
  <li><a href="#" rel="Tab2">Tab2</a></li>
 </ul>
 <div style="border:1px solid gray; width:95%; margin-bottom: 1em; padding: 5px">
  <div id="Tab1" class="tabcontent">
   <WebPartPages:WebPartZone  runat="server" title="Zone 1" frametype="TitleBarOnly"><ZoneTemplate>
   </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
  <div id="Tab2" class="tabcontent">
   <WebPartPages:WebPartZone  runat="server" title="Zone 2" frametype="TitleBarOnly"><ZoneTemplate>
   </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
 </div>
</div>

Download Required JS Files:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm