Questions on UI for ASP.NET MVC Forum

1 answer

309 views

I have the following hierarchy grid that is server bound. In the DetailTemplate I have tried 2 columns containing a Url.Action link. The .ClientTemplate column does not render to the page as an anchor. The .Template column has a syntax error at the @<text>. How can I get a Url.Action column to render in the expansion hierarchy?

Thanks.
Dan

Code:

@model IEnumerable<EquipmentsSummary>

<div class="info-row">

@(Html.Kendo().Grid(Model)

.Name("EquipmentGrid")

.Columns(columns =>

{

columns.Bound(e => e.ID).Hidden();

columns.Bound(e => e.PatientId).Hidden();

columns.Template(@<text>

<a href="@Url.Action("EquipmentSettingEdit", Controllers.Employee, new { equipmentid=item.ID, settingid=0 }) "class='btn btn-sm'>Add</a>

</text>).Width(75).Title("Add<br />Setting");

columns.Bound(e => e.EquipName).Title("Item Name");

columns.Bound(e => e.SerialNo).Title("Serial #");

columns.Bound(e => e.AssetStatus).Title("Status");

columns.Bound(e => e.AssetStatusDate).Title("Date");

})

.HtmlAttributes(new { style = "height: 500px;" })

.Pageable(pageable => pageable

.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })

.ButtonCount(5))

.Sortable()

.Filterable()

.Scrollable()

.DataSource(dataSource => dataSource.Server()

.PageSize(20))

.DetailTemplate(

@<text>

@(Html.Kendo().Grid(item.SettingItems)

.Name("Settings_" + item.ID)

.Columns(columns =>

{

columns.Bound(s => s.SettingID).Hidden();

columns.Bound(s => s.EffectiveDate).Title("Date").Format("{0:g}");

columns.Bound(s => s.AssetStatus).Title("Status");

columns.Bound(s => s.Clinician);

columns.Bound(s => s.SettingID).ClientTemplate(

"<a href='" + Url.Action("EquipmentSettingEdit", Controllers.Employee) + "/?equipmentid=#=item.ID#&settingid=#=SettingID#'" + "class='btn btn-sm'>Details</a>"

).Width(75).Title("").Filterable(false);

columns.Template(

@<text>

<a href='@Url.Action("EquipmentSettingCopy", Controllers.Employee)' class='btn btn-sm'>Copy</a>

</text>).Width(75).Title("").Filterable(false);

})

.DataSource(dataSource =>dataSource.Server().PageSize(20))

.Pageable(pageable => pageable

.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })

.ButtonCount(5))

.Sortable()

.Filterable()

.Scrollable()

)

</text>

)

.RowAction(row =>

{

if (row.Index == 0)

{

//row.DetailRow.Expanded = true;

}

else

{

var requestKeys = Request.QueryString.Keys.Cast<string>();

var expanded = requestKeys.Any(key => key.StartsWith("Settings_" +

row.DataItem.ID) ||

key.StartsWith("SettingItems_" + row.DataItem.ID));

row.DetailRow.Expanded = expanded;

}

})

)

</div>

Grid

answered on 03 Jul 2014

4 answers

49 views

Kendo ui Ajax binding paging thrpwing js error

Hi There,

I am currently working on Kendo Grid. I have implemented ajax binding with default paging using the below link
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

In ie10 i am getting a javascript error in aspnetmvc.min.js file before the pageload. once page loaded everything is working perfectly.
below is the code i have used.

I am using Kendo.MVC.dll and KendoAjaxBinding.Model.dll of version v4.0.30319

.cshtml
--------
<div>
@(Html.Kendo().Grid<KendoUIAjaxBinding.Model.PM_ANO>()

.Name("grid")
.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Products_Read", "Home")

.Data("productsReadData")
)
)
.Columns(columns =>
{
columns.Bound(anomaly => anomaly.GOD);
columns.Bound(anomaly => anomaly.VER);
// Create a column bound to the ProductID property
columns.Bound(anomaly => anomaly.C_ANO);
// Create a column bound to the ProductName property
columns.Bound(anomaly => anomaly.Y_ANO);
// Create a column bound to the UnitsInStock property
columns.Bound(anomaly => anomaly.Z_REP_AUTO);
})
.Pageable(x => x.PageSizes(true)) // Enable paging
.Sortable() // Enable sorting
)
</div>

in Layout page i have rendered like this
----------------------------------------
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/Kendo/kendo.web.min.js"></script>
<script src="~/Scripts/Kendo/kendo.aspnetmvc.min.js"></script>

</head>

controller code
------------------
public JsonResult

Products_Read([DataSourceRequest]DataSourceRequest request, string firstName, string lastName)
{

var _context = new E2A_GUIEntities();

IQueryable<PM_ANO> anomaly = _context.PM_ANO;

var total = anomaly.Count();

if (request.Page > 0)
{
anomaly = anomaly.OrderBy(a => a.C_ANO).Skip((request.Page - 1) * request.PageSize);
}
anomaly = anomaly.Take(request.PageSize);
var result = new DataSourceResult()
{
Data = anomaly, // Process data (paging and sorting applied)
Total = total // Total number of records
};

return Json(result, JsonRequestBehavior.AllowGet);

}

