Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
220
DropDown Styling ->Ultrawebgrid to Webdatagrid Migraton (Issues)
posted

Hello,

              We are upgrading several grid's from ultrawebgrid to new webdatagrid and we have encountered issue on how the drop-downs are styled/sized after migrating to the new webdatagrid cell edit mode. I have provided below on how the drop-downs look after migrating. I need help so that the drop-down looks same after migrating to webdatagrid. (How to style the class and where to set)?

Issue 1: The width of the drop-down (after select), doesn't size according to the width of the column.

Issue 2: A lot of empty space is shown below the collection.

Issue 3: Different colors.

Below is how we render the drop-down in cell edit mode:

Types & Descriptions:>

•	<param name="columnIndex">Index location of the column that is to be rendered as a drop-down</param>
•	<param name="ds">Dataset of Text and Values to populate dropdown</param>
•	<param name="IDColumnIndex">Data table index of the column that will represent the dropdown value field</param>
•	<param name="DescriptionColumnIndex">Data table index of the column that will represent the dropdown text field</param>


' Create a drop down provider and give it a unique ID
      _dropDownProviderID = "ddpColumn_" + columnIndex.ToString()
      _dropDownProvider = grdDataTable.EditorProviders.GetProviderById(_dropDownProviderID)
      If _dropDownProvider Is Nothing Then
        _dropDownProvider = New DropDownProvider()
        _dropDownProvider.ID = _dropDownProviderID
        grdDataTable.EditorProviders.Add(_dropDownProvider)
      End If

      ' Set Editor Control properties for the dropdown.
      _dropDownProvider.EditorControl.EnableAnimations = False
      _dropDownProvider.EditorControl.EnableDropDownAsChild = False
      _dropDownProvider.EditorControl.DataSource = ds.Tables(0)
      _dropDownProvider.EditorControl.ValueField = ds.Tables(0).Columns.Item(IDColumnIndex).ToString()
      _dropDownProvider.EditorControl.TextField = ds.Tables(0).Columns.Item(DescriptionColumnIndex).ToString()
      _dropDownProvider.EditorControl.DataBind() 'JAD,05/15/2018
      _dropDownProvider.EditorControl.EnableCustomValues = False 'AR, Disable typing in values inside drop-down
      _dropDownProvider.EditorControl.CssClass = "CustomDropDownClass"

' Associate the drop down provider to the grid column by column key
        _editingColumnSetting = New EditingColumnSetting()
        _editingColumnSetting.ColumnKey = grdDataTable.Rows(0).Items(columnIndex).Column.Key
        _editingColumnSetting.EditorID = _dropDownProvider.ID

' Get the Editing Core Behavior
      _editingCore = grdDataTable.Behaviors.GetBehavior(Of EditingCore)()

        ' Add the cell editing column setting to the cell editing behavior for the grid
        ' and enable the cell editing behavior for the grid.
        _cellEditing = _editingCore.Behaviors.GetBehavior(Of CellEditing)()
        _cellEditing.ColumnSettings.Add(_editingColumnSetting)
        _cellEditing.Enabled = True

I have placed my CustomDropDownClass  class in the ig_dropdown.css file in the ig_res/default folder.

.CustomDropDownClass{
font-family: Verdana, Arial, Helvetica, Sans-Serif!important;
font-size: 10px;
color: #333333;
-webkit-writing-mode: horizontal-tb !important;
display: inline-block!important;
text-align: start;
-webkit-appearance: menulist!important;
box-sizing: border-box!important;
align-items: center;
-webkit-rtl-ordering: logical!important;
border-width: 1px!important;
border-style: solid!important;
border-color: rgb(169, 169, 169);
border-image: initial;
width:100%!important;
}

Ultrawebgrid:

 

WebDataGrid:

Thanks,

Aravind

Top Replies

Parents
  • 1980
    Offline posted

    Hi Aravind,

    In ig_dropdown.css file (ig_res/Default) you can apply width and height to igdd_DropDownListContainer class and background color to igdd_ListItemSelected class. 

    Please let me know if you need further assistance with this.

Reply Children