Questions on UI for ASP.NET MVC Forum

3 answers

193 views

Not capturing correct row information from grid

I have a grid (EditPersonnelRolesGrid) with a column holding a dropdownlist for a training role. For each row on this list the dropdownlist will hold different values.

I use an EditorTemplate (GridPersonnelRoles) to render the dropdownlist. The dropdown list has a Datasource.Read() where it passes the training exercise id to the controller which then passes back the relevant select list of training roles. The exercise id is stored as a column on EditPersonnelRolesGrid. A JavaScript function (getParentId) tries to get this information from the grid row. This code was adapted from other threads regarding the same problem. However this javascript function always returns the first row of grid values regardless of what row is selected. I would appreciate any help.

EditPersonnelRoles.cshtml:

@model IEnumerable<PersonnelRoleEditorModel>

@using Mallon.IReport.Models

@Html.Hidden("ID", (object)ViewBag.DrillReport)

@Html.Hidden("exID", (object)ViewBag.ExerciseID)

@Html.Hidden("TrainingEventID", (object)ViewBag.TrainingEventID)

@Html.Hidden("personID", (object)ViewBag.PersonID)

<table style="width:100%">

<tr>

<td>

<div class="list rounded">

@(Html.Kendo().Grid<PersonnelRoleEditorModel>()

.Name("EditPersonnelRolesGrid")

.Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))

.AutoBind(true)

.Columns(columns =>

{

columns.Bound(r => r.PersonnelId).Hidden();

columns.Bound(r => r.ExerciseAllocationId).Hidden();

columns.Bound(r => r.ExerciseName).Title("Exercise");

columns.ForeignKey(r => r.RoleOid, (System.Collections.IEnumerable)ViewBag.Roles, "Value", "Text")

.EditorTemplateName("GridPersonnelRoles")

.Title("Exercise")

.Width(200);

columns.Command(command => { command.Edit(); }).Width(172);

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.PersonnelId);

model.Field(p => p.ExerciseName).Editable(false);

})

.Events(e =>

{

e.Error("handleAjaxError");

})

.Update(update => update.Action("UpdateExerciseRoles", "DrillAttendance"))

.Read(read => read.Action("ReadPersonnelRoles", "DrillAttendance").Data("getPersonnelRolesValues"))

))

</div>

</td>

</tr>

</table>

GridPersonnelRoles.cshtml:

@model object

@(Html.Kendo().DropDownListFor(m => m)

.DataValueField("Value")

.DataTextField("Text")

.DataSource(ds => ds.Read(read => read.Action("GetDropDownRolesList", "DrillAttendance").Data("getParentId")))

)

Javascript:

function getParentId() {

var target = $(event.currentTarget);

var row = $(target).closest("tr");

var grid = $(target).closest("[data-role=grid]").data("kendoGrid");

var dataItem = grid.dataItem(row);

return { exerciseId: dataItem.ExerciseAllocationId };

}

Controller code:

public JsonResult GetDropDownRolesList(string exerciseId)

{

ExerciseAllocation ea = DbSession.Get<ExerciseAllocation>(new Guid(exerciseId));

SelectList Roles = SelectListHelper.TrainingEventRoles(DbSession, ea.Exercise, ea.Role);

return Json(Roles, JsonRequestBehavior.AllowGet);

}

Grid

answered on 28 Apr 2016

7 answers

1.3K+ views

Select All items after data is read

Trying to figure out how to select all items in a multiselect after reading the data.

@(Html.Kendo().MultiSelect()
.Name("Benchmarks")
.DataValueField("ID")
.DataTextField("BenchmarkName")
.Events(e => e.DataBound("selectAllBenchmarks"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetBenchmarksForPeriodOfEntry", "Reporting")
.Data("filterPeriodOfEntry");
});
})
.AutoClose(true)
.HtmlAttributes(new { style = "width: 240px" })
)

my "selectAllBenchmark" function fires but then I don't know how to loop through the datasource and select each item in the datasource.

MultiSelect

answered on 27 Apr 2016

1 answer

60 views

Sharing the grids DataSource with the Filterable Datasource

Hey all...

I'm trying to figure out something that's either probably pathetically simple and is for some reason just eluding me or it's not possible and I've pulled all this hair out for nothing...

I know that when you just add the .Filterable property onto a column it adds the nifty little filter onto it that's pretty awesome out of box. The one small over-site IMHO is that it is not a distinct list and is not sorted. I haven't seen any options to enable these sort of things...and I've been reading posts from others looking for this sort of functionality...and they've been told it's not there yet.

So what I want to do is to pass the Grid's DataSource into a controller action as an argument using the .Data off the .Read in the .Filterable's .DataSource...then inside that controller action I'd use a Linq query to return a sorted distinct list.

The reason I want to do that is I want to avoid having to make another call across the wire to get all those record when I already had them in the grid...it should be more performant IMHO. :)

So is this possible and I'm just missing it? I'm using Razor so I'd appreciate any examples to be in that format, but I'll take any help in any format I can get. :)

Grid

answered on 27 Apr 2016

1 answer

66 views

Customization

