Questions on UI for ASP.NET MVC Forum

4 answers

175 views

Kendo UI Scaffolder (UI for MVC Grid) generate the incorrect code

HI

I found that the generated code by UI for MVC Grid are not correct.

Add > New Scaffolded Item... > Kendo UI Scaffolder > UI for MVC Grid

Options : Editable/Ajax/InCell/Create/Update/Destroy

\Controllers\GridController.cs

The code generated by the newest Kendo UI Scaffolder :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Menus_Create([DataSourceRequest]DataSourceRequest request, MenuClass menuClass)
{

ASP.NET MVC source EditingController.cs

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products)
{

*Grid / Batch editing
http://demos.telerik.com/aspnet-mvc/grid/editing

The problems of code generated by newest Kendo UI Scaffolder :

.[Bind] expression lacked, any changes action should marks with [Bind], Right?
.The type of parameter Model not is IEnumerable<T>, Grid can create more than one record at a time, Right?

The generated code of Update/Destroy have the same problems as above.

---------------------------------------------

And I met another error while save changes using code generated by the newest Kendo UI Scaffolder:

Unhandled exception at line 9, column 30392 in http://localhost:43223/Scripts/kendo/2015.3.930/kendo.all.min.js

0x800a03ec - JavaScript Runtime error: ';' required

function(e,t){var n=e+t;return Le[n]=Le[n]||Function("d","return "+ve.expr(e,t))},setter:function(e){return He[e]=He[e]||Function("d,value",ve.expr(e)+"=value")},accessor:function(e){...

kendo.all.min.js have BUGS ???
===========================================================
*Error are marks from ＂return He[e]=＂ to ＂"=value")＂.

Visual Studio 2015 Enterprise
Telerik DevCraft 2015 Q2

Best regards

Chris

Grid

answered on 24 Nov 2015

2 answers

897 views

Attemping to retain grid options with setOptions() not working

I am attempting to use setOptions() on a grid to save changes a user makes to a grid (page size, page, filter, sort, etc.) then restore those changes when the user comes back to the page. I see numerous examples of this working in forum threads but I cannot get the examples working so I must be doing something wrong. The saving of the grid options seems to be working fine but when I return to the page I'm getting "undefined" when I try to get a reference to my grid (see attached image). Any help would be appreciated as I have spent a good day on this and cannot get it working.

Other threads where I see setOptions being used successfully.

http://www.telerik.com/forums/retaining-page-size

http://www.telerik.com/forums/persist-state-issues

http://www.telerik.com/forums/excel-export-settings-don't-work-after-setoptions()

My Javascript

var localStorageKey = "MainTransferInOptions";

var areOptionsLoaded = false;

$(window).ready(function (e) {

loadGridOptions(undefined);

});

function bindSaveRestoreCliks() {

$("#save").click(function (e) {

e.preventDefault();

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

var dataSource = grid.dataSource;

var state = {

page: dataSource.page(),

pageSize: dataSource.pageSize(),

sort: dataSource.sort(),

filter: dataSource.filter()

};

localStorage[localStorageKey] = kendo.stringify(state);

});

$("#load").click(function (e) {

e.preventDefault();

loadGridOptions(e);

});

}

function loadGridOptions(e) {

if (e == undefined || e.type == "click" || (!areOptionsLoaded && e.type == "read")) {

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

var state = localStorage[localStorageKey];

if (state) {

var data = JSON.parse(state);

var options = grid.options;

options.dataSource.page = data.page;

options.dataSource.pageSize = data.pageSize;

options.dataSource.sort = data.sort;

options.dataSource.filter = data.filter;

grid.destroy();

$("#MainGrid").empty().kendoGrid(options);

}

else if (!areOptionsLoaded && e == undefined) {

//grid.dataSource.read();

}

bindSaveRestoreCliks();

areOptionsLoaded = true;

}

</script>

My Controller

public class HomeController : Controller

{

private readonly IDbConnection _db = new SqlConnection(ConfigurationManager.ConnectionStrings["Reporting"].ConnectionString);

public ActionResult Index()

{

ViewBag.Message = "Welcome to ASP.NET MVC!";

var data = GetData();

return View(data);

}

public ActionResult About()

{

ViewBag.Message = "Your app description page.";

return View();

}

public ActionResult Contact()

{

ViewBag.Message = "Your contact page.";

return View();

}

public ActionResult GridRead([DataSourceRequest]DataSourceRequest request)

{

var data = GetData();

var serializer = new JavaScriptSerializer();

var result = new ContentResult();

serializer.MaxJsonLength = Int32.MaxValue;

result.Content = serializer.Serialize(data);

result.ContentType = "application/json";

return result;

}

private IEnumerable<EngineFamily> GetData()

{

return _db.Query<EngineFamily>("dbo.uspGetEngineFamilyInformation", commandType: CommandType.StoredProcedure);

}

My Grid

<a href="#" class="k-button" id="save">Save Grid Options</a>

<a href="#" class="k-button" id="load">Load Grid Options</a>

<a href="#" class="k-button" id="reset">Clear Saved Grid Options</a>

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

.Name("MainGrid")

.ColumnMenu(column => column.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Sortable(sortable => sortable.Enabled(true).SortMode(GridSortMode.SingleColumn).AllowUnsort(true))

.Pageable(pageable => pageable.Enabled(true).Refresh(true).ButtonCount(5).PageSizes(true).PageSizes(new int[] { 5, 10, 20, 50 }))

.Filterable(filtering => filtering.Enabled(true))

.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single).Type(GridSelectionType.Row))

//.Events(events => events.Change("onChange"))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GridRead", "Home"))

.ServerOperation(false)

)

//.AutoBind(false)

.Columns(columns =>

{

columns.Bound(e => e.EngineFamilyNumber)

.Width(200)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Engine Family Number")

.Filterable(filter => filter.Extra(false));

columns.Bound(e => e.Authority)

.Width(100)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Authority")

.Filterable(filter => filter.Extra(false));

columns.Bound(e => e.ValidFrom)

.Width(100)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Valid From")

.Filterable(filter => filter.Extra(false));

columns.Bound(e => e.ValidTo)

.Width(100)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Valid To")

.Filterable(filter => filter.Extra(false));

})

.Render();

}

