Help with converting code in DataGridView to FlexGrid in ASP.NET MVC App

Posted by: Victor.m.charles.civ on 7 September 2019, 9:14 am EST

  • Posted 7 September 2019, 9:14 am EST

    Hello,

    I using the code below to search data in C1AOP5 by entering multiple values in one more rows in the AOP6A DataGrid. How do you modify the code to achieve the same with a FlexGrid in an ASP.NET MVC application? Button click event activates AOP6VIEW method.

    For example, if I enter BEL,USA in Row1 and 10411 in Row2, C1AOP5 should display all the records where both BEL and USA are included in 10411 from C1AOP5.

    If possible please send me a sample project with the solution.

    1.
    Private Sub AOP6A_CellValueChanged(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles AOP6A.CellValueChanged
    If e.ColumnIndex = 0 Then
    If AOP6A.Columns(e.ColumnIndex).Name = "CheckBoxColumn" Then
    Dim checkCell As DataGridViewCheckBoxCell =
    CType(AOP6A.Rows(e.RowIndex).Cells("CheckBoxColumn"),
    DataGridViewCheckBoxCell)
    If CType(checkCell.Value, [Boolean]) = True Then
    AOP6A.Rows(e.RowIndex).Cells("CheckBoxColumn").Style.BackColor = Color.Blue
    AOP6A.Rows(e.RowIndex).Cells("CheckBoxColumn").Style.SelectionBackColor = Color.Blue
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.BackColor = Color.Blue
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.SelectionBackColor = Color.Blue
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.ForeColor = Color.White
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.SelectionForeColor = Color.Blue
    Else
    AOP6A.Rows(e.RowIndex).Cells("CheckBoxColumn").Style.BackColor = Color.White
    AOP6A.Rows(e.RowIndex).Cells("CheckBoxColumn").Style.SelectionBackColor = Color.White
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.BackColor = Color.White
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.SelectionBackColor = Color.White
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.ForeColor = Color.Black
    AOP6A.Rows(e.RowIndex).DefaultCellStyle.SelectionForeColor = Color.Black
    End If
    AOP6A.Invalidate()
    End If
    End If
    Try
    If AOP6A.Columns(e.ColumnIndex).Name = "Colfilter" Then
    Dim checkCell As DataGridViewCheckBoxCell =
    CType(AOP6A.Rows(e.RowIndex).Cells("Colfilter"),
    DataGridViewCheckBoxCell)
    If CType(checkCell.Value, [Boolean]) = True Then
    For i As Integer = 0 To Me.AOP6A.Columns.Count - 1
    AOP6A.Rows(e.RowIndex).Cells(i).Style.BackColor = Color.Blue
    AOP6A.Rows(e.RowIndex).Cells(i).Style.SelectionBackColor = Color.Blue
    Next
    Else
    For j As Integer = 0 To Me.AOP6A.Columns.Count - 1
    AOP6A.Rows(e.RowIndex).Cells(j).Style.BackColor = Color.White
    AOP6A.Rows(e.RowIndex).Cells(j).Style.SelectionBackColor = Color.White
    Next
    End If
    AOP6A.Invalidate()
    End If
    Catch ex As Exception
    MessageBox.Show(ex.Message)
    End Try
    End Sub

    2.
    Private Sub AOP6VIEW()
    Dim filtersourcedatatable As DataTable = AOP6A.DataSource 'Top grid in which filter criteria is entered
    Dim destdatatable As DataTable = C1AOP5.DataSource
    Dim commonality As IEnumerable(Of DataRow)
    Dim lastqry = From theRow In destdatatable.AsEnumerable()
    Select theRow
    lastqry = GetIntersection(filtersourcedatatable, lastqry) 'And operator
    Dim dtclone = destdatatable.Clone()
    dtclone.Clear()
    For Each drow As DataRow In lastqry
    dtclone.ImportRow(drow)
    Next
    If dtclone.Rows.Count = 0 Then
    MsgBox("No Records Found in AOP-6")
    C1AOP5.Visible = False
    End If
    If dtclone.Rows.Count <> 2000 Then '2000 isTotal Rows in table
    TEST = 1
    C1AOP5.Visible = True
    Me.C1AOP5.DataSource = dtclone
    Else
    C1AOP5.Visible = False
    End If
    End Sub

    Thanks,

    Victor
  • Marked as Answer

    Replied 8 September 2019, 10:15 pm EST

    Hi Victor,
    The MVC FlexGrid is different then the C1TrueDBGrid. In the FlexGrid, there is collectionView which can be used to filter the Data.

    Please refer to the following demo sample for reference:
    https://demos.componentone.com/ASPNET/LearnMvcClient/C1Mvc/CVChaining

    Hope it helps! If not, please elaborate your requirement or share the images for your requirement.

    Regards,
    Manish Gupta
  • Replied 11 September 2019, 10:04 am EST

    Thank You.
  • Replied 24 September 2019, 12:48 pm EST

    Manish,

    I am using the code below to view data in a table and WebGrid. How do I modify it to view the data in a FlexGrid? I would like to load the data in a FlexGrid and filter the data using selections from multiple column headers.

    1. Homecontroller.cs
    using MVCApp.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using DataLibrary;
    using static DataLibrary.BusinessLogic.EmployeeProcessor;

    namespace MVCApp.Controllers
    {
    public class HomeController : Controller
    {
    public ActionResult Index()
    {
    return View();
    }

    public ActionResult About()
    {
    ViewBag.Message = "Your application description page.";

    return View();
    }

    public ActionResult Contact()
    {
    ViewBag.Message = "Your contact page.";

    return View();
    }

    public ActionResult ViewEmployees()
    {
    ViewBag.Message = "Employees List";

    var data = LoadEmployees();
    List<EmployeeModel> employees = new List<EmployeeModel>();

    foreach (var row in data)
    {
    employees.Add(new EmployeeModel
    {
    EmployeeId = row.EmployeeId,
    FirstName = row.FirstName,
    LastName = row.LastName,
    EmailAddress = row.EmailAddress,
    ConfirmEmail = row.EmailAddress
    });
    }

    return View(employees);
    }

    public ActionResult SignUp()
    {
    ViewBag.Message = "Employee Sign Up";

    return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult SignUp(EmployeeModel model)
    {
    if (ModelState.IsValid)
    {
    int recordsCreated = CreateEmployee(model.EmployeeId,
    model.FirstName,
    model.LastName,
    model.EmailAddress);
    return RedirectToAction("Index");
    }

    return View();
    }
    }
    }

    ***********************************
    2. ViewEmployees.cshtml

    @model IEnumerable<MVCApp.Models.EmployeeModel>

    @{
    ViewBag.Title = "ViewEmployees";
    }
    @{
    Layout = null;
    var grid = new WebGrid(canPage: true, rowsPerPage: 4);
    grid.Bind(source: Model);
    }

    <h2>View Employees</h2>

    <p>
    @Html.ActionLink("Create New", "SignUp")
    </p>
    <table class="table">
    <tr>
    <th>
    @Html.DisplayNameFor(model => model.EmployeeId)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.FirstName)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.LastName)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.EmailAddress)
    </th>
    <th></th>
    </tr>

    @foreach (var item in Model)
    {
    <tr>
    <td>
    @Html.DisplayFor(modelItem => item.EmployeeId)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.EmailAddress)
    </td>
    </tr>
    }
    @grid.Table(
    tableStyle: "table table-responsive table-bordered",
    columns: grid.Columns(
    grid.Column(columnName: "EmployeeId", header: "EmployeeId"),
    grid.Column(columnName: "FirstName", header: "First Name"),
    grid.Column(columnName: "LastName", header: "Last Name"),
    grid.Column(columnName: "EmailAddress", header: "EmailAddress")

    )
    )

    </table>


    Thanks,

    Victor
  • Replied 24 September 2019, 3:53 pm EST

    Hello Victor,
    In your case, you have set the Layout to null, so the Code to show the C1FlexGrid in cshtml page would be as follows:

    @{
    ViewBag.Title = "ViewEmployees";
    }
    @Html.C1().Styles()
    @Html.C1().Scripts().Basic()

    @model IEnumerable<FlexGridIntro.Controllers.EmployeeModel>
    <h2>ViewEmployees</h2>
    @(Html.C1().FlexGrid().Id("grid").Bind(Model).AutoGenerateColumns(false)
    .Columns(c =>
    {
    c.Add().Binding("EmployeeId").Header("EmployeeId");
    c.Add().Binding("FirstName").Header("First Name");
    c.Add().Binding("LastName").Header("Last Name");
    c.Add().Binding("EmailAddress").Header("EmailAddress");
    })
    )

    @foreach (var item in Model)
    {
    @item.EmployeeId @item.FirstName
    }

    @Html.C1().DeferredScripts()


    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 25 September 2019, 1:51 am EST

    Hi,

    Thanks for the code, which classes do I need to add to use FlexGrid in my application?

    Receiving errors: "The type or namespace 'FlexGridIntro' could not be found"
    "FlexGridIntro.Controllers.EmployeeModel> does not containa definition and accessible extension metho 'C1' accespting a first argument......."


    Victor
  • Replied 25 September 2019, 1:53 am EST

    Hello again,

    I included your code below my existing code.

    @model IEnumerable<MVCApp.Models.EmployeeModel>

    @{
    ViewBag.Title = "ViewEmployees";
    }
    @{
    Layout = null;
    var grid = new WebGrid(canPage: true, rowsPerPage: 4);
    grid.Bind(source: Model);
    }

    <h2>View Employees</h2>

    <p>
    @Html.ActionLink("Create New", "SignUp")
    </p>
    <table class="table">
    <tr>
    <th>
    @Html.DisplayNameFor(model => model.EmployeeId)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.FirstName)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.LastName)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.EmailAddress)
    </th>
    <th></th>
    </tr>

    @foreach (var item in Model)
    {
    <tr>
    <td>
    @Html.DisplayFor(modelItem => item.EmployeeId)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.EmailAddress)
    </td>
    </tr>
    }


    </table>

    // Test WebGrid
    @grid.Table(
    tableStyle: "table table-responsive table-bordered",
    columns: grid.Columns(
    grid.Column(columnName: "EmployeeId", header: "EmployeeId"),
    grid.Column(columnName: "FirstName", header: "First Name"),
    grid.Column(columnName: "LastName", header: "Last Name"),
    grid.Column(columnName: "EmailAddress", header: "EmailAddress")

    )
    )

    // Test FlexGrid

    @Html.C1().Styles()
    @Html.C1().Scripts().Basic()
    @model IEnumerable<FlexGridIntro.Controllers.EmployeeModel>
    <h2>ViewEmployees</h2>
    @(Html.C1().FlexGrid().Id("grid").Bind(Model).AutoGenerateColumns(false)
    .Columns(c =>
    {
    c.Add().Binding("EmployeeId").Header("EmployeeId");
    c.Add().Binding("FirstName").Header("First Name");
    c.Add().Binding("LastName").Header("Last Name");
    c.Add().Binding("EmailAddress").Header("EmailAddress");
    })
    )
    @foreach (var item in Model)
    {
    @item.EmployeeId @item.FirstName
    }

    @Html.C1().DeferredScripts()
  • Replied 25 September 2019, 7:43 pm EST

    Hi,

    How do I add C1Mvc/CVChaining.js in my ASP.NET MVC project?

    // This file locates: "Scripts/Lesson/C1Mvc/CVChaining.js".
    c1.documentReady(function () {
    // a CollectionView based on the raw data
    var view = c1.getService("collectionView");

    // create a second CollectionView based on the first one
    var view2 = new wijmo.collections.CollectionView(view.items, {
    collectionChanged: function (s) {
    var cnt = document.getElementById('cnt');
    cnt.textContent = wijmo.format('{length:n0}', s.items)
    }
    });

    // bind a grid to the second CollectionView
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = view2;

    // update the filter on the first CollectionView when the text changes
    document.getElementById('theFilter').addEventListener('input', function (e) {

    // update first CollectionView's filter
    var filterText = e.target.value.toLowerCase();
    view.filter = function (item) {
    return filterText
    ? item.Country.toLowerCase().indexOf(filterText) > -1
    : true;
    }

    // update second collection view's sourceCollection
    view2.sourceCollection = view.items;
    });
    });
  • Replied 25 September 2019, 10:54 pm EST

    Hi Victor,
    >>which classes do I need to add to use FlexGrid
    In your project C1.Web.Mvc dll should be reference either from local machine or Nuget.
    Please refer to the following documentation for reference to include C1 Controls in your application:

    http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#CreatingaNewProject.html

    http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#RegisteringResources.html

    http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#DeferredScripts.html

    http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#AddingControlsinRazor.html

    >>"The type or namespace 'FlexGridIntro' could not be found"
    Please use the following code line instead of "@model IEnumerable<FlexGridIntro.Controllers.EmployeeModel>"
    @model IEnumerable<MVCApp.Models.EmployeeModel>


    >> How do I add C1Mvc/CVChaining.js in my ASP.NET MVC project?
    You may use the script code in your CSHTML page or add a js file in your project and put the code in newly added file.
    In case the code is added in js file, js file should be referenced in the CSHTML file.

    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 26 September 2019, 12:28 am EST

    Manish,

    Below is the complete code in my project, not including references. The code for the FlexGrid should be included in 2c. I will include the .js file in the Script folder and let you know if it works.

    3 Projects: 1. Data Library, 2. MVC, 3. MVCDemoDB

    1. Data Library (Class Library.NET Framework)
    a. SqlDataAccess.cs
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Dapper;
    using System.Configuration;
    using System.Data;
    using System.Data.SqlClient;

    namespace DataLibrary.DataAccess
    {
    public static class SqlDataAccess
    {
    public static string GetConnectionString(string connectionName = "MVCDemoDB")
    {
    return ConfigurationManager.ConnectionStrings[connectionName].ConnectionString;
    }

    public static List<T> LoadData<T>(string sql)
    {
    using (IDbConnection cnn = new SqlConnection(GetConnectionString()))
    {
    return cnn.Query<T>(sql).ToList();
    }
    }

    }
    }

    b. EmployeeProcessor.cs
    using DataLibrary.DataAccess;
    using DataLibrary.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    namespace DataLibrary.BusinessLogic
    {
    public static class EmployeeProcessor
    {
    public static List<EmployeeModel> LoadEmployees()
    {
    string sql = @"select Id, EmployeeId, FirstName, LastName, EmailAddress
    from dbo.Employee;";

    return SqlDataAccess.LoadData<EmployeeModel>(sql);
    }
    }
    }

    c. EmployeeModel.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    namespace DataLibrary.Models
    {
    public class EmployeeModel
    {
    public int Id { get; set; }
    public int EmployeeId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EmailAddress { get; set; }
    }
    }


    2. MVC
    a. EmployeeModel.cs
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Web;

    namespace MVCApp.Models
    {
    public class EmployeeModel
    {
    public int EmployeeId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EmailAddress { get; set; }
    public string Password { get; set; }
    }
    }
    b. HomeController.cs
    using MVCApp.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using DataLibrary;
    using static DataLibrary.BusinessLogic.EmployeeProcessor;

    namespace MVCApp.Controllers
    {
    public class HomeController : Controller
    {
    public ActionResult Index()
    {
    return View();
    }

    public ActionResult ViewEmployees()
    {
    ViewBag.Message = "Employees List";

    var data = LoadEmployees();
    List<EmployeeModel> employees = new List<EmployeeModel>();

    foreach (var row in data)
    {
    employees.Add(new EmployeeModel
    {
    EmployeeId = row.EmployeeId,
    FirstName = row.FirstName,
    LastName = row.LastName,
    EmailAddress = row.EmailAddress,
    });
    }

    return View(employees);
    }


    }
    }

    c. ViewEmployee.cshtml
    @model IEnumerable<MVCApp.Models.EmployeeModel>

    @{
    ViewBag.Title = "ViewEmployees";
    }
    @{
    Layout = null;
    var grid = new WebGrid(canPage: true, rowsPerPage: 10);
    grid.Bind(source: Model);
    }

    <h2>View Employees</h2>

    <p>
    @Html.ActionLink("View Employees", "SignUp")
    </p>

    @grid.Table(
    tableStyle: "table table-responsive table-bordered",
    columns: grid.Columns(
    grid.Column(columnName: "EmployeeId", header: "EmployeeId"),
    grid.Column(columnName: "FirstName", header: "First Name"),
    grid.Column(columnName: "LastName", header: "Last Name"),
    grid.Column(columnName: "EmailAddress", header: "EmailAddress")

    )
    )

    3. MVCDemoDB (SQLServer)
    Employee.sql
  • Replied 26 September 2019, 12:59 am EST

    Manish,

    I included C1.Web.Mvc using Manage Nuget packages and modified the code as shown below. However wherever C1 appears, it still triggers the following error message:

    'HtmlHelper<IEnumerable<EmployeeModel>>'does not contain adefinition for 'C1" and not accessible extension method'C1' accepting a first argument of type 'HtmlHelper<IEnumerable<EmployeeModel>>' could be found (are you missing a using directive or an assembly reference?)




    Code:
    @model IEnumerable<MVCApp.Models.EmployeeModel>
    @{
    ViewBag.Title = "ViewEmployees";
    }
    @{
    Layout = null;
    var grid = new WebGrid(canPage: true, rowsPerPage: 10);
    grid.Bind(source: Model);
    }

    <h2>View Employees</h2>

    <p>
    @Html.ActionLink("View Employees", "SignUp")
    </p>

    @grid.Table(
    tableStyle: "table table-responsive table-bordered",
    columns: grid.Columns(
    grid.Column(columnName: "EmployeeId", header: "EmployeeId"),
    grid.Column(columnName: "FirstName", header: "First Name"),
    grid.Column(columnName: "LastName", header: "Last Name"),
    grid.Column(columnName: "EmailAddress", header: "EmailAddress")

    )
    )

    @Html.C1().Styles()
    @Html.C1().Scripts().Basic()

    <h2>ViewEmployees</h2>
    @(Html.C1().FlexGrid().Id("grid").Bind(Model).AutoGenerateColumns(false)
    .Columns(c =>
    {
    c.Add().Binding("EmployeeId").Header("EmployeeId");
    c.Add().Binding("FirstName").Header("First Name");
    c.Add().Binding("LastName").Header("Last Name");
    c.Add().Binding("EmailAddress").Header("EmailAddress");
    })
    )
    @foreach (var item in Model)
    {
    @item.EmployeeId @item.FirstName
    }

    @Html.C1().DeferredScripts()
  • Replied 26 September 2019, 1:04 am EST

    Manish,

    Below is the code in the EmployeeModel.cs. Should some code be included in that file?

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Web;

    namespace MVCApp.Models
    {
    public class EmployeeModel
    {
    public int EmployeeId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EmailAddress { get; set; }
    public string Password { get; set; }
    }
    }
  • Replied 26 September 2019, 1:53 am EST

    Still can't reference the required files to avoid this error. Is it possible to send me a sample projects that includes all the required files, or instructions on how to include them in the project?

    Thanks,

    Victor
  • Replied 26 September 2019, 4:33 am EST

    Manish,

    I noticed in the link below, Componentone controls can also be added in templates section of Visual studio, but don't see that option in my VS, how do you as Component as a template in VS?

    https://www.youtube.com/watch?v=9o4hOJ406V8&spfreload=10

    Please take a look at this, it may be a solution to also use the FlexGrid.

    Thanks,

    Victor
  • Replied 26 September 2019, 5:19 pm EST

    Hi Victor,
    Please find the attached sample for reference.
    >> but don't see that option in my VS, how do you as Component as a template in VS?
    Have you installed the ComponentOne Enterprises on your machine?
    If not, please install the ComponentOne Enterprises on your machine. The installer can be get from the following link:
    https://www.grapecity.com/componentone-studio

    Further, you may create a project using the C1Template and add the Control using the C1Scaffolding.
    Please refer to the following documentation:
    Create Project using C1Template: http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#Using%20C1%20Template.html

    Insert/Update control using C1Scaffolding:
    http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#ScaffoldinginASP.NETMVCControls.html

    Hope it helps!

    Regards,
    Manish Gupta




    FlexGridIntro-EmployeeModel.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels