Questions on UI for ASP.NET MVC Forum

2 answers

196 views

Failing inline updates, remove the update/cancel buttons

Hi,

MVC5, Inline editing:
When doing inline editing, the edit button is temporary replaced by two UPDATE/CANCEL buttons.
This is normal behavior.
If the update handling fails, then the update/cancel buttons is swapped back to the edit button, but the item itself, is still in edit mode.

I have attached the grid to the following events to be able to show messages to the user:

.Events(events => events.Sync("onSync"))

.Events(events => events.Error("onDataSourceError"))

I want the update/cancel buttons to be the visible one since it has failed and the user should still be able to correct the error and update again.
Thanks.

Grid

answered on 25 Mar 2015

6 answers

189 views

Strange behavior with list of values in Internet Explorer

Hi,

This post is about a new incidence with Internet Explorer 11 and dropdownlist. The first time I click over dropdownlist the list of values are loading, but the list is closed. I should click again to get the list without close the list.

Editor Template

@model object

@(Html.Kendo().DropDownList()

.HtmlAttributes(new { style = "width: 450px;" })

.Name("ContactID")

.DataTextField("Text")

.DataValueField("Value")

.Filter(FilterType.Contains)

.OptionLabel("-please select-")

.ValuePrimitive(true)

.AutoBind(false)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("MultiSearchProductors", "Productors", new { area = "Comercial" }).Data("filterSearchProductor");

})

.ServerFiltering(true);

})

)

Method from editor template

public async Task<JsonResult> MultiSearchProductors(string text)

{

var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());

var productors = ens.Contacts.OfType<Productor>().Where(p => user.AuthorizedCenters.Contains(p.CentreID.ToString()) && p.Baixa ==

null).Select(p => new

{

Value = p.ContactID,

Text = p.Nom + " " + p.Addresses.FirstOrDefault(a => a.TypeID == (short)addressType.General).Poblacio.Denominacio + " - " + p.ContactID

});

if (!String.IsNullOrWhiteSpace(text))

{

productors = productors.Where(p => p.Text.Contains(text));

}

return Json(productors, JsonRequestBehavior.AllowGet);

}

function filterSearchProductor() {

return {

text: $("#ContactID").data("kendoDropDownList").filterInput.val()

//allCenters: true

};

}

Grid with column ContactID and mode Popup

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

.Name("partner_"+contactID)

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Nou Partner");

}

})

.Columns(columns =>

{

columns.Bound(f => f.ContactID).Title("Codi").Width(60);

View Model

public class PartnerViewModel

{

[DisplayName("Productor")]

[UIHint("ProductorMultiSearch")]

public int ContactID { get; set; }

Can you say anything about this behavior?

Thanks.

Xavier.

DropDownList

answered on 25 Mar 2015

1 answer

120 views

Unknown Method DataSource

Hi All,

I admit that I am new to all of this. I have a Grid in an cshtml file. I am trying to pattern off the Northwind example. I have the following code within a <div> section:

@(Html.Kendo().Grid<CompanyViewModel>
()
.Name("companies")
.HtmlAttributes(new { style="height: 100%; border: 0;"})
.Scrollable()
.Columns(columns =>
{
columns.Template(t => { })
.ClientTemplate("#=CompanyId#")
.Title("Company ID")
.Width(120);
}
)
.Editable(e => e.Mode(GridEditMode.PopUp))
.Pageable(pageable => pageable.Refresh(true))
.Sortable()
.Selectable()
.Navigatable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(m =>
{
m.Id(f => f.CompanyId);
m.Field(f => f.CompanyId).Editable(false);
}
)
)
)

The trouble I am having is that I have red lines in the editing on everything from the first dataSource all the way to the end. When I hover over the start of the error I get the pop up description: C#: Unknown method 'DataSource(?)' of 'Kendo.Mvc.UI.Fluent.....

Attached is a screen shot.

I'm lost... any/all help would be great because I'm stuck

Thanks,
Steve

Grid

answered on 24 Mar 2015

4 answers

265 views

Access to date field

I am trying to access a date field from the grid to pass to a dropdown filter read action. However, all I get is null in the results. If I debug, I can see the date is the long version of 1/1/2013 which is correct but the value ends up null. What am I doing wrong?

VIEWMODEL

[Display(Name = "In Service Date")]

[DataType(DataType.Date)]

[Required]

public DateTime InServiceDate { get; set; }

VIEW (correctly displays 01/01/2013 in the grid)

columns.Bound(p => p.InServiceDate).Format("{0:MM/dd/yyyy}").Title("Date").Width(100);

model.Field(p => p.InServiceDate).DefaultValue(Model.DefaultInServiceDate);

Filter for dropdown (other fields work fine but date field is always null)

function filterTaxClassBookMethods() {

var row = $("#TaxClassBookMethod").closest("tr");

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

var dataItem = grid.dataItem(row);

var inServiceDate = dataItem.InServiceDate;

return { depreciationBookID: 1002, assetClassID: dataItem.AssetTransactionCode.AssetClassID, inServiceDate: inServiceDate };

}

Grid

answered on 24 Mar 2015

1 answer

246 views

data not getting passed to controller from refresh

So for some reason with the following code my values are empty once they get to the controller.

Anyone have any ideas why?

Signature of controller.
Public Function UserDetail(userString As String) _

javascript code in view.

function openWindow() {
var grid = $("#AjaxGrid").data("kendoGrid");
var selectedData = grid.dataItem(grid.select());
var stringData = JSON.stringify(selectedData);

var window = $("#UserDetailDiv").data("kendoWindow");
var PopUpTitle = "User Detail: ";

window.setOptions({
title: PopUpTitle,
content: "Loading....."
});

$("#UserDetailDiv").data("kendoWindow").refresh({
url: "/Inquiry/UserDetail",
data: { userString: stringData },

success: function (data) {

},
error: function (xhr, textStatus, exceptionThrown) {
window.close();
alert($.parseJSON(xhr.responseText));
}
});
window.open();
window.center();
}

Window

answered on 24 Mar 2015

1 answer

488 views

3-level hierarchy

Hi, I'm trying to make a 3-level hierarchic grid. I've seen some example doing this but in my case the nested one is still dependent from the more external and I cannot access ID to populate it.
My code:

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

.Name("dayGrid")

.Columns(columns =>

{

columns.Bound(o => o.Date).Format("{0:d}");

})

.ClientDetailTemplateId("channelTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model =>

{

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

})

.PageSize(10)

.Read(read => read.Action("ReadSummary", "Rate"))

)

.Pageable()

)

