Questions on UI for ASP.NET MVC Forum

1 answer

390 views

How to hide model ID in mvc grid edit popup

Hi,

I'm working with telerik mvc grid, I'm trying to use the grid for crud operations, my model is supposed to have an id key which is stored in the model view item ut the user is not supposed to even know the id property can you help me not showing the id field in the edit popup.

Best

A. Guzman

Grid

answered on 28 Sep 2015

1 answer

462 views

MVC Grid modal edit item

Hi, I've been working with telerik mcv grid, i've used a modelview to pass the data to the controller. Now i want the user to be available to edit the row information but every time the user presses the edit button on the grid the modal window shows the item id which is not suposed to be displayed

This is the modelview

public class EmpleadoViewModel

{

public int EmpleadoID { get; set; }

[Required]

public String Nombre { get; set; }

[Required]

public String Email { get; set; }

[Required]

public String Activo { get; set; }

[Required]

public String Role { get; set; }

}

This is the grid config

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

.Name("people_grid")

.Columns(columns =>

{

columns.Bound(e => e.Nombre).Title("Nombres").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Bound(e => e.Email).Title("E-Mail").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Bound(e => e.Activo).Title("Estado").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Bound(e => e.Role).Title("Rol de sitio").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Command(command =>

{

command.Edit().Text("Editar").HtmlAttributes(new { @class = "sharp", onmouseover = "editBtnPopover(this)", onmouseout="hidePopover(this)" });

command.Custom("Deshabilitar").Click("disablePerson").HtmlAttributes(new { @class = "sharp", onmouseover = "disableBtnPopover(this)", onmouseout = "hidePopover(this)" });

}).Title("Acciones").HeaderHtmlAttributes(new { style = "text-align:center" });

})

.ToolBar(toolbar =>

{

toolbar.Create().Text("Nuevo").HtmlAttributes(new { id="new_btn" });

})

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

.Editable(editable =>

editable.Mode(GridEditMode.PopUp).Window(window =>

{

window.Draggable(false);

window.Title("ICS: Personas");

}))

.Scrollable()

.Sortable()

.Pageable(pageable =>

{

pageable.Refresh(false);

pageable.PageSizes(true);

pageable.ButtonCount(5);

})

.Events(events => events.Change("getSelectedItem"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model =>

{

model.Id(emp => emp.EmpleadoID);

model.Field(emp => emp.EmpleadoID).Editable(false);

})

.Create(update => update.Action("EditingPopup_Create", "Grid"))

.Read(read => read.Action("Read_Alpes_Employees", "Demo"))

.Update(update => update.Action("EditingPopup_Update", "Grid"))

.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))

)

Grid

answered on 28 Sep 2015

1 answer

391 views

MVC Grid modal edit item

Hi,

I'm working with telerik grid and using a custom modelview element to pass the data to the controller, when the user presses the Edit button inside the grid it should display the modelview item information or at least the information I want it to show, but so far just errors and an inconsistent look and feel when I use telerik controllers,

I've configured the Edit command to only show all fields of my viewmodel except the item id, but every time it keeps showing the item id,

This is my modelview item class

public class EmpleadoViewModel

{

public int EmpleadoID { get; set; }

[Required]

public String Nombre { get; set; }

[Required]

public String Email { get; set; }

[Required]

public String Activo { get; set; }

[Required]

public String Role { get; set; }

}

This is the grid settings

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

.Name("people_grid")

.Columns(columns =>

{

columns.Bound(e => e.Nombre).Title("Nombres").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Bound(e => e.Email).Title("E-Mail").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Bound(e => e.Activo).Title("Estado").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Bound(e => e.Role).Title("Rol de sitio").HeaderHtmlAttributes(new { style = "text-align:center" });

columns.Command(command =>

{

command.Edit().Text("Editar").HtmlAttributes(new { @class = "sharp", onmouseover = "editBtnPopover(this)", onmouseout="hidePopover(this)" });

command.Custom("Deshabilitar").Click("disablePerson").HtmlAttributes(new { @class = "sharp", onmouseover = "disableBtnPopover(this)", onmouseout = "hidePopover(this)" });

}).Title("Acciones").HeaderHtmlAttributes(new { style = "text-align:center" });

})

.ToolBar(toolbar =>

{

toolbar.Create().Text("Nuevo").HtmlAttributes(new { id="new_btn" });

})

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

.Editable(editable =>

editable.Mode(GridEditMode.PopUp).Window(window =>

{

window.Draggable(false);

window.Title("ICS: Personas");

}))

.Scrollable()

.Sortable()

.Pageable(pageable =>

{

pageable.Refresh(false);

pageable.PageSizes(true);

pageable.ButtonCount(5);

})

