Questions on UI for ASP.NET MVC Forum

9 answers

1.0K+ views

This is probably a really ignorant question but I'm trying to make my Popup Editor Template 4 columns wide vs the default 2. I have looked at this --> custom-popup-editor and this -->Forum Search

Ideally I could use Bootstrap to setup that template however I wish but I cannot get the very basic `<div class="row"> <div class="col-md-4">` to work. I am currently looking at this --> Kendo and Bootstrap Docs to try and make that work.

At the end of the day I just need to be able to make my Popup Editor 4 columns wide(i.e. label - editor - label - editor) Don't care how I get there.

This is my Editor Template, _Staff.cshtml, and below that is the Index.cshtml that has the Grid that calls it.

@model MyApp.Models.StaffViewModel

@Html.HiddenFor(m => m.StaffID)

<div class="row">

<div class="col-lg-2">

@Html.LabelFor(m => m.GPEmployeeID)

</div>

<div class="col-lg-4">

@Html.EditorFor(m => m.GPEmployeeID)

@Html.ValidationMessageFor(m => m.GPEmployeeID)

</div>

<div class="col-lg-2">

@Html.LabelFor(m => m.FirstName)

</div>

<div class="col-lg-4">

@Html.EditorFor(m => m.FirstName)

@Html.ValidationMessageFor(m => m.FirstName)

</div>

@(Html.Kendo().Grid<MyApp.Models.StaffViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.GPEmployeeID);

columns.Bound(c => c.UserID);

columns.Bound(c => c.LastName);

columns.Bound(c => c.FirstName);

columns.ForeignKey(c => c.PrimaryCountyID,(System.Collections.IEnumerable)ViewData["Counties"],"CountyID","CountyName");

columns.Bound(c => c.WorkPhone);

columns.Bound(c => c.WorkEmail);

columns.ForeignKey(c => c.OfficeID,(System.Collections.IEnumerable)ViewData["Offices"],"OfficeID","OfficeName");

columns.ForeignKey(c => c.StaffTypeID,(System.Collections.IEnumerable)ViewData["StaffTypes"],"StaffTypeID","StaffType");

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

})

.ToolBar(toolbar => {

toolbar.Create();

})

.ColumnMenu()

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Staff"))

.Pageable()

.Groupable()

.Sortable(sortable => {

sortable.SortMode(GridSortMode.SingleColumn);

})

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

.Scrollable(scrollable => scrollable.Enabled(false))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

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

})

.Read(read => read.Action("tblStaffExtendeds_Read", "TStaff"))

.Create(create => create.Action("tblStaffExtendeds_Create", "TStaff"))

.Update(update => update.Action("tblStaffExtendeds_Update", "TStaff"))

.Destroy(destroy => destroy.Action("tblStaffExtendeds_Destroy", "TStaff"))

)

Grid

answered on 04 Apr 2016

2 answers

86 views

MVC Grid create rows rapidly

I have a grid similiar that. But I don't want to close pop-up window; after clicking Update Button, i want to save record and clear all (or some) fields and continue to create (other) new record. So user can re-insert new record rapidly (multiple insert in the same window).

Finally user click the "cancel" (or close) button and popup will be closed. How can I do that.

Grid

answered on 04 Apr 2016

2 answers

233 views

Client side paging example?

Hi, sorry if this is documented somewhere but I didn't find it. Is it possible to do client side paging with the listview so the entire dataset is stored on the client-side?

Reason I ask is I have one item per page and always in "Edit" mode. When I change pages any changes are lost, unless I save it to DB automatically when paging, which I want to avoid. I'd like to be able to have the entire dataset on the client-side and changes saved client-side only. Is there an out of the box way to do this?

ListView

answered on 02 Apr 2016

3 answers

214 views

Dynamically change grid data in javascript

In javascript, based on user selection, I want to dynamically change grid datasource, reading data from controller. sample codes below

This controller action will be triggered, but the grid will show "No items to display". My controller action is like below...

public ActionResult getIDView([DataSourceRequest] DataSourceRequest request, int? factorID_)
{
List<PersonView> li = new List<PersonView>();
//some code here...
return Json(li.ToDataSourceResult(request));
}

Anyone knows what's wrong here? Thanks

Grid

answered on 01 Apr 2016

4 answers

237 views

Resource Colors and Resource Groups

Hi!

In the Timeline Demo, it shows 2 rooms and 3 attendees. When the data is plotted, it shows the color of the rooms assigned in the Resource. Is it possible to display the color that is associated with the attendees instead?

Chuck

Scheduler

answered on 01 Apr 2016

2 answers

94 views

Custom binding and data loading

I am using custom binding and have followed this documentation http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/custom-binding

I read the data from a database, I am wondering if there is a way NOT to do this every time the user goes to a new page, changes the sorting, filtering, page size etc?

Regards, Jill-Connie Lorentsen

Grid

answered on 01 Apr 2016

3 answers

148 views

MVC Grid - Export to Excel, PageSize

We are using the GridRouteValues() to save the user's preferred page size for grids.

When the Export to Excel function is used with the All Pages option set to True, it sets the PageSize in the RouteValues to the total rows to be exported. This causes our saved user's page size to be set to that value. We don't want to save that PageSize when it's for the Export to Excel, but I can't see a way to distinguish that call to the controller from the others.

Any ideas?

Grid

answered on 01 Apr 2016

1 answer

667 views

Inline Edit and Update with ViewModel

Hello,

I have a kendo grid in my MVC application. I have a viewmodel that shows related data in the grid, when the user edits a row using inline editing I need it to update the database via the viewmodel. How is this done?

My grid code

@(Html.Kendo().Grid<Multiple_Table_Post.ViewModels.MultiPostViewModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(c => c.id).Title("ID");

columns.Bound(c => c.parent_id).Title("PID");

columns.Bound(c => c.vessel_name).Title("Name")

.ClientTemplate("<a href='" + Url.Action("Details", "Vessels") + "/#=parent_id#'" + ">#=vessel_name#</a>");

columns.Bound(c => c.vessel_location).Title("Location");

columns.Bound(c => c.vessel_mmsi).Title("MMSI");

columns.Bound(c => c.vessel_bhp).Title("BHP");

columns.Bound(c => c.vessel_omid).Title("OMID");

columns.Command(command =>

{

command.Edit()

.Text("Edit")

.UpdateText("Update")

.CancelText("Cancel");

}).Width(110);

}

)

.Pageable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(7)

.Read(read => read.Action("data_read", "InlineEdit"))

.Update(update => update.Action("data_update", "InlineEdit"))

.Sort(sort => sort.Add("id").Descending())

.Model(model =>

{

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

})

)

The viewmodel

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

using Multiple_Table_Post.Models;

namespace Multiple_Table_Post.ViewModels

{

public class MultiPostViewModel

{

// #Vessel

public int id { get; set; }

[Display(Name = "Name [Vessels(table)]")]

[Required(ErrorMessage = "Vessel name cannot be left blank")]

public string vessel_name { get; set; }

[Required(ErrorMessage = "Location cannot be left blank")]

[Display(Name = "Location [Vessels(table)]")]

[UIHint("LocationEditor")]

public string vessel_location { get; set; }

[Display(Name = "MMSI [Vessels(table)]")]

public string vessel_mmsi { get; set; }

// #Vessel Details

// Without primary key ID.

[Display(Name = "OMID [Vessels Details(table)]")]

public Nullable<System.DateTime> vessel_omid { get; set; }

[Display(Name = "BHP [Vessels Details(table)]")]

[Required(ErrorMessage = "BHP cannot be left blank")]

public Nullable<decimal> vessel_bhp { get; set; }

[Display(Name = "PID [Vessels Details(table)]")]

public Nullable<int> parent_id { get; set; }

[Display(Name = "DECK [Vessels Details(table)]")]

public Nullable<decimal> vessel_deck { get; set; }

public virtual ICollection<vessel_details> vessel_details { get; set; }

}

Controll

public ActionResult data_read([DataSourceRequest]DataSourceRequest request)

{

var datacontext = db.vessel_details.AsQueryable();

IQueryable<MultiPostViewModel> thevessel = from c in datacontext

select new MultiPostViewModel

{

id = c.id,

parent_id = c.vessel.id,

vessel_name = c.vessel.vessel_name,

vessel_location = c.vessel.vessel_location,

vessel_mmsi = c.vessel.vessel_mmsi,

vessel_omid = c.vessel_omid,

vessel_bhp = c.vessel_bhp,

};

DataSourceResult result = thevessel.ToDataSourceResult(request);

return Json(result);

}

Controller : UPDATE Grid Data

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult data_update([DataSourceRequest]DataSourceRequest request, VesselsViewModel vessel)

{

if (ModelState.IsValid)

{

var entity = new vessel();

entity.id = vessel.id;

entity.vessel_name = vessel.vessel_name;

entity.vessel_location = vessel.vessel_location;

entity.vessel_mmsi = vessel.vessel_mmsi;

db.vessels.Attach(entity);

db.Entry(entity).State=EntityState.Modified;

db.SaveChanges();

}

return Json(new[] { vessel }.ToDataSourceResult(request, ModelState));

}

The update code is where I am stuck, how can I get this code to use my view model and update the related tables?? Anyone ever had this problem?

Thanks

Grid

answered on 31 Mar 2016

1 answer

335 views

Grid Edit PopUp Window - Center on Resize

I have a Kendo Grid that is formatted to edit in a popup window with a custom template:

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MyEditor").Window(w => w.Resizable().Events(e => e.Resize("popupResize"))))

That popup edit window template ("MyTemplate") has multiple controls on it which includes a Kendo TabStrip. One of the tabstrip items contains another Kendo Grid. Depending on the datasource of that grid, the width and height of the popup window may change. This may even take the edit popup window partially off the screen.

The problem is that the Resize event (which I'm subscribing to as shown above) of the grid popup window doesn't fire when the window's size changes due to changes in the content. It only fires if the user resizes the window with their mouse.

Is there a way to know when the content width/height of a popup edit window changes so I can call the center() method on the edit popup window?

Grid