Embedding css file in custom Webpart in Sharepoint


This article will show us how to use the Datalist in a webpart and embedding CSS file and classes in the webpart.

First we are creating the webpart. For that follow the below steps

  1. Create a webpart solution
  2. Create a child controls and add the related code in webpart cs file like below

        DataList dlNews;
        Label lblNewsTitle;

        protected override void CreateChildControls()
        {
            // Create and add the controls that compose the
            // user interface of the Web Part.
            Controls.Clear();

            dlNews = new DataList();

            //CSS link calling as object
            Microsoft.SharePoint.WebControls.CssLink cssLink = new Microsoft.SharePoint.WebControls.CssLink();
            cssLink.DefaultUrl = "/_layouts/1033/styles/News.css";
            this.Page.Header.Controls.Add(cssLink);
            // Create  the Datatable
            DataTable dtItem = new DataTable();
            // send the Data items from this datatable
            //News Datalist view
            fillResultsDatalist(dtItem);
     
        }
        private void fillResultsDatalist(DataTable dtItem)
        {
            // Create an instance of the DataGrid and set its
            // DataSource property to the supplied DataSet.
            dlNews = new DataList();
            dlNews.DataSource = dtItem;
            dlNews.CellPadding = 0;
            dlNews.CellSpacing = 0;
            dlNews.BorderWidth = 0;
            dlNews.RepeatDirection = RepeatDirection.Vertical;
            // Calling the Itemplete for data list bound columns           
            dlNews.ItemTemplate = new DatalistLabelColumn();
            // Bind the data to the DataGrid.
            dlNews.DataBind();
            //Add the DataGrid to the controls.
            Controls.Add(dlNews);
        }
     

  3. Add/Create the the ITemplate class

         /// <summary>
        /// Intialize the Container controls
        /// </summary>
        /// <param name="container"></param>
        public void InstantiateIn(Control container)
        {
            Label lblNewsTitle = new Label();
            lblNewsTitle.DataBinding += new EventHandler(this.BindLabelColumn);
            container.Controls.Add(lblNewsTitle);

            Label lblNewsText = new Label();

            lblNewsText.DataBinding += new EventHandler(this.BindLabelColumn1);
            container.Controls.Add(lblNewsText);

            LinkButton lnkButton = new LinkButton();
            lnkButton.DataBinding += new EventHandler(this.BindLabelColumn2);
            container.Controls.Add(lnkButton);
        }
        /// <summary>
        /// BindLabelColumn for Title of the News
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void BindLabelColumn(object sender, EventArgs e)
        {
            Label lblTitle = (Label)sender;
            DataListItem container = (DataListItem)lblTitle.NamingContainer;
            String strVals = Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, "Titre"));
            lblTitle.Text = "<div class='HomeNewsTitle'>> " + strVals + "</div>";
        }
        /// <summary>
        /// BindLabelColumn1 for news Description label
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void BindLabelColumn1(object sender, EventArgs e)
        {
            Label lblText = (Label)sender;
            DataListItem container = (DataListItem)lblText.NamingContainer;
            String strVals = Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, "Text"));
            strVals = Regex.Replace(strVals, @"<(.|\n)*?>", string.Empty);
            strVals = RetComments(strVals);
            lblText.Text = "<div class='HomeNewsSubTitle'>" + strVals + "</div>";

        }
        /// <summary>
        /// BindLabelColumn2 for Link button
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void BindLabelColumn2(object sender, EventArgs e)
        {
            LinkButton lnkButton = (LinkButton)sender;
            DataListItem container = (DataListItem)lnkButton.NamingContainer;
            String strVals = Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, "Link"));
            lnkButton.Text = @"<div class='HomeNewsLink'> "
                + "<u style='cursor:hand;'>> Plus d'info<u>"
                + "</div><div class='HomeNewsLink1'></div>";
            lnkButton.PostBackUrl = strVals;
        }
        /// <summary>
        /// Substring the text upto 60 characters
        /// </summary>
        /// <param name="strCompanyName"></param>
        /// <returns></returns>
        public string RetComments(string strCompanyName)
        {
            string sComments = string.Empty;
            if (strCompanyName.Length > 50)
            {
                sComments = strCompanyName.Substring(0, 50).Trim() + "...";
            }
            else if (strCompanyName.Length == 0)
            {
                sComments = "--";
            }
            else
            {
                sComments = strCompanyName;
            }
            return sComments;
        }
     

  4. Create the CSS page News.css. 

    .HomeNewsTitle,.HomeNewsSubTitle,.HomeNewsLink,.HomeSeperator,.HomeNewsTitle2,.HomeNewsLink1,.HomeNewsLink2{
    font-family: Trebuchet MS;
    position: relative;
    float: left;
    left: 0px;
    width: 172px;
    }
    .HomeNewsTitle,.HomeNewsTitle2{
    color: #0099cc;
    font-size: 13px;
    }
    .HomeNewsTitle2{
    top:4px;
    }
    .HomeNewsSubTitle{
    color: #333333;
    font-size: 12px;
    line-height:15px;
    }
    .HomeNewsLink,.HomeNewsLink1,.HomeNewsLink2{
    color: #0099cc;
    font-size: 11px;
    text-decoration:underline;
    text-align:right;
    padding-bottom:1px;
    }
    .HomeNewsLink1{
    padding-bottom:10px;
    }
    .HomeNewsLink2{
    bottom:5px;
    }
     
  5. Add/Place the CSS file in to below folder
        C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
  6. you have to call the Default URL of the CSS file path like "/_layouts/1033/styles/News.css";

Now you can able to use embedded CSS classes and datalist in webpart.

I hope this will be useful for sharepoint developers.

Enjoy!