Converting from GridView to Card View

Question

Hi Community ! ,

I was wondering if it is possible to convert a ggc from grid view to a card view using? i have attached the result i am looking for. or is there any alternatives ? It would be helpful if the solution is provided in .cs [design] not .xaml please as I'm not too familiar with .xaml

Thanks in advance!

Attachment: card_view_ccdd5b84.zip

Balamurugan Thirumalaikumar · Accepted Answer

Hi Mohammed, 

Thank you for interesting in Syncfusion products. 

We regret to inform you that, as per the current implementation pf GridGrouping Control don’t have the support for Gridview to CardView display. However you can achieve this by our GridDataBoundGrid control. We have already provided the UG documentation for this. You can refer the same from following link. 

CardView layout in GridDataBoundGrid - https://help.syncfusion.com/windowsforms/classic/databoundgrid/card-view-layout 

Getting Started GridDataBoundGrid - https://help.syncfusion.com/windowsforms/classic/databoundgrid/getting-started 

Tested Sample link - https://www.syncfusion.com/downloads/support/directtrac/general/ze/CS-1834949448.zip 

Please let us know if you would require any other assistance. we will be happy to assist you. 

Regards, Balamurugan Thirumalaikumar

Mohammed Shafeel · Answer

Thanks for that ! , it really helps. I just had another question does GridDataBoundGrid have something like a TableDescriptor which is present in a GridGroupingColumn? I am trying to see if i can add a FieldDescriptor to GridDataBoundGrid. The reason for this is i'm trying to replicate the settings that i have on the GridGroupingColumn. Any help would be much appreciated.

Thanks !

Mohammed Shafeel · Answer

Hi Balamurugan,

Sorry I just have another issue with the card view. so i am setting the column headers . then assigning the data source , then changing to a card view . the fifth card is always empty. I've attached a screenshot of how the card view looks. I have just hidden the data on the screenshot but the fifth card isn't showing the data instead it shows checkboxes. i've added the code below as to how i am setting the column headers and initialising the grid. The data displays properly in grid view but for some reason in card view the 5th card is displaying incorrectly.

       public ViewColumnList GraduandColumns
        {
            get
            {
                return new ViewColumnList
                {
                    new ViewColumn("ProgrammeOrder", "Prog Order", 65),
                    new ViewColumn("GraduandOrder", "Grad Order", 65),
                    new ViewColumn("QualificationOrder", "Qual Order", 65),
                    new ViewColumn("Department", "Department"),
                    new ViewColumn("QualificationTitle", "Qualification", 220),
                    new ViewColumn("Honours", "Honours", 100),
                    new ViewColumn("StudentID", "Student ID"),
                    new ViewColumn("QualFamilyName", "Family Name"),
                    new ViewColumn("QualFirstName", "First Name"),
                    new ViewColumn("QualificationStatusDesc", "Qual Status"),
                    new ViewColumn("GrantCycleStatusDesc", "Grant Status"),
                    new ViewColumn("GraduateMethodDesc", "Method"),
                    new ViewColumn("MultipleQualDisplayDesc", "Multiple"),
                    new ViewColumn("Designation", "Designation"),
                    new ViewColumn("IsNew", "Is New") {IsBool = true},
                    new ViewColumn("HasContactFlag", "Contact Flag") {IsBool = true}
                };
            }
        }


        public static void SetGridataBoundColumns(GridDataBoundGrid gridDataBoundGrid , ViewColumnList viewColumns, bool readOnly, bool keepFiltersValue = false)
        {

            gridDataBoundGrid.GridBoundColumns.Clear();

            foreach (ViewColumn column in viewColumns)
            {
                var newGridBoundColumn = new GridBoundColumn();
                newGridBoundColumn.MappingName = column.PropertyName;
                newGridBoundColumn.HeaderText = column.DisplayName;
                newGridBoundColumn.ReadOnly = readOnly;

                gridDataBoundGrid.GridBoundColumns.Add(newGridBoundColumn);

            }

            gridDataBoundGrid.Binder.InitializeColumns();


        }

      
        public void LoadFilteredGraduands(IList<Graduand> items, IList<int> indexes)
        {
            gridDataBoundGrid1.DataSource = null;

            Utility.SetGridataBoundColumns(gridDataBoundGrid1, Presenter.GraduandColumns);
            gridDataBoundGrid1.DataSource = ToDataTable(filteredItems);

            #region [ CardView... ]

            card.CaptionField = "StudentID";
            card.CardBackColor = Color.Lavender;
            card.WireGrid(gridDataBoundGrid1);
            #endregion

            //gridDataBoundGrid1.Model.ColWidths.ResizeToFit(GridRangeInfo.Table());
            gridDataBoundGrid1.Refresh();

        }