Grid

answered on 23 Nov 2015

1 answer

241 views

How to add TreeList into template of Grid?

Hi Telerik,

I was trying add TreeList in Grid with ClientDetailTemplate but It's not running, I afraid Grid is not support ClientDetailTemplate with TreeList,
Can you please give me a demo about this issue?
Thanks alot

TreeList

answered on 23 Nov 2015

5 answers

287 views

removing an item from doesn't remove from list

Anyone know why when I remove an item from my datasource it removes it from my database, but not my Mobile List View? Below is basically what I'm doing:

model = dataSource.getByUid($(e.touch.target).attr("data-uid"));
dataSource.remove(model);
dataSource.sync();

I got this from the mobilelistview sample app and it works correctly, just not with my modified mobile list view. Could it be because of a filter I have or my type of model or something? Here is the Mobile list view control section:

Html.Kendo().MobileListView<eAgentWeb.Models.CallLogModel>()
.Name("MainListView")
.TemplateId("itemTemplate")
.PullToRefresh(true)
.EndlessScroll(true)
.DataSource(dataSource => dataSource
.Sort(sort => sort.Add("DateModified").Descending())
.Filter(filters => { filters.Add(calllog => calllog.IsArchive).IsEqualTo(false); })
.Read(read => read.Action("GetCallLogData", "CallLog"))
.Destroy("callLog_Destroy", "CallLog")
.PageSize(30)
.Events(events => events.RequestEnd("listViewRequestEnd"))
.Model(model => model.Id(c => c.CallLogID))
)
)
)

Any help would be greatly appreciated!

ListView (Mobile)

answered on 23 Nov 2015

6 answers

357 views

ComboBox saves text instead of value

