Questions on UI for ASP.NET MVC Forum

1 answer

135 views

Hi, Am using Telerik MVC wrappers for creating a grid. Done an ultra simple example of this and this seems to be enough to repeat the issue:

cshtml:

@Html.Kendo().Grid(Model.Records).Name("Search")

If I just use the above, I get the grid with all the data in it no problem, however if I decide I want to make it sortable on the fly, I run what I understand to be the correct js below, this just causes all the data to be deleted with no errors.

javascript:

$('#Search').data('kendoGrid').setOptions({ sortable: true });

is there something you have to do with MVC wrapper settings to make the javascript methods less flaky?

Also, am using latest trial version as of this date.

Thanks,

Gavin

Grid

answered on 24 Jun 2016

1 answer

750 views

An item with the same key has already been added.

Hi, I have seen this error in a number of threads on the forum, none of which seem to be caused by the same thing as I am trying.

All it amounts to is using the same 'Id' column in the expressions for both a custom command routing value and the datasource server() model id mapping. I dont really understand why using the id in these two places should cause this problem?

@(Html.Kendo().Grid(Model.DetailRecords).Name("MyGrid")
.Columns(columns =>
{
columns.Command(commands => commands.Custom("View").Action("Index", "Detail")
.DataRouteValues(rv => rv.Add(m => m.Id)));
columns.Bound(m => m.Heading);
})
.DataSource(ds => ds.Server().Model(model => model.Id(m => m.Id)))
)

If this is a bug, is there a work around I can use?

Thanks,

Gavin

Grid

answered on 24 Jun 2016

4 answers

580 views

Grid/Detail Grid will it work if Id is string

I am trying to call detail grid/child grid but it is not getting called.

Here is my code:

@(Html.Kendo().Grid<OpenInvoicesInfo>()
.Name("grid")
.ColumnMenu(i => i.Columns(false))
.Columns(columns =>
{
columns.Bound(p => p.INVOICE).ClientTemplate("<input type='checkbox' value='#= INVOICE #' class='testclass' onclick='rowCheck(this)' />").Width(4);
columns.Bound(i => i.INVOICE).Title("INVOICE").Width(15);
columns.Bound(i => i.ORDER_NBR).Title("Order").Width(10);
columns.Bound(i => i.CUST_PO_NBR).Title("CustomerPO").Width(20);
columns.Bound(i => i.RI_FLAG).Title("RI").Width(5);
columns.Bound(i => i.AGE_DAYS).Title("AGE_DAYS").Width(7);
columns.Bound(i => i.AGE_GROUP).Title("AGE").Width(8);
columns.Bound(i => i.ORIG_AMOUNT).Title("Orig Amt").Width(10);
columns.Bound(i => i.OPEN_AMOUNT).Title("Open Amt").Width(10);

}).Pageable(pageable => pageable
.Refresh(true)
)
.Scrollable()
.Sortable()
.Filterable()
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax().UseJniErrorHandler()
.Model(model =>
{
model.Id(i => i.INVOICE);
model.Field(i => i.INVOICE).Editable(false);
})
.PageSize(8)
.Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
)
.Events(events => events.DataBound("dataBound"))
)

Controller method:

public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string Id)
{

List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(Id);

return Json(customer.ToDataSourceResult(request));
}

Grid

answered on 23 Jun 2016

4 answers

1.2K+ views

Empty Grid

I am trying something simple, or what should be simple. Creating a Kendo MVC Grid, and populating it via Ajax. Before you suggest it, I have looked in the developer tools in Chrome, and there are no Javascript errors whatsoever. No exceptions in the code, and no javascript errors. It will most likely be something simple, but I just cannot seem to find it.

I have placed a breakpoint in the action in which it should be calling, and it never, ever even calls it. If it at least called it, I'd know where to start looking, but it never calls it. And again, no javascript errors whatsoever, as shown in the attached screen capture.

My cshtml page:

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

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

.AutoBind(true)

.Name("userGrid")

.Columns(cols => {

cols.Bound(c => c.UserId);

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

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

cols.Bound(c => c.UserName);

})

.Scrollable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(ds => ds

.Ajax()

.Read(r => r.Action("AllUsers", "Home").Type(HttpVerbs.Get))

.PageSize(20))

)

My Controller is also just as simple:

using System.Collections.Generic;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using TelerikMVC_Template.Models;

using TelerikMVC_Template.Repository;

namespace TelerikMVC_Template.Controllers

