I have downloaded your JQuery Controls CTP for inspection as I am in the early planning stages of a MVC 3 web site project using the Razor view engine. Your samples downloaded with the CTP are all using the ASPX view engine even for the MVC 3 samples. Does Infragistics have samples of using the JQuery controls within the MVC 3 Razor view engine context?
Hi Steve,
The CTP samples were created only with the ASPX view engine as the official MVC3 release came just a few weeks prior to the release of our CTP.
Razor view engine samples will be available once the 11.1 iteration is released.
Hope this helps,
How do I go about adding Infragistics controls to an MVC3 (Razor View Engine) page (cshtml). Since there is no design view, my toolbox doesnt load my infragistics controls so I have no way of adding them.
When using the ASPX View Engine, it has the design view and thus the controls show up in my toolbox and I can add them to a page.
So to reiterate, how do I add Infragistic controls to an MVC3 (Razor) cshtml page in VS2010?
Thanks,
Adrian
Craig:
Thank you for your response, but it does not quite answer my question.
What I really want to know is if I can go ahead and use Infragistics components right now in an MVC3 (Razor) project, or if I have to wait until the release of 11.1? I'm not really concerned about the example snipetts, I just want to know if its possible to use right now.
I've installed 11.1 (released today) and none of the samples that I've looked at so far are using the Razor engine.
Hi anthonyqueen,
Thank you for your intrest in Infragistics.
When you open a sample there is a drop down "Select Sample source file to View" from which you can select the source file that will be presented in the box bellow. For the MVC samples in this drop down you can find files with .cshtml extension, those show how to create the sample with the Razor view engine.
Can you please the js files required in the scripts folder for binding Infragestic grid in MVC3. I am facing issues. It would be great if you can provide the complete sample code for binding grid in MVC3.Will be grateful for your help.. You can email me the same at puneetchabra@gmail.com.
Hi VaibhavJape2,
Here is a simple sample.
Controller code
public class PersonController : Controller
{
public IQueryable<Person> GetData()
return
Enumerable.Range(0, 100)
.Select(i => new Person { Id = i, FirstName = "FirstName" + i, LastName = "LastName" + i })
.AsQueryable();
}
public ActionResult Index()
return View(GetData());
[GridDataSourceAction]
public ActionResult GridDataAction()
View code
@using Infragistics.Web.Mvc
@using igGridMVCDataBinding.Models
@model IQueryable<Person>
@{
Layout = null;
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link type="text/css" href="Content/themes/base/ig.ui.min.css" rel="stylesheet" />
<link type="text/css" href="Content/themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="Content/js/combined/min/ig.ui.min.js"></script>
</head>
<body>
<div>
@(
Html.Infragistics().Grid(Model)
.Columns(columns =>
columns.For(p => p.FirstName);
columns.For(p => p.LastName);
})
.Features(features =>
features.Paging().PageSize(20);
.Width("400px")
.Height("400px")
.DataSourceUrl(Url.Action("GridDataAction"))
.DataBind()
.Render()
)
</div>
</body>
</html>
I should also add that you'll probably find more help available in the Infragistics jQuery forums located here:
http://community.infragistics.com/jquery/forums/default.aspx
With NA 2011.2 you can hid columns with features.Hiding
Here is an example of code:@( Html.Infragistics().Grid<Models.item>().ID("igGrid1").FixedHeaders(true).Columns(column =>{column.For(x => x.fld1).HeaderText("fld1").Width("90");column.For(x => x.fld2).HeaderText("fld2").Format("MM/dd/yyyy").Width("100");column.For(x => x.fld3).HeaderText("fld3").Format("currency").Width("155");column.For(x => x.fld4).HeaderText("fld4").Width("155");column.For(x => x.fld5).HeaderText("fld5").Format("MM/dd/yyyy").Width("100");column.For(x => x.fld6).HeaderText("fld6").Format("currency").Width("155");column.For(x => x.fld7).HeaderText("fld7").Width("100");column.For(x => x.fld8).HeaderText("fld8").Width("60");column.For(x => x.fld9).HeaderText("fld9").Width("10");column.For(x => x.fld10).HeaderText("fld10").Width("10");column.For(x => x.fld11).HeaderText("fld11").Width("400");}).Features(features =>{features.Sorting().Mode(SortingMode.Single).ApplyColumnCss(false);features.Selection().MouseDragSelect(false).MultipleSelection(false).Mode(SelectionMode.Row);features.Selection().Activation(true);features.Sorting();features.Paging().PageSize(25);features.Filtering().Mode(FilterMode.Advanced);features.Hiding().ColumnSettings(settings =>{settings.ColumnSetting().ColumnKey("fld1").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld2").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld3").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld4").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld5").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld6").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld7").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld8").Hidden(false).AllowHiding(false);settings.ColumnSetting().ColumnKey("fld9").Hidden(true).AllowHiding(true);settings.ColumnSetting().ColumnKey("fld10").Hidden(true).AllowHiding(true);settings.ColumnSetting().ColumnKey("fld11").Hidden(false).AllowHiding(false);});}).ClientDataSourceType(ClientDataSourceType.JSON).DataSourceUrl(Url.Action("someFunction", new RouteValueDictionary(new { id = Model.id}))).Width("100%").Height("400").DataBind().Render())
Thanks its fixed now after adding json2.js.
But now i am facing one more problem.
i have put one hidden column by making it's width 0, but still i can see that column having width around 1-2 px.
code is given below
@( Html.Infragistics().Grid<GridRow>()
.ID("igGrid1")
.Columns(column =>
column.For(x => x.DocumentType).DataType("string").HeaderText("Document Type");
column.For(x => x.AIV).DataType("string").HeaderText(" ").Width("0px");
features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT");
features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>
settings.ColumnSetting().ColumnKey("DocumentGuid").AllowSorting(true);
});
features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);
.ClientDataSourceType(ClientDataSourceType.JSON)
.DataSourceUrl(Url.Action(ViewBag.HI))
.Width("100%")
.Height("450")
.LocalSchemaTransform(true)
Hi Snohig,
Under IE 7 you need to manually add json2.js file in your scripts folder and to refer it on the page in order to prevent this errors. Some browsers like IE& or below are not natively implementing this:
Follow this link for more details:
http://stackoverflow.com/questions/4956076/problem-with-json-in-internet-explorer-7
I hope this helps.
For any further questions do not hesitate to contact me.
Sincerely,
Georgi Sashev
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
i tried above code in IE 7, but its giving JQuery error whenever i perform any action like paging or change page no. from top dropdown.