Questions on UI for ASP.NET MVC Forum

3 answers

169 views

[Solved] Virtualization results in strange display behavior

Correct data is returned from the server, and it seems to be paging correctly, but I get a big empty dropdown list. What am I doing wrong? As far as I can tell, this code matches the code from the demo. Using v.2015.2.805.545.

Controller:

public ActionResult GetCustomers([DataSourceRequest] DataSourceRequest request) {

var customers = Context.Customers.Where(c => c.DateDeleted == null);

var results = customers.ToDataSourceResult(request, ModelState, c => new CustomerSelectListItem(c));

return Json(results, JsonRequestBehavior.AllowGet);

}

public ActionResult CustomersValueMapper(int[] values) {

//this method exists to get a concrete "row number" for the value(s) in question.

//

//to fulfill this requirement, we're using List's FindIndex method over a collection of all customers stored in the Session

//

var indices = new List<int>();

var customers = GetAllCustomers();

if (values != null) {

//add all customers with indices >= 0

indices.AddRange(values.Select(value => customers.FindIndex(c => c.Id == value))

.Where(index => index >= 0));

}

return Json(indices, JsonRequestBehavior.AllowGet);

}

private List<Customer> GetAllCustomers() {

if (Session["allCustomers"] == null) {

Session["allCustomers"] = Context.Customers.Where(e => e.DateDeleted == null).ToList();

}

return (List<Customer>)Session["allCustomers"];

}

Javascript:

function valueMapper(options) {

console.log("valueMapper: options.value = " + options.value);

$.ajax({

url: "@Url.Action("CustomersValueMapper", "Equipment", new {area="Dispatch"})",

data: convertValues(options.value),

success: function (data) {

options.success(data);

}

});

}

function convertValues(value) {

var data = {};

value = $.isArray(value) ? value : [value];

for (var idx = 0; idx < value.length; idx++) {

data["values[" + idx + "]"] = value[idx];

}

return data;

}

View:

@(Html.Kendo().DropDownList()

.Name("customerId")

.DataValueField("Value")

.DataTextField("Text")

.DataSource(ds => ds.Custom()

.ServerPaging(true)

.PageSize(80)

.Type("aspnetmvc-ajax") //uses DataSourceRequest

.Transport(transport => transport.Read("GetCustomers", "Equipment", new { area = "Dispatch" }))

.Schema(schema => schema

.Data("Data")

.Total("Total"))

).Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))

)

DropDownList

answered on 29 Sep 2015

2 answers

337 views

custom pop up editor for grid - dropdown list

Hello everyone.

I am doing a proof of concept with telerik mvc grid controls and am in the following situation.

1. Using the Kendo Grid i am trying to do the following..

a Popup Edit screen with a Custom template with a dropdown list that calls the controller for additional info.

Here is the code i have so far

columns.ForeignKey(p => p.CASH_ISIN_CHR, (System.Collections.IEnumerable)ViewData["cashisnnames"], "ISIN_CHR", "Name_CHR").Title("CASH ISIN").EditorTemplateName("CashISINEditor");

columns.ForeignKey(p => p.CURRENCY_ISIN_CHR, (System.Collections.IEnumerable)ViewData["currencyisnnames"], "ISIN_CHR", "Name_CHR").Title("CURRENCY ISIN").EditorTemplateName("CurrencyISINEditor");

columns.Bound(c => c.Units_INT).Title("UNITS");

columns.Bound(c => c.Local_Amount_DEC).Title("Local Amt");

columns.Bound(c => c.Trade_DATE).Format("{0:d}").Title("Trade Date");

columns.Bound(c => c.Settlement_DATE).Format("{0:d}").Title("Settle Date");

columns.Bound(c => c.Custodian_Reference_Num_CHR).Title("Cust. Ref #");

columns.Bound(c => c.Entered_DNT).Format("{0:d}").Title("Entered Date");

columns.Bound(c => c.FX_Rate_DEC).Title("FX Rate");

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

})

.ClientDetailTemplateId("template")

.ToolBar(toolbar =>

{

toolbar.Excel();

toolbar.Pdf();

})

.Excel(excel => excel.FileName("Transaction Master Export.xlsx").AllPages(true)

)

.Pdf(pdf => pdf.AllPages())

.ColumnMenu()

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

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

.Pageable()

I have an editor template called CustomTransactionMasterEditor and the code in it looks like this:

