Questions on UI for ASP.NET MVC Forum

5 answers

449 views

MVC Grid - .addRow() causes Javascript Exception in kendo.all.js

This problem is only happening since I update to the latest version (2018.2.620) of UI for ASP.NET MVC from 2016.3.1028. Yeah, I know - I should keep up. But the project is in maintenance mode now.

I know this isn't likely much to go on, but I can't imagine how I'd pack the entire project and databases (or fakes thereof) and send it in, so I'm hoping something jumps out and is quite obvious. Any help appreciated! Even just a better idea what to look at would be good!

I have a button outside my grid for adding rows. It triggers .addRow() as follows:

$("#EntryGrid_New").click(function () {

$("#EntryGrid").data('kendoGrid').addRow();

});

When I hit that code, I get the following error:

Unhandled exception at line 26, column 9426 in http://localhost:23159/Scripts/kendo/2018.2.620/kendo.all.min.js
0x800a138f - JavaScript runtime error: Unable to get property '_move' of undefined or null reference occurred

The line it stops on in kendo.all.js is:

if (arguments.length === 1) {

return on.call(that, arguments[0]);

}

var context = that, args = slice.call(arguments);

if (typeof args[args.length - 1] === UNDEFINED) {

args.pop();

}

var callback = args[args.length - 1], events = kendo.applyEventMap(args[0], ns);

if (support.mouseAndTouchPresent && events.search(/mouse|click/) > -1 && this[0] !== document.documentElement) {

MouseEventNormalizer.setupMouseMute();

var selector = args.length === 2 ? null : args[1], bustClick = events.indexOf('click') > -1 && events.indexOf('touchend') > -1;

on.call(this, {

touchstart: MouseEventNormalizer.muteMouse,

touchend: MouseEventNormalizer.unMuteMouse

}, selector, { bustClick: bustClick });

}

if (typeof callback === STRING) {

context = that.data('handler');

callback = context[callback];

args[args.length - 1] = function (e) {

callback.call(context, e);

};

}

args[0] = events;

on.apply(that, args);

return that;

},

For completeness, here's the definition of the grid:

@(Html.Kendo().Grid<TimePlus.Models.ScheduleExceptionViewModel>()

.Name("EntryGrid")

.NoRecords("No exceptions found")

.Columns(columns => {

columns.Bound(model => model.ExceptionDate);

columns.Bound(model => model.ExpectedHours).EditorTemplateName("TwoDecimals");

columns.Command(c => { c.Edit(); c.Destroy().Text("Remove"); }).Width(250);

})

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

.Events(e => e.Edit("EntryGrid_Edit"))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Schedule_EntryGrid_Read", "Management").Data("GetSelectedDateAndUser"))

.Destroy(destroy => destroy.Action("Schedule_EntryGrid_Destroy", "Management"))

.Update(update => update.Action("Schedule_EntryGrid_Update", "Management"))

.Create(create => create.Action("Schedule_EntryGrid_Create", "Management"))

.Events(e => e.Error("EntryGrid_Error"))

.Model(model => {

model.Id(c => c.ID);

})

)

Grid

answered on 11 Jul 2018

1 answer

502 views

Unable to export excel from Grid

Hi All,

I was working on a task to export to excel with 100k rows with 50 columns, but when I click on export to excel it was generating an empty excel .Kindly help me in achieving the task.

Note: This is working well for 6000 rows.

Thanks & Regards,

Sampath

General Discussions

answered on 10 Jul 2018

1 answer

108 views

Label text too dense in the chart line

I'm trying to make the text label not crowded in a lot of data and I can not successful.

