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
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.
Hi plamena,
I tried setting the width and height to 100% in the igdd_DropDownListContainer class but it din't work, however after i researched further, i used the below logic and it seemed to fix the width/height rendering.
The width of the columns are set using a wrapper code in read only mode which can either be % or px. I was seeing that if the column width was set using % in read mode, then the drop-down column width would align correctly in edit all mode. However if you are setting column width as pixels, then we need to explicitly set the webdropdown width programatically.
Also I was seeing that the height of the drop-down was looking good with no empty spaces if the collection of records was less than 4 in the drop-down and hence had to do the height condition of 80% as explained in the code. is there any concern with this way of setting drop-downs in edit all mode, for dynamically binded data with custom column width?
' Set the width of the drop-down to width of the cell , incase if the width is not set using percentage If grdDataTable.Rows(0).Items(columnIndex).Column.Width.Type <> UnitType.Percentage Then _dropDownProvider.EditorControl.DropDownContainerWidth = grdDataTable.Rows(0).Items(columnIndex).Column.Width End If ' Set the height of the grid to 80% if the number of records is less than 4 or else keept it at 100%. If (ds.Tables(0).Rows.Count <= 3) Then _dropDownProvider.EditorControl.DropDownContainerHeight = New Unit(80, UnitType.Percentage) Else _dropDownProvider.EditorControl.DropDownContainerHeight = New Unit(100, UnitType.Percentage) End If