Archive for category Trouble Shooting

Applying css style on cellClass not working in Angular UIGrid

cellClass is an attribute which allows user to specify different styles to cells in angular UI Grid.

Problem Description:

When user tries to apply custom styling to cellClass the changes won’t get applied to UIGrid.

An important point to be noted is by design uigrid have its own css styles. These css rules comes from uigrid.css or bootstrap.css. So if a user tries to change the default style of uigrid, we need to make sure that the CSS specificity applied properly.

eg:- User is trying to change the background color of uigrid cell. uigrid already have a default cell background color ( grey / white) . So if user need to make change to background color of cell, we need to make sure that CSS Specificity is applied properly.

Solution:

Let’s have a look at CSS Specificity. When you have two or more css rules pointing to same html element, then browser follows some rules to determine which css rule is more specific and that css rule will get applied to html element. This is called CSS Specificity.

  • ID Selector (#Someword)                              : More Specificity
  • Class/Attribute Selector (.Someword)         : Less Specificity than the ID selector.
  • html Selector (all)                                           : Less Specificity than the class selector.

If you notice above list ID selector has more priority, however we can assign priority to css selector by using !important attribute.if a css value is appended with !important, it overrides all other CSS specificity and precedence will be given to the css value with !important.

Hence in order to resolve the issue user need to make sure that user defined style sheet should have more specific css rule than the default rules from uigrid.css / bootstrap.css.

For ex: below user defined css rule will not work

.cellColorChange{
      background-color : 'red' ;
}

Reason is default css from ui-grd.css have more specificity. So this will take priority.

.ui-grid-row:nth-child(odd) .ui-grid-cell{
background-color: #fdfdfd;
}
.ui-grid-row:nth-child(even) .ui-grid-cell{
background-color: #f3f3f3;
}

We need to provide more specificity in user defined CSS. I have used (!important ) along with css property. It works perfectly fine

.cellColorChange{
    background-color : 'red'  !important;
}

 

 

, , , , ,

Leave a comment

Solution to: The type System.IO.Packaging.Package’ is defined in an assembly that is not referenced. You must add a reference to assembly ‘WindowsBase

Description:

In article I am going to explain the solution of a problem which you may face when you work with Open Office XML SDK and DocumentFormat.OpenXML assembly in Asp.Net. After adding the needed reference when you build the project you will get exception “The type ‘System.IO.Packaging.Package’ is defined in an assembly that is not referenced. You must add a reference to assembly ‘WindowsBase’”

Solution:

To resolve this issue you need to add the reference of WindowsBase dll reference to your solution.

, , ,

Leave a comment

Trouble Shooting: Asp.Net AjaxControlToolkit ReOrderList control not working in IE 11 Browser

Introduction

In this article I am going to provide a solution for the problem where the Asp.Net AjaxControlToolkit’s ReOrderList control won’t work in IE 11 Browser.

Problem Description:

In IE11 browser AjaxControlToolkit ReOrderList’s changing the order of items (ReOrder) won’t work properly. You don’t get any error however when you try to drag there won’t be any changes to ReOrderList.

Solution:

To resolve this issue you need to set the ClientIDMode to control to AutoID and it will resolve the issue.

CSS:

  <style type="text/css">
            .DragHandleClass {
                width: 40px;
                height: 20px;
                background-color: blue;
                color: white;
                cursor: move;
            }

            .ajaxOrderedList li {
                list-style: none;
            }
        </style>

HTML

 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:ReorderList ID="ReorderList1" runat="server"
            OnItemReorder="ReorderList1_ItemReorder"
            PostBackOnReorder="true"
            CallbackCssStyle="callbackStyle"
            DragHandleAlignment="Left"
            ItemInsertLocation="Beginning"
            DataKeyField="ID"
            SortOrderField="Name" ClientIDMode="AutoID">
            <ItemTemplate>
                <div class="itemArea">
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("Name")%>' />
                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Order_By") %>' />
                </div>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
            </ReorderTemplate>
            <DragHandleTemplate>
                <div class="DragHandleClass">Drag</div>
            </DragHandleTemplate>
        </asp:ReorderList>

C#:



public static DataTable dt = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                //test data suppose comes from database
                dt = new DataTable();
                dt.Columns.Add("ID");
                dt.Columns.Add("Name");
                dt.Columns.Add("Order_By");
                dt.Rows.Add(1, "Name1", "First");
                dt.Rows.Add(2, "Name2", "Second");
                dt.Rows.Add(3, "Name3", "Third");
                dt.Rows.Add(4, "Name4", "Fourth");
                this.ReorderList1.DataSource = dt;
                this.ReorderList1.DataBind();
            }

        }

        protected void ReorderList1_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
        {
            DataRow selectedRow = dt.Rows[e.OldIndex];
            DataRow newRow = dt.NewRow();
            newRow.ItemArray = selectedRow.ItemArray; // copy data
            dt.Rows.Remove(selectedRow);//delete the old row
            dt.Rows.InsertAt(newRow, e.NewIndex); //add new row
            //your code save the datatable to database
            this.ReorderList1.DataSource = dt;
            this.ReorderList1.DataBind();
        }

Demo:

, ,

Leave a comment

Trouble Shooting: Unable to perform postback from Jquery Dialog

Problem Description:

From Jquery Dialog when you click on the button and if it has a corresponding click event on server side code, the code won’t get executed.

Solution:

You need to add the below code to perform postback when user click on button in Jquery dialog.

parent().appendTo(jQuery(&quot;form:first&quot;));

Complete Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            $("#dialog").dialog({
                autoOpen: false
            });

            $("#Button1").click(function (evt) {
                var dlgwnd = $("#dialog").dialog("open");
                //Add the below code and Postback will occur fine with out any problem
                dlgwnd.parent().appendTo(jQuery("form:first"));
            });
        });
    </script>
</head>
<body>
    <form id="form2" runat="server">
        <div id="dialog" title="Dialog">
            Sample Text Content
            <asp:Button ID="Button2" runat="server" Text="OK" OnClick="Button2_Click" />
        </div>

        <asp:Button ID="Button1" runat="server" Text="Open Dialog" OnClientClick="return false" />
    </form>
</body>
</html>

Leave a comment