.Events(events => events.Change("getSelectedItem"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model =>

{

model.Id(emp => emp.EmpleadoID);

model.Field(emp => emp.EmpleadoID).Editable(false);

})

.Create(update => update.Action("EditingPopup_Create", "Grid"))

.Read(read => read.Action("Read_Alpes_Employees", "Demo"))

.Update(update => update.Action("EditingPopup_Update", "Grid"))

.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))

)

So far I'm very unhappy with your product, I can't modify certain things and also every time I use telerik it messes my whole page design!!!!

Grid

answered on 28 Sep 2015

2 answers

403 views

Refresh Parent Grid After sub-grid save

I have a hierarchical grid, containing a list of records, with their associated actions.

When an action is inserted, the data repository will adjust the status of the master record, according to the action type that has been inserted. This works, however I'm having difficulty refreshing the master grid to reflect the change in status.

I have put a handler on the action grids (the sub grid) save event, however this fires before the database change has been saved, so the change to the master grids data isn't reflected?

What event can I handle to refresh the master grid once the data has been saved?

The code is:-

@(Html.Kendo().Grid<SimpleChangeControl.Models.View_Action>()

.Name("ActionsGrid_#=ID#")

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

.Columns(columns =>

{

columns.Bound(o => o.ID).Title("ID");

columns.Bound(o => o.ActionType).Title("Type").ClientTemplate("<span>\\#=ActionTypeDescription\\#</span>").Filterable(f => f.UI("actionTypeFilter"));

columns.Bound(o => o.Description).Title("Description");

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

})

.Filterable(f => f

.Extra(false)

.Operators(o => o

.ForNumber(str => str.Clear()

.IsEqualTo("Equals"))))

.ToolBar(commands => commands.Create())

.Editable(editable => editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Error(@<text> function(e){subError(e,"ActionsGrid_#=ID#")} </text>))

.Model(m => m.Id(p => p.ID))

.PageSize(10)

.Read(read => read.Action("RD_Actions", "ChangeRequests", new { ChangeRequestID = "#= ID #" }))

.Create(create => create.Action("InsertAction", "ChangeRequests", new { CRID = "#= ID #" }))

.Update(update => update.Action("UpdateAction", "ChangeRequests"))

.Destroy(delete => delete.Action("DeleteAction", "ChangeRequests"))

)

.Filterable()

.Events(e=>e.Save("actionSave"))

.Pageable(p => p.Refresh(true))

.ToClientTemplate())

The handler is:-

function actionSave()

{

var grid = $('#Grid').data("kendoGrid");

grid.dataSource.read();

}

Grid

answered on 28 Sep 2015

1 answer

369 views

Kendo grid throws error

I have a grid defined thusly:

@Model VendorManagement.Web.Models.RiskExposureViewModel
@using Kendo.Mvc.UI

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

.Name("grdRiskMatrix")
.Columns(columns =>
{
columns.Bound(c => c.RiskUnit).Title("Risk Unit");
columns.Bound(c => c.RiskCategory).Title("Risk Category");
columns.Bound(c => c.RiskDescription).Title("Short Description");
})
.Read(read => read.Action("BindRiskMatrixGrid", "Risk"))
.Pageable()
)

RiskMatrixExposureList is a List<RiskMatrixExposure>. The grid as defined is throwing the following error in Razor:

"Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type"

I have the namespace defined in Views/web.config:

<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" />
<add namespace="VendorManagement.Web" />
<add namespace="Kendo.Mvc.UI" />
</namespaces>
</pages>
</system.web.webPages.razor>

Thanks for they help!

Grid

answered on 28 Sep 2015

1 answer

205 views

Default Item in Dropdown for Custom List

I have a Target field in my PopupEditor that's using custom List to display a dropdown in the View. I want the first item in the custom list (Self) to show as the default value in the dropdown.

View:

@Html.LabelFor(model => model.Target, new { @class = "col-sm-5 control-label" })

<div>

@Html.EditorFor(model => model.Target)

</div>

Controller:

public ActionResult Index()

{

ViewData["Targets"] = ixList.Targets();

return View();

}

Custom List (ixList):

public static List<TargetsModel> Targets()

{

List<TargetsModel> targets = new List<TargetsModel>();

targets.Add(new TargetsModel { Description = "Self", Target = "_self" });

targets.Add(new TargetsModel { Description = "Blank", Target = "_blank" });

return targets;

}

Model:

[UIHint("GridForeignKey")]

public string Target { get; set; } // target = _blank, _self

How would I go about setting the first item Self to the default value? Right now the default value appears to be null.

Editor

answered on 28 Sep 2015

1 answer

89 views

Get job information when double click

I have an ID and status for every job and I need to grab that ID and status when I double click on the job. Is it possible to set attributes for the job ID and status and then catch those with jQuery?