I created a ComboBox with a data source of one item (KeyValuePair<string, string>) and set the Value to that one item's value. If I post the page without typing or changing the ComboBox, then the values sent to the server via FormCollection are the Text of the ComboBox, not the Value.

ComboBox

answered on 20 Nov 2015

1 answer

457 views

Need an older Older Version...

I'm am about to inherit a project developed with Kendo UI for ASP.NET MVC version 2015.1.408.

The older versions that I can download are:

2015.3.1111

2015.3.930

2015.2.624

I there any way that I can get to version 2015.1.408?

A similar question in the WinForms forum (http://www.telerik.com/forums/unable-to-get-an-older-version-of-the-controls) mentions backdating the license.

General Discussions

answered on 20 Nov 2015

3 answers

375 views

Chart Display Issues

I have a column chart, defined in MVC as below:-

@(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)

.Name((string)ViewBag.ChartName)

.Title((string)ViewBag.ChartTitle)

.Theme("bootstrap")

.Legend(legend => legend

.Position(ChartLegendPosition.Top)

.Visible(false)

)

.Series(series =>

{

series.Column(model => model.BarValue).Name("Actual").Tooltip(t=>t.Visible(true).Template("<div><p>Category:#=dataItem.AxisDescription#</p><p>Contribution: £#=dataItem.DisplayBarValue#</p></div>"));

})

.ChartArea(area => area

.Height(350)

.Background("transparent")

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0:N2}"))

.Title((string)ViewBag.Yaxis)

.AxisCrossingValue(0, int.MinValue)

.Line(line => line.Visible(false))

)

.CategoryAxis(axis => axis

.Labels(false))

.CategoryAxis(axis => axis

.Categories(model => model.AxisValue)

.Labels(labels => labels.Rotation(-45).Padding(5))

.MajorGridLines(lines => lines.Visible(false))

.Title((string)ViewBag.Xaxis)

)

.Events(e=>e.SeriesClick("seriesClick"))

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0:N2}")

)

I then use the SeriesClick event, to implement a data drill-down, which refreshes with the chart with new data (based on the level of drill-down and the value of the clicked column), based on an Ajax call, which gets new JSON data.

function PODDrillDown(pod,conscode,specialtycode,directorateCode, period)

{

var directorate = directorateCode;

selectedDirectorate = directorateCode;

selectedspec = specialtycode;

selectedcons = conscode;

selectedPOD = pod;

var chartData;

$.ajax({

type: "POST",

async: true,

contentType: "application/json;charset=utf-8",

url: "@Url.Content("~/ChartMaker/GetHRGChapterBarChartData")",

data: '{"id":2,"periodID":' + period + ',"DirectorateCode":"' + directorate + '","SpecCode":"' + specialtycode + '","ConsCode":"' + conscode + '","POD":"' + pod + '" }',

dataType: "json",

success: function (data) {

if (data.Success == true) {

chartData = data.chartData;

var dataSource = new kendo.data.DataSource({

data: chartData

});

var chart = $("#Chart_ID_1").data("kendoChart");

chart.dataSource = dataSource;

chart.options.title.text = data.ChartTitle;

chart.options.valueAxis.title.text = data.YAxisTitle;

chart.options.categoryAxis[1].title.text = data.XAxisTitle;

chart.dataSource.read();

chart.refresh();

}

else {

alert(data.Error);

}

},

error: function () {

alert("An error has occurred");

}

});

}

