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

Please login to follow topic

Victor.m.charles.civ
- Post Options:
- Link
  Copy
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.

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

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
manish.gupta
- Post Options:
- Link
  Copy
Posted 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
Victor.m.charles.civ
- Post Options:
- Link
  Copy
Posted 11 September 2019, 10:04 am EST

Thank You.

victor_charles

Post Options:
Link
Copy

Posted 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.

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();
    }
}

}

ViewEmployees.cshtml

@model IEnumerable<MVCApp.Models.EmployeeModel>

@{

ViewBag.Title = “ViewEmployees”;

}

@{

Layout = null;

var grid = new WebGrid(canPage: true, rowsPerPage: 4);

grid.Bind(source: Model);

}

View Employees

@Html.ActionLink("Create New", "SignUp")

@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")   

     )
 )

@Html.DisplayNameFor(model => model.EmployeeId)	@Html.DisplayNameFor(model => model.FirstName)	@Html.DisplayNameFor(model => model.LastName)	@Html.DisplayNameFor(model => model.EmailAddress)

Thanks,

Victor

manish.gupta

Post Options:
Link
Copy

Posted 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";
}
[b]@Html.C1().Styles()
@Html.C1().Scripts().Basic()[/b]
@model IEnumerable<FlexGridIntro.Controllers.EmployeeModel>
<h2>ViewEmployees</h2>
[b]@(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");
            })
)[/b]
@foreach (var item in Model)
{
    @item.EmployeeId @item.FirstName
}

[b]@Html.C1().DeferredScripts()[/b]

Hope it helps!

Regards,

Manish Gupta

victor_charles
- Post Options:
- Link
  Copy
Posted 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

victor_charles

Post Options:
Link
Copy

Posted 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;
});

});

manish.gupta
- Post Options:
- Link
  Copy
Posted 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
victor_charles
- Post Options:
- Link
  Copy
Posted 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

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 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; }

}

}

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);

}

View Employees

@Html.ActionLink("View Employees", "SignUp")

@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”)

) )

MVCDemoDB (SQLServer)

Employee.sql
victor_charles
- Post Options:
- Link
  Copy
Posted 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; }

}

}
victor_charles
- Post Options:
- Link
  Copy
Posted 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
victor_charles
- Post Options:
- Link
  Copy
Posted 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
manish.gupta
- Post Options:
- Link
  Copy
Posted 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

Please login to reply to thread

Need extra support?

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

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.