Please help me in resolving this.

Thanks and Regards,
Gangadhar.

Grid

answered on 03 Jul 2014

9 answers

1.0K+ views

Field value empty on edit when use grid in EditorTemplates

I use a Grid in a view to show this structure (EntityFramework):
Class1 {
     Name;
     ContactProperty: Contact {
          Name;
          Property2: List<DMConEmail> {
               Type
               Email
          }
     }
}

I first use a flat view to show and edit data and use a Grid with ajax to show the Property2 list:
        @(Html.Kendo().Grid<Lorem.Core.DataModels.Contacts.DMConEmail>()
    .Name("Contact_Emails")
    .Columns(columns =>
    {
        columns.Bound(p => p.Type);
        columns.Bound(p => p.Email);
        columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(datasource => datasource.Ajax()
        .Model(model => model.Id(p => p.IdEmail))
        .Create(update => update.Action("EmailInsert", "Contact", new { idContact = Model.IdContact }))
        .Read(read => read.Action("EmailGetList", "Contact", new { idContact = Model.IdContact }))
        .Update(update => update.Action("EmailUpdate", "Contact"))
        .Destroy(update => update.Action("EmailDelete", "Contact"))
        ))

All is working fine for this.

For re-usability, I put the contact model class in an EditorTemplates and when I click the edit button in a grid row, I lost all the field content.
    @Html.EditorFor(m => m.ContactProperty, "DMConEmail")

Summary:
When I use a flat view, the editing line in the grid keep values in texbox. When I use the grid in an EditorTemplate, the editing line textbox was empty.

Thanks for the help.

Grid

answered on 03 Jul 2014

1 answer

963 views

Dashboard with drag and drop widgets

Hi,

I want to create dashboard with drag and drop widgets. Users can add, delete and move available widgets. Please provide me starting point how do I achieve desired functionality.

Thanks in advance.

General Discussions

answered on 03 Jul 2014

1 answer

64 views

Formatting issue in posted example - alt row template

The attached image displays the results from including the first two examples from http://docs.telerik.com/kendo-ui/api/web/grid. (I added a couple of rows to the data source in the first one).

Why are the even number rows displaying the age value in the name column right next to the name?

How do I fix this?

Grid

answered on 03 Jul 2014

1 answer

130 views

altRowTemplate

The first example on http://docs.telerik.com/kendo-ui/api/web/grid has the following line:

altRowTemplate: kendo.template($("#alt-template").html())

Does this row contain information about the colors used in the alternating rows? Right now it displays them in white and grey. If I wanted to change the colors how would I go about doing so?

Grid

answered on 03 Jul 2014

1 answer

336 views

Horizontal Scroll Bar

Hello

My grid has a lot of columns. When the grid loads, there is not horizontal scroll bar so the columns are quite squashed.

If I resize a column, a horizontal scroll bar appears.

Is there a way to show the horizontal scroll bar from the beginning, having all columns at their natural width?

Thanks,

Richard

Grid

answered on 03 Jul 2014

4 answers

102 views

Populating a grid

I'm trying to use a Kendo grid for the first time: Here's the code for the grid:

@model IEnumerable<SustIMS.Models.ModelTest>

<div id="clientsDb">
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Genre).Width(140);
columns.Bound(c => c.Title).Width(190);
columns.Bound(c => c.ReleaseDate);
columns.Bound(c => c.Price).Width(110);
})
.HtmlAttributes(new { style = "height: 90%;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "MasterDataController"))
)
)
</div>

<style scoped>
#clientsDb {
width: 95%;
height: 95%;
margin: 20px auto 0;
padding: 50px 4px 0 4px;
background: url('@Url.Content("~/content/web/grid/clientsDb.png")') no-repeat 0 0;
}
</style>

This displays the grid without any data in it. I've created a test model and am trying to add data like this in the controller:

public void Read()
{
ModelTest mt = new ModelTest();
mt.Title = "This is the title";
mt.Price = 10.5m;
}

This doesn't show any data in the grid. How can I pass data into it?
And does it have to come from a model or can it be added in a custom way?

Grid

answered on 02 Jul 2014

3 answers

124 views

Persistance grid paging, sorts, and filters

Hi,

I'm using a grid to display the results from a search. The client made a request that when he/she bookmark the page the grid remember the fitlers, sort, and page. How can I achieve this?

Thanks,

Grid

answered on 02 Jul 2014

2 answers

1.0K+ views

Kendo UI MVC grid popup edit template depending on row condition

Hello,

I have a kendo UI MVC grid, I use the popup edit template.
And I created a customer edit templates. My model has a property as type (holds three different values).
For different type, my edit template condition changes.

For example, the release date - for Type 1, it is read only; for Type 2, it is editable; and for Type 3, the label needs to be changed slightly.

I tried to use if statement in the partial view (custom edit template) to check. But it does not work since popup edit template is loaded when grid is loaded.

So is there a way that I can accomplish what I described here with kendo UI grid?

Thanks in advance

Dongfen Gao

Grid

answered on 01 Jul 2014