{
dataSource: modelStats,
legend: {
visible: false
},
xAxis: {
min: -2,
max: 2,
labels: {
format: "{0:n1}"
}
},
yAxis: {
labels: {
format: "{0:n2}"
}
},
series: [
{
name: "Fleet Avg",
type: "line",
aggregate: "avg",
field: "fleetAvg",
categoryField: "date",
color: "#a0b751",
},
{
name: "Driver",
type: "line",
aggregate: "avg",
field: "value",
categoryField: "date",
color: "#219dd0",
},
{
name: "Driver previous period",
type: "line",
aggregate: "avg",
field: "valueFrom_SameDateLastPeriod",
categoryField: "date",
color: "#10b4b6",
}
],
seriesDefaults: {
aggregate: "avg",
type: "line",
width: 3,
margin: 30,
markers: {
size: 15,
width: 10
}
},

categoryAxis: {
baseUnit: me.baseUnitDefault[0],
labels: {
dateFormats: {
weeks: tFormat
},
font: "13px Arial,Helvetica,sans-serif",
rotation: "auto"
},
},
tooltip: {
visible: true
},
pannable: true,
onZoom: onChartZoom,
});

Chart

answered on 10 Jul 2018

6 answers

478 views

Remove event firing incorrectly

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/remove

I am using the above event to refresh other grids on the page when a specific grid has a row deleted.

My test code is as follows:

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

()

.Name("kGrid")

.Events(e => {

e.Remove("alert('hello')");

})

The rest of the code is omitted as it is not relevant.

The "hello" is triggering on page load, and not triggered at all when a row is confirmed removed. Am I missing something?

Grid

answered on 09 Jul 2018

5 answers

1.4K+ views

Trigger telerik edit/update/create actions with external button click

Recently I've been working with telerik devcraft for the last couple of weeks, I'm interested in using the grid controller to display data, I've reached the point where I'm working with CRUD operations and I need to led the user make delete, create and edit operations of the displayed rows my client really doesn't like the way the controller displays the edit and delete buttons next to the rows, he would like to be available to invoke the edit and delete operations via external html buttons on the bottom of the page

Grid

answered on 09 Jul 2018

2 answers

837 views

Hide/Show Column Breaks Grid Appearance

Hi there guys and gals, I have a grid and i am try to hide and show columns based on the selected month from a drop-down list. If selected month is January, then show the JComment column if it is February, then hide the JComment column and show the FComment column. The hide and show functionality works but unfortunately, it breaks the grid appearance, the all columns are compressed in width and blank space on the right of the grid appears. i have tried calling the resize grid function, i have tried fixing this through css, but to no avail. How do i fix this?

Here is the Grid logic