@model BetaSMTRApp.Models.Transaction_Master

<h3>Custom Transaction Master</h3>

@Html.TextBoxFor(model => model.FUND_INT).ToString()

@Html.TextBoxFor(model => model.TYPE_CHR)

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

.Name("cashisndd")

.DataValueField("ISIN_CHR")

.DataTextField("Value")

.DataSource(ds => ds

.Read(read => read.Action("GetCASHISIN", "TransactionMaster", new { FundInt = 223, TypeChr = "Expense" })

))

In the TextBoxFor fields i am getting fund int and type chr... both of which i need to pass in the .Read on the data source line. When i try to use Model it is null.

How can i get the textbox for value into the new section of the .Read?

Thanks,

Corey

Grid

answered on 29 Sep 2015

2 answers

74 views

Non self-referencing On Demand Sample

I am looking for an example that loads a treeview from data that is not self-referencing (no ParentID field) but with specific category levels. If my data looks like:
ID   Lastname    Firstname City       State
1     Davolio        Nancy          Seattle WA
2     Fuller           Andrew        Tacoma WA
3     Washington George          Dallas     TX
4    Leverling      Janet            Kirkland WA
5     Peacock      Margaret      Seattle    WA
6     Doe              Jane             Austin     TX
7     Doe              John             Dallas     TX

… I want it to come out like this:
TX
└ Austin
          └ Jane Doe
└ Dallas
          └ George Washington
          └ John Doe
WA
  └ Kirkland
            └ Janet Leverling
└ Seattle
            └ Nancy Davolio
            └ Margaret Peacock
   └ Tacoma
            └ Andrew Fuller

I also would like it to load on demand (JsonResult) as each state and city gets expanded.
Is there an example on how to build the tree like this?

TreeView

answered on 29 Sep 2015

1 answer

122 views

Grid edit popup

Hi,

Here's a question what event or function is called when the user presses the cancel or close button on the mvc grid popup editor.

Best,

A. Guzmán

Grid

answered on 29 Sep 2015

2 answers

157 views

[Solved] Selecting DropDownList in Window

Hello,

selecting a DropDownList inside of a window-control results in a scrollbar on the side of the window-control. How can I prevent that?

I attached a screenshot so you can see what I am talking about.

Thanks in advance.

DropDownList

answered on 29 Sep 2015

1 answer

244 views

Invoking controller action passing model property

Assuming I have the below table:

@Html.Kendo().Grid(Model).Name("Staff").Columns(x =>{         x.Bound(y => y.StaffId);         x.Bound(y => y.FirstName);         x.Bound(y => y.LastName);         x.Bound(y => y.Email);         x.Bound(y => y.Phone);         x.Command(y => y.Custom("Edit").Action("edit", "controller", new { id = ????? }));}).Sortable().Scrollable().Pageable(x=> x.PageSizes(true)).Filterable()

How can I pass the primary key value (StaffId in this case) associated to the row to the object route values similar to the way it is done by Visual Studio auto-scaffold? I do not want a Java Script based solution. I am just looking for a way to pass the current row id (PK) to server action. Is it possible?

For more information please refer this SO thread.

Grid

answered on 29 Sep 2015

1 answer

291 views

Combobox Width Problem

Hello,
I want to change combobox width but I have problem with styling. I attached screen capture, I tried two way for set combo width but not working well. I using bootstrap in my project. How can I fix this problem?

Here is my code,

<div class="form-group">
@Html.LabelFor(model => model.MusteriId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().ComboBox()
.Name("MusteriId")
.Filter("contains")
.Placeholder("Müşteri seçiniz...")
.BindTo(ViewBag.MusteriId as SelectList)
.Suggest(true)
  .HtmlAttributes(new { style = "width: 600px;" })
)
@Html.ValidationMessageFor(model => model.MusteriId, "", new { @class = "text-danger" })
</div>
</div><div class="form-group">
@Html.LabelFor(model => model.AracId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().ComboBox()
.Name("AracId")
.Filter("contains")
.Placeholder("Araç seçiniz...")
.BindTo(ViewBag.AracId as SelectList)
.Suggest(true)
  .HtmlAttributes(new { style = "width: 85%;" })
)
@Html.ValidationMessageFor(model => model.AracId, "", new { @class = "text-danger" })
</div>
</div>

ComboBox

answered on 28 Sep 2015

1 answer

424 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

494 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

417 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");