{

[Authorize]

public class HomeController : Controller

{

private readonly IUserRepository userRepository = new UserRepository(new VUsersContext());

// GET: Home

public ActionResult Index()

{

return View();

}

[HttpGet]

[ActionName("AllUsers")]

public JsonResult AllUsers([DataSourceRequest]DataSourceRequest request)

{

IEnumerable<User> theseUsers = userRepository.SelectAll();

return Json(theseUsers.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

And finally my User class definition:

public class User

{

public System.Guid UserId { get; set; }

public string UserName { get; set; }

public string Email { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public string Comment { get; set; }

public string Password { get; set; }

public System.DateTime LastLoginDate { get; set; }

public System.DateTime LastPasswordChangedDate { get; set; }

public System.DateTime CreationDate { get; set; }

public bool IsLockedOut { get; set; }

public bool IsActive { get; set; }

public int FailedPasswordAttemptCount { get; set; }

public System.DateTime? LastPasswordFailedDate { get; set; }

public System.DateTime CreatedDate { get; set; }

}

Grid

answered on 23 Jun 2016

3 answers

63 views

2 grids based on 1st grid selected checkboxes ask stored procedure to populate 2nd grid

I understand how to pass additional data as a parameter example I am doing this
.Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
Is it possible to have Parent/child or grid/details grid to do without entity framework meaning asking custom stored procedures for the data?
I have a grid with Invoices. I want user to select multiple checkboxes and then click the button and based on that 2nd grid gets populated.
or have a parent grid loaded and based on checkboxes (invoice# which is a string) I click ask stored procedure to get me corresponding comments.
Initially 2nd grid is empty.
If you have any example that will be great.
I want an example without entity framework.
Please reply if there is any easy solution.

Thank you,
Gaurav

Grid

answered on 23 Jun 2016

1 answer

281 views

How to fail the mvc controller on purpose and do nothing

Controller Method:

public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string invoices)
{
if (invoices != "fail")
{

List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(invoices);

return Json(customer.ToDataSourceResult(request));
}
else
{
//do nothing
}
}

I am trying to upgrade the grid using ajax
$.ajax({
url: webManager.resolveUrl("~/maint/GetCustomerComments"),
method: "POST",
data: { invoices: invoicesList },
success: function () {
var grid = $('#CustomerCommentsGrid').data('kendoGrid');
grid.dataSource.read();
grid.refresh();
},
error: function () {
alert('an error occurred');
}

});

But the problem is Grid is called again and I want to stop that.

@(Html.Kendo().Grid<CustomerComments>()
.Name("CustomerCommentsGrid")
.Columns(columns =>
{
columns.Bound(i => i.INVOICE).Title("Invoice").Width(15);
columns.Bound(i => i.Comment).Title("Comment").Width(40);

}).Pageable(pageable => pageable
.Refresh(true)
)
.Scrollable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax().UseJniErrorHandler()
.PageSize(10)
.Read(read => read.Action("GetCustomerComments", "Maint", new { invoices = "fail" }))
)
)

Grid

answered on 23 Jun 2016

1 answer

98 views

IMB (OneCode)

Does Telerik have the ability to generate a IMB(OneCode) bar code?

I ask since I saw an option for the POSTNET barcode which was retired from the USPS in 2013.

Please advise.

Barcode

answered on 23 Jun 2016

1 answer

108 views

Unable to Resize Grid column

Hi ,
We are unable to resize grid columns in IE 11 with latest version v2016.2.607 but it was working in its previous version v2016.1.226. Kindly help in this regard ASAP.

Warm Regards,
Vibhor

Grid

answered on 23 Jun 2016

1 answer

166 views

kendo.toString Syntax for shared popup editor

I have a custom popup editor that's used as the editor in a parent grid and in the nested grid of another parent grid:

Grid 1 -> Shared Custom Popup
Grid 2 >Tabstrip > Nested Grid -> Shared Custom Popup

In the popup editor, I have a field "created_date" that I need to display as a string instead of an editor box. I know that for popup editors of a parent grid, I need to use this syntax:

${kendo.toString(created_date, "MM/dd/yyyy hh:mm tt")}

And for popup editors of a nested grid, I need to use this syntax:

#= kendo.toString((created_date), "MM/dd/yyyy hh:mm tt") #

The syntax for popup editors of a parent grid won't work for the popup editors of a nested grid and vice versa.

How would I display a string for a field in a popup editor that's shared between a parent grid and the nested grid of another parent grid?

Grid

answered on 22 Jun 2016

1 answer

158 views

Grid showing no records after sort

I have a simple Kendo UI grid setup for serverside processing which displays some employee information. The grid displays just fine when i first load the view but as soon as you click on a column to sort it refreshes and just gives me an empty grid. The Action is firing each time a column header is click and is returning the correct amount of records to the view. See my code below:

View:

@ModelType List(Of ConnectEntities.Employee)

@Code

ViewData("Title") = "CompanyDirectory"

Layout = "~/Views/Shared/_HomeLayout.vbhtml"

End Code

<div class="row">

<div class="col-md-12">

<div class="panel panel-primary">

<div class="panel-heading">

<h4>Company Directory</h4>

</div>

<div class="panel-body">

@Code

Html.Kendo.Grid(Of ConnectEntities.Employee)() _

.Name("employeeDirectory") _

.BindTo(DirectCast(ViewData("employees"), IEnumerable(Of ConnectEntities.Employee))) _

.Columns(Sub(c)

c.Bound(Function(p) p.FirstName_AD).Sortable(True)

c.Bound(Function(p) p.LastName_AD)

c.Bound(Function(p) p.JobTitle_AD)

c.Bound(Function(p) p.PhoneNumber_AD)

End Sub) _

.DataSource(Sub(d)

d.Server() _

.Read(Function(read) read.Action("Person_Read", "Home"))

End Sub) _

.Sortable() _

.Filterable() _

.Render()

End Code

</div>

Controller Code:


Function CompanyDirectory() As ActionResult
 
    Dim employees As List(Of ConnectEntities.Employee)
 
    Using connectDB As New ConnectEntities.ConnectEntities
        employees = connectDB.Employees.ToList
    End Using
 
    ViewData("employees") = employees
 
    Return View()
 
 
End Function


Public Function Person_Read() As ActionResult
 
 
    Dim employees As List(Of ConnectEntities.Employee)
 
    Using connectDB As New ConnectEntities.ConnectEntities
        employees = connectDB.Employees.ToList
    End Using
 
    Return View("CompanyDirectory", employees)
 
 
End Function

Grid

answered on 21 Jun 2016