@(Html.Kendo().Grid<P2I_UI.Models.ViewM.MinistryImpactVM>()

.Name("peopleMinistryImpact")

.Columns(columns =>

{

columns.Bound(c => c.StatisticName).Title("StatisticName ").Width(35);

columns.Bound(c => c.MinistryGroup).Title("Ministry <br/> Group").Width(25);

columns.Bound(c => c.AgeGroup).Title("Age").Width(25);

columns.Bound(c => c.AnnualGoal).Title("Annual <br/> Goal").Width(30).ClientTemplate("#=(AnnualGoal == null) ? ' ' : kendo.toString(AnnualGoal,',0')#");

columns.Bound(c => c.October).Title("Oct.").Width(30).ClientTemplate("#=(October == null) ? ' ' : kendo.toString(October,',0')#");

columns.Bound(c => c.November).Title("Nov.").Width(30).ClientTemplate("#=(November == null) ? ' ' : kendo.toString(November,',0')#");

columns.Bound(c => c.December).Title("Dec.").Width(30).ClientTemplate("#=(December == null) ? ' ' : kendo.toString(December,',0')#");

columns.Bound(c => c.January).Title("Jan.").Width(30).ClientTemplate("#=(January == null) ? ' ' : kendo.toString(January,',0')#");

columns.Bound(c => c.JanuaryComment).Title("JComment.").Width(50).Hidden();

columns.Bound(c => c.February).Title("Feb.").Width(30).ClientTemplate("#=(February == null) ? ' ' : kendo.toString(February,',0')#");

columns.Bound(c => c.FebruaryComment).Title("FComment.").Width(50).Hidden();

columns.Bound(c => c.March).Title("Mar.").Width(30).ClientTemplate("#=(March == null) ? ' ' : kendo.toString(March,',0')#");

columns.Bound(c => c.MarchComment).Title("MComment.").Width(50).Hidden();

columns.Bound(c => c.April).Title("Apr.").Width(30).ClientTemplate("#=(April == null) ? ' ' : kendo.toString(April,',0')#");

columns.Bound(c => c.May).Title("May.").Width(30).ClientTemplate("#=(May == null) ? ' ' : kendo.toString(May,',0')#");

columns.Bound(c => c.June).Title("Jun.").Width(30).ClientTemplate("#=(June == null) ? ' ' : kendo.toString(June,',0')#");

columns.Bound(c => c.July).Title("Jul.").Width(30).ClientTemplate("#=(July == null) ? ' ' : kendo.toString(July,',0')#");

columns.Bound(c => c.August).Title("Aug.").Width(30).ClientTemplate("#=(August == null) ? ' ' : kendo.toString(August,',0')#");

columns.Bound(c => c.September).Title("Sep.").Width(30).ClientTemplate("#=(September == null) ? ' ' : kendo.toString(September,',0')#");

columns.Bound(c => c.FiscalYearToDate).Title("FYTD.").Width(30).ClientTemplate("#=(FiscalYearToDate == null) ? ' ' : kendo.toString(FiscalYearToDate,',0')#");

columns.Bound(c => c.PercentageOfPlan).Title("% of <br/> Plan.").Width(30).ClientTemplate("#=(PercentageOfPlan == null) ? ' ' : kendo.toString(PercentageOfPlan,'p')#");

})

.ToolBar(toolbar =>

{

toolbar.Save();

})

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

.Events(events =>

{

events.Edit("onEditMinistryImpact");

})

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.Sort(s =>

{

s.Add(p => p.SortOrder).Ascending();

s.Add(p => p.MinistryGroupCategoryID).Ascending();

s.Add(p => p.AgeCategoryID).Ascending();

})

.ServerOperation(false)

.Batch(true)

.Model(model =>

{

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

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

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

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

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

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

})

.Read(read => read.Action("MinistryImpact_Read", "MinistryImpact").Data("additionalData"))

.Update(update => update.Action("MinistryImpact_Update", "MinistryImpact"))

)

Js Logic

function onMonthChange(e)

{

var selectedMonthIndex = this.value();

var peopleMinistry = $("#peopleMinistryImpact").data("kendoGrid");

if (parseInt(selectedMonthIndex) === parseInt(0))

{

peopleMinistry.showColumn("JanuaryComment");

peopleMinistry.hideColumn("FebruaryComment");

peopleMinistry.hideColumn("MarchComment");

}

else if (parseInt(selectedMonthIndex) === parseInt(1)) {

peopleMinistry.hideColumn("JanuaryComment");

peopleMinistry.showColumn("FebruaryComment");

peopleMinistry.hideColumn("MarchComment");

}

else if (parseInt(selectedMonthIndex) === parseInt(2)) {

peopleMinistry.hideColumn("JanuaryComment");

peopleMinistry.hideColumn("FebruaryComment");

peopleMinistry.showColumn("MarchComment");

}

peopleMinistry.resize();

// force the layout readjustment without setting a new height

peopleMinistry.resize(true)

}

CSS

<style>

#peopleMinistryImpact.k-grid-header {

padding: 0 !important;

}

#peopleMinistryImpact.k-grid-content {

overflow-y: visible;

}

#peopleMinistryImpact > .k-grid-header > div > table,

#peopleMinistryImpact > .k-grid-content > table {

width: 100% !important;

}

#peopleMinistryImpact {

min-width: 1250px;

}