Attachment: Card_View_Issue_704ff60d.zip

Mohammed Shafeel · Answer

So i did some investigation as to why one of the card views were showing checkboxes for all the value. There seems to be a problem when a data type column is a boolean. I have two columns IsNew and HasContactFlag that are booleans, but for some reason when converting to a card view it gives this mysterious problem, but in grid view it seems fine. my workaround was to convert the dataTypes to strings for the time being just so it works properly and the data is displayed correctly if you know of a workarond. I've attached the code below to show how i am creating the data table so i can use it for the gridDataBoundGrid datasource

        public static DataTable ToDataTable<Graduand>(List<Graduand> data)
        {
            PropertyDescriptorCollection properties =
                TypeDescriptor.GetProperties(typeof(Graduand));
            DataTable table = new DataTable();
            foreach (PropertyDescriptor prop in properties)
            {
                table.Columns.Add(prop.Name, Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType);
            }
            foreach (Graduand item in data)
            {
                DataRow row = table.NewRow();
                foreach (PropertyDescriptor prop in properties)
                    row[prop.Name] = prop.GetValue(item) ?? DBNull.Value;
                table.Rows.Add(row);
            }

            DataTable newDataTable = table.Clone();

            foreach (DataColumn dc in newDataTable.Columns)
            {
                if (dc.DataType == typeof(bool))
                {
                    dc.DataType = typeof(string);
                }
            }

            foreach (DataRow dr in table.Rows)
            {
                newDataTable.ImportRow(dr);
            }

            return newDataTable;
        }

Balamurugan Thirumalaikumar · Answer

Hi Mohammad, 
 
Thank you the update. 
 
We have checked the reported query at our end. Please refer the following details. 
 




Thanks for that ! , it really helps. I just had another question does GridDataBoundGrid have something like a TableDescriptor which is present in a GridGroupingColumn? I am trying to see if i can add a FieldDescriptor to GridDataBoundGrid. The reason for this is i'm trying to replicate the settings that i have on the GridGroupingColumn. Any help would be much appreciated.  

We regret let you know that GridDataBoundGrid don’t have the property like GridGrouping control’s TableDescriptor. Meantime, can you please confirm us what you are trying to achieve with TableDescriptor in GridDataBoundGrid? What are your exact requirements on this?. So that, we can analyse the further and provide you the solution as earlier possible. 


Sorry I just have another issue with the card view. so i am setting the column headers . then assigning the data source , then changing to a card view . the fifth card is always empty. I've attached a screenshot of how the card view looks. I have just hidden the data on the screenshot but the fifth card isn't showing the data instead it shows checkboxes. i've added the code below as to how i am setting the column headers and initialising the grid. The data displays properly in grid view but for some reason in card view the 5th card is displaying incorrectly. 

We have analyzed your scenario and could able to understand your scenario. As per grid architecture, the boolean type column will displays as the CheckBox type column. So to change the looks of Boolean type column as textbox , set the CellType of that column to “TextBox” and CellValueType is to “string”. 


I have two columns IsNew and HasContactFlag that are booleans, but for some reason when converting to a card view it gives this mysterious problem, but in grid view it seems fine. my workaround was to convert the dataTypes to strings for the time being just so it works properly and the data is displayed correctly if you know of a workarond. I've attached the code below to show how i am creating the data table so i can use it for the gridDataBoundGrid datasource 

You can just change the cell type for the columns in your databound grid. 
 




this.gridDataBoundGrid1.Binder.InternalColumns[1].StyleInfo.CellType = GridCellTypeName.TextBox; 
 
You can also set the Format property and the CellValueTyle property. 
 




this.gridDataBoundGrid1.Binder.InternalColumns[1].StyleInfo.CellValueType = typeof(string); 
 
 
Please let us know if you would require any other assistance. we will be happy to assist you. 
 
Regards, 
Balamurugan Thirumalaikumar