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
Yes, the dropdown container width and height can also be changed in code. It is a good idea to place this code in the grid's "InitializeRow" event in order to be sure that the grid rows have already been initialized and check if there are any rows at all.
Hi,
The code i showed you is triggered only when the grid is about to go to cell edit all mode while setting a drop-down and when the number of records are more than 0(ie grid having rows then do) . So i guess it should take care of the scenario you mentioned instead of placing it in initialize row event ?
seems reasonable in your scenario.