<script id="channelTemplate" type="text/kendo-tmpl">

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

.Name("day_#=DayID#")

.Columns(columns =>

{

columns.Bound(o => o.Channel.Label).Title("Channel");

})

.ClientDetailTemplateId("roomTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

})

.Read(read => read.Action("ReadChannels", "Rate", new { Day = "#=DayID#" }))

)

.ToClientTemplate()

)

</script>

<script id="roomTemplate" type="text/kendo-tmpl">

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

.Name("room_#=DayID##=ChannelID#")

.Columns(columns =>

{

columns.Bound(o => o.Room.Label).Title("Room");

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

})

.Read(read => read.Action("ReadRooms", "Rate", new { Day = "#=DayID#", Channel = "#=ChannelID#"}))

)

.ToClientTemplate()

)

</script

In the last one (Grid Room) I cannot access DayID property. How can I accomplish this?

Grid

answered on 24 Mar 2015

1 answer

169 views

Prepopulating Grid with Filter

I have a grid in an MVC view, and upon a button click i am sending its DataSource info to the controller via the parameterMap() and an ajax() posting. something like this:

function sendData() {

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

parameterMap = grid.dataSource.transport.parameterMap;

var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });

$.ajax({

url: "/Home/UpdateCreateDelete",

data: data,

type: "POST",

This works great, the controller gets the datasourcerequest info. I can use the DataSourceRequest fields to send them later on back to a view with a grid and i can initialize that grid to use the DataSourceRequest fields like this:

// note grid.autobind() set to false, so we can load upon dom ready below:

$(function() {

@{ var request = TempData["request"] as DataSourceRequest; }

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

grid.dataSource.query({

page:  @request.Page,            // WORKS PERFECTLY!

pagesize: @request.PageSize,      // WORKS PERFECTLY!

filter: null, // FAILS IF I use filter: @request.Filter

sort: null, // FAILS IF I use sort: @request.Sort

group: null, // FAILS IF I use group: @request.Group

});

}

The problem is that the loading does not support the filters, sorts, or groups fields from the DataSourceRequest object. How do i convert those DataSourceRequest fields into something that is in proper format for the the Grid.query() function?

Bottom line is that i want to be able to initialize my grid with the filters, sorts, and groupings that were saved from a previous DataSourceRequest.

Grid

answered on 23 Mar 2015

4 answers

175 views

PDF417

Please let me know when or if the PDF417 2-D barcodes plan to be supported in UI for ASP.NET MVC or Kendo UI. Thanks!

QRCode

answered on 23 Mar 2015

1 answer

463 views

Foreign key Name based sort in telerik grid

I have a foreign key column in my grid.
columns.ForeignKey(c => c.ManagerId, (SelectList)ViewData["ManagerIdSource"]);

It sorts by the default Guid and not by the name.
Any way I can achieve this ?

If not supported, is this feature expected anytime soon from Telerik ?

Grid

answered on 23 Mar 2015

1 answer

869 views

Set data-title attribute to every <td> cell

I am into customizing the display of kendo grid in mobile devices.

I need to know if I can achieve this.
I need to set the data-title={the corresponding header title} to each corresponding td cell in a column.

For example I need it this way.

<td data-title="Name" role="gridcell">Joe</td>

Any way I can achieve this ?

Grid

answered on 23 Mar 2015