</style>

Thanks for the help

Grid

answered on 05 Jul 2018

2 answers

78 views

Grid with extra Combobox to change data in the grid: Edit button open edit form after second click

Hello,

I have an application, in wich there is a combobox above a grid. If i choose a company in the Combobox, then the people of the company are shown in the grid.

I have now the problem with the edit button in the grid. If I change the company and after this click on the edit button, the edit popup do not open. Instead the grid fires the Read-Action. When i click a second time on the edit button, the edit popup is opening.

I attached a demo project with this problem. I remvoed the Kendo Css-files and Scripts to get a small zip-File. Just Reinstall the "Telerik.UI.for.AspNet.Mvc5" package. I use the version 2018.1.117

Thank you for your help.

Ralf

Grid

answered on 05 Jul 2018

3 answers

96 views

Sortting not working after applying group

Hello,

Could some one help me the sorting issue? Records cannot be sorted by clicking on a column's header after I applying group on the grid. I am working on MVC project.

Thanks in advance.

Grid

answered on 03 Jul 2018

3 answers

209 views

Grid details outside grid

I need to show the details of the grid for CRUD operations outside the grid (in a tabbed layout with the details and subgrids). The template is the same used in popup but it has to be in the same page that the grid.

Is there any way to achieve this? I've seen this example in the documentation but it's for jquery

http://dojo.telerik.com/upiPE/26

Thank you

Grid

answered on 03 Jul 2018

2 answers

338 views

PopUp Edit Mode - Create not Sending Route Values to Controller

I'm using a grid with editable mode set to pop up. On the actions I have included a route value to be sent to the controller. This route value gets sent on each of the CRUD calls except for the create.

Below is my Grid code with the route values for each of the actions. I really only need this value passed through for the Create and Read actions.

@(Html.Kendo().Grid(Model).Name("ApprovalProcessSteps").Columns(c =>

{

c.Bound(e => e.ProcessStep);

c.Bound(e => e.ProcessStepType);

c.Bound(e => e.AndOr);

c.Bound(e => e.GroupParentStep);

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

c.Bound(e => e.RejectToStep);

c.Bound(e => e.ReminderFrequency);

c.Command(command =>

{

command.Edit();

command.Destroy();

}).Width(200);

})

.ToolBar(toolbar => toolbar.Create().Text("Create New Step"))

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

.Pageable(pager => pager.AlwaysVisible(false).PageSizes(new List<object> {5, 10, 20, 100}))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.Id))

.Create(update => update.Action("EditingPopup_Create", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId }))

.Read(read => read.Action("EditingPopup_Read", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId }))

.Update(update => update.Action("EditingPopup_Update", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId }))

.Destroy(update => update.Action("EditingPopup_Destroy", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId })))

)

Below is my controller code. The route value gets pass to all but my Create call. Can any point me in the right direction on what I might be doing wrong.

public ActionResult EditingPopup_Read([DataSourceRequest] DataSourceRequest request, int approvalProcessId)

{

ViewBag.approvalProcessId = approvalProcessId;

return Json(this.ReadInline(approvalProcessId).ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public

ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, ApprovalProcessStep approvalProcessStep,

int approvalProcessId)

{

if (approvalProcessStep != null && ModelState.IsValid)

{

this.CreateInline(approvalProcessStep, approvalProcessId);

}

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

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, ApprovalProcessStep approvalProcessStep)

{

if (approvalProcessStep != null && ModelState.IsValid)

{

this.UpdateInline(approvalProcessStep);

}

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

}

[AcceptVerbs(HttpVerbs.Post)]

public

ActionResult EditingPopup_Destroy([DataSourceRequest] DataSourceRequest request, ApprovalProcessStep approvalProcessStep)

{

if (approvalProcessStep != null)

{

this.DestroyInline(approvalProcessStep);

}

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

}

Grid

answered on 03 Jul 2018