This works well, however with one particular drill-down , the chart doesn't render properly. The series labels are shown, the value axis seems scaled correctly, but the columns aren't rendered (I've attached an image of the chart). I can't see any issues with the data, all the data calls return data in the same structure, and no errors are thrown.

The Ajax call returns the data below :-

{"ChartTitle":"Performance for Consultant 4835","XAxisTitle":"Point of Delivery","YAxisTitle":"Contribution (£)","Success":true,"Message":"Data retrieved","Error":null,"chartData":[{"BarValue":-2476080.767381317,"AxisValue":"Other","AxisCode":"OTHER","ExtraValue":4,"AxisDescription":"Other","DisplayBarValue":"-2,476,081"},{"BarValue":-2476080.7673813165,"AxisValue":"Block","AxisCode":"BLOCK","ExtraValue":4,"AxisDescription":"Block","DisplayBarValue":"-2,476,081"}]}

Is this a bug in the chart, or is it something in the code?

Thanks

Chart

answered on 20 Nov 2015

3 answers

145 views

Kendo.culture vs WebAPI/Json

Hello,

I have a Razor build-ed grid which the datasource is WebAPI. The model contains a decimal field.

In Dutch (nl-NL) the separated character for decimal is comma instead of dot.

When setting in JS the Kendo.culture to "nl-NL", and the input contains a comma as decimal separated character, the created JSON model from Kendo Grid to the WebAPI contains also the comma instead of dot. At server-side the input will bbe set without decimal.

Example: 34,45 is in the JSON and gives 3445.

If the culture is removed, the JSON contains the dot and all works fine.

Question is, can I force the generated JSON model to handle input always as default culture (dot as decimal separated)?

General Discussions

answered on 20 Nov 2015

1 answer

218 views

Custom editor

This is part of my custom editor:

<div data-container-for="studentID" class="k-edit-field">
@(Html.Kendo().ComboBoxFor(model => model.StudentID)
.HtmlAttributes(new { data_bind = "value:StudentID" })
.DataTextField("FullName")
.DataValueField("StudentId")
.Filter(FilterType.Contains)
.AutoBind(false)
.Placeholder("Start typing student's name...")
.Text(Model.StudentID != null ? Model.Title : "")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStudents", "Student").Data("filterStudents");
})
.ServerFiltering(true);
})
.Events(e =>
{
e.Select("onStudentSelected");
})
)
</div>
<div data-container-for="title" class="k-edit-field">
@(Html.HiddenFor(model => model.Title, new { id = "TitleId", data_bind = "value:title" }))
</div>

I am trying to set the title with the text from the combobox:

function onStudentSelected(e) {
var dataItem = this.dataItem(e.item.index());
$("#TitleId").val(dataItem.FullName);
};

Alert on $("#TitleId").val() shows that it is set. But when I save the template the value is not passed to the server.

I have also made Title just a standard textboxfor so that I can see that the value is set.

Why is this not persisting to the model?

Also, this is my schduler:

@(Html.Kendo().Scheduler<Excent.Apps.Web.Solo.Models.MeetingViewModel>()
.Name("scheduler")
.Date(DateTime.Today)
.StartTime(DateTime.Today.AddHours(8))
.EndTime(DateTime.Today.AddHours(23).AddMinutes(59))
.Height(600)
.Views(views =>
{
views.DayView(dw => dw.DateHeaderTemplate("#=kendo.toString(date, 'd')#")).ShowWorkHours(true);
views.WeekView(weekView => weekView.DateHeaderTemplate("#=kendo.toString(date, 'MM/dd')#").SelectedDateFormat("{0:MM/dd/yyyy} to {1:MM/dd/yyyy}")).ShowWorkHours(true).Selected(true);
views.MonthView();
views.AgendaView(aw => aw.Title("Session").SelectedDateFormat("{0:MM/dd/yyyy} to {1:MM/dd/yyyy}"));
})
.Editable(editable =>
{
editable.TemplateName("CustomEditorTemplate");
})
.Timezone("Etc/UTC")
.EventTemplateId("event-template")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field(f => f.Start);
m.Field(f => f.End);
m.Field(f => f.IsAllDay);
m.Field(f => f.Title);
m.Field(f => f.RecurrenceRule);
m.Field(f => f.Description);
m.Field(f => f.StudentID);
m.Field(f => f.ProcedureCode);
m.Field(f => f.Color);
m.RecurrenceId(f => f.RecurrenceID);
})
.Events(e => e.Error("error_handler"))
.Read("Meetings_Read", "ProviderHome")
.Create("Meetings_Create", "ProviderHome")
.Destroy("Meetings_Destroy", "ProviderHome")
.Update("Meetings_Update", "ProviderHome")

)
)