Thanks in advance.

Scheduler

answered on 28 Sep 2015

6 answers

413 views

Foreign Key column not loading DropDownLoad in Edit Mode (Kendo.Mvc v.2013.3.1119.545)

Currently I have a grid that I am trying to have a drop down list appear in one of the columns while in Edit mode using the ForeignKey column.

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

.Name("grid")

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

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

model.Field(p => p.Date);

model.Field(p => p.TypeID);

})

.Read(read => read.Action("grid_Read", "Grid", new { ID = Model.ID }))

.Update(update => update.Action("grid_Update", "Grid", new { ID = Model.ID }))

.PageSize(10))

.Columns(columns =>

{

columns.Bound(c => c.RequestedDate).Format("{0:d}").EditorTemplateName("_DateTime").Width(200);

columns.ForeignKey(c => c.TypeID, (System.Collections.IEnumerable)ViewBag.Types, "TypeID", "TypeName").Title("Test Types");

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

})

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

.Pageable(pageable => pageable.Messages(messages => messages.Empty("Nothing Here")))

.Sortable(sortable => sortable.AllowUnsort(false))

)

The grid loads with all the correct data, and even shows the TypeName name while in Read mode. However, when switching to Edit mode the column shows the TypeID in a text box, not a drop down list. The code to populate the ViewBag is below

ViewBag.Types = _service.Repository.InspectionTypes;

All the data appears to end up on the page - when inspecting the editable element the list of options appears in a jQuery script, however, they do not populate a drop down while editing.

The code matches the Kendo MVC demo as much as possible, so am I missing something? Are there certain constraints that need to be met?

Grid

answered on 28 Sep 2015

1 answer

223 views

Overlapping notifications

Hi,

I need to be able to show some notifications that auto hide after 5 seconds and others that don't auto hide. I am achieving this by using this code when I want to show a notification for 5 seconds:

01.var fadingnotification = $("#fadingnotification").kendoNotification({

02. position: {

03. pinned: true,

04. bottom: 60,

05. right: 30

06. },

07. stacking: "up",

08. autoHideAfter: 5000,

09. templates: [{

10. type: "stickyinfonodismiss",

11. template: $("#stickyInfoNoDismissTemplate").html()

12. }, {

13. type: "stickyinfo",

14. template: $("#stickyInfoTemplate").html()

15. }, {

16. type: "info",

17. template: $("#infoTemplate").html()

18. }]

19.}).data("kendoNotification");

20.

21.fadingnotification.show({

22. message: msgToDisplay

23.}, "info");

and using the same code but with "autoHideAfter: 0" for the ones that I want to display without hiding.

The problem I have is that this effectively initiates a new notification GUID each time so the notifications start again at the bottom of the screen each time even if there are already notifications on screen.

Ideally I want to just change the autoHideAfter option without initialising a new notification and therefore a new GUID.

Any ideas?

Thanks,

Mark.

Notification

answered on 25 Sep 2015

3 answers

378 views

post dates from asp.net mvc to controller

I've following grid with inline edit. For selecting date and time they have their respective date and time controls. I want to post date in '12-Sep-2015 12.00.00' format and time in '09:00:00' format to mvc control action. But when I post the data, date is in the 'Wed Sep 23 2015 00:00:00 GMT-0400 (Eastern Daylight Time)' format. Time is in the 'Sat Sep 19 2015 15:00:00 GMT-0400 (Eastern Daylight Time)' format. This only happens if I change date and time value. If I don't change, values are posted the way I want to. What do I do to post data in proper format after edit?

@(Html.Kendo().Grid<Kyklos.ClinicPortal.ViewModels.AppointmentViewModel>()
.Name("UpCmgApptGrid").
Columns(columns =>
{
columns.Bound(c => c.strAppintmentDate).Title("Appintment Date").Format("{0:MM/dd/yyyy}").EditorTemplateName("Date");
columns.Bound(c => c.strAppintmentTime).Title("Appintment Time").Format("{0:hh:mm tt}").EditorTemplateName("Time");
columns.Bound(c => c.DoctorName).Title("Doctor");
columns.Command(command => { command.Edit(); }).Title("Edit").Width(250);
columns.Command(command => { command.Destroy(); }).Title("Delete").Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.Events(events => events.Cancel("onCancel"))
.DataSource(
dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(a => a.PatAppointment.AppointmentId);
model.Field(a => a.DoctorName).Editable(false);
})
.Read("UpcomingAppointment_Read", "Appointment", new { PatientId = Model.PatAppointment.PatientId })
.Update(update => update.Action("UpcomingAppointment_Update", "Appointment"))
.Destroy(update => update.Action("UpcomingAppointment_Destroy", "Appointment"))
)
)

Grid

answered on 25 Sep 2015