I'm trying to customize the Scheduler to have a light-weight Control, without header and footer (Navigation, etc)
The rows height should also be much smaller.

You will find attached to this message an image that shows what I want to achieve...
Is that possible?

Thank you !

Scheduler

answered on 27 Apr 2016

1 answer

533 views

Detail template and partial view

Hello,

Can you use the detail template to display a partial view thats loaded by ajax ?

I currently have a div outside of the grid that is loaded when you click a line in the grid , but it would be smarter if it just opened up a detail and displayed the partial view there in.

Any ideas on how to do that ?

Regards,

Emil

Grid

answered on 27 Apr 2016

3 answers

636 views

Grid Inline Edit - make fields editable based on the value in the model

I have inline grid, I want to edit one field if the model.ebs is true or edit another field if the model.ebs is false.

@(Html.Kendo().Grid<ViewModels.Payment.ProviderServiceRRViewModel>()

.Name("PRRServiceGrid")

.Columns(columns =>

{

columns.Bound(p => p.Id).Hidden(true);

columns.Bound(p => p.IsEbsOnly).Hidden(true);

columns.Bound(p => p.ServiceName);

columns.Bound(p => p.Units);

columns.Bound(p => p.ReduceUnits);

columns.Bound(p => p.ReimbursementAmount).Format("{0:c}");

columns.Command(command =>

{

command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });

})

.Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))

.Sortable()

.Selectable()

.Events(e => e.Edit("onPRRServiceGridEdit"))

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequest", new { prrId = @Html.Raw(Json.Encode(Model.PrrId)), serviceType = @Html.Raw(Json.Encode(Model.ServiceType)) }))

.Model(model =>

{

model.Id(p => p.Id); model.Field(p => p.Id).Editable(false);

model.Field(p => p.ServiceName).Editable(false); //I did not make Units, reduce units column editable false

model.Field(p => p.ReimbursementAmount).Editable(false);

})

.Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequest"))

))

function onPRRServiceGridEdit(e) {

var isEbsOnly = e.model.IsEbsOnly;

if(isEbsOnly) //I made it disable but I want to close the cell. I dont want to make it editable if the value is true

$(e.container).find('input[name="ReduceUnits"]').attr("disabled", true);

else

$(e.container).find('input[name="Units"]').attr("disabled", true);

}

Grid

answered on 26 Apr 2016

2 answers

410 views

Add Sheet to Excel Export

Is there a way to add a new sheet to the e.workbook.sheets[] array in my ExcelExport() grid event function? I'm trying to create an Excel export that has two sheets. One sheet will be formatted just as the grid displays. The other sheet will require some custom code to format the sheet as desired.

Thanks!

Grid

answered on 26 Apr 2016

3 answers

299 views

Export to Excel invokes Datasource read function in ASP MVC

I am not sure if this is by design but when i click on button that exports to excel when the grid has no data, it invokes the ajax read call first and then export the result in excel. If the grid already has the result, it seems like it doesn't call the read function and it exports the result right away.

In the following code, 'GetPurchaseOrders' gets invoked whenever excel button is clicked whenever excel to export button is clicked.

Any idea why this is happening?

Thanks.

@(Html.Kendo().Grid<SupplierPortal.ViewModels.PoViewModel>()

.Name("GridPOSearchHeaderInfo")

.Columns(columns =>

{

columns.Bound(e => e.Revision).Width("120px").HtmlAttributes(new { @style = "text-align:right;" });

columns.Bound(e => e.SupplierNumber).Width("170px").HtmlAttributes(new { @style = "text-align:right;" });

columns.Bound(e => e.SupplierName).Width("160px");

})

.Excel(excel => excel

.FileName("PurchaseOrders.xlsx")

.ProxyURL(Url.Action("Excel_Export_Save", "Supplier"))

.AllPages(true)

)

.ToolBar(tools =>

{

tools.Template(@<text>

<div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 pull-right" style="padding-left: 0; margin-top: 2px; text-align: right;">

@Html.ActionLink(" ", "SaveView", "PurchaseOrder", null, new { @class = "modal-link k-button POcolumn", @style = "padding-left: 10px;", @title = "Customize Grid" })

<a class="k-button k-button-icontext k-grid-excel POexport" href="#" style="padding-left: 10px;" title="Export to Excel"><span class="k-icon k-i-excel"></span></a>

</div>

</text>);

})

.Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).ButtonCount(4))

.Reorderable(reorder => reorder.Columns(true))

.AutoBind(false)

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Selectable()

.ColumnMenu()

.Scrollable(scr => scr.Height(322))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("GetPurchaseOrders", "PurchaseOrder").Data("GetSearchParameters"))

.ServerOperation(false)

)

.Events(events => events.DataBound("gridDataBound"))

.Events(events => events.DataBinding("gridDataBinding"))

)

Grid

answered on 26 Apr 2016

1 answer

864 views

Initialize Combobox for each row of Telerik MVC Grid

I am adding selected row of a grid to another . My issue is my Grid has a combo box which is being initialized for first row only. Detail is in following link.

http://stackoverflow.com/questions/36793242/initialize-combobox-for-each-row-of-telerik-mvc-grid

Grid