Questions on UI for ASP.NET MVC Forum

1 answer

91 views

Window show Grid datail with foreign key

Hello~ I would like to make kendo window to show kendo grid cell detail. Actually, I worked fine, but kendo window show original value not foreign key as I set in kendo grid column. Is that possible to show foreign key value in kendo window instead of original value? thanks in advance~

Window

answered on 24 Mar 2017

1 answer

147 views

Not able see event in scheduler

Hello,

I have used kendo scheduler for displaying schedule but not able see any event on scheduler and also not getting error as well.

please check attached images for reference.

Thanks,

Vinal Patwa

Scheduler

answered on 24 Mar 2017

6 answers

3.5K+ views

Dynamic default values

Hi!

Is there any way to add dynamic default values? When I push the "Add row" button a new row with a new default value (max value + 1) for count column should be added.

Example:

.ToolBar(toolbar => {
toolbar.Create().Text("Add row");
})
...
.Model(model => {
model.Id(n => n.ID);
model.Field(c => c.count).DefaultValue(<this value needs to be max value + 1>);
model.Field(c => c.count).Editable(false);
})

I have tried to adding an event on .Events( e => e.Change("MyFunction")) but the row adding is done after MyFunction event is fired.

/Malte

Grid

answered on 24 Mar 2017

6 answers

1.1K+ views

How to customise row and column header in kendo spreadsheet Is there any Cell template is available for kendo spreadsheet

How to customise row and column header in kendo spreadsheet
Is there any Cell/Row template is available for kendo spreadsheet

Support for Item edit template

Support for different edit controls for different types of columns/rows

Spreadsheet

answered on 24 Mar 2017

3 answers

642 views

Inline Editing in Grid Model is Null When in Window

I have a grid that display details of some items. The grid has a custom command to open a window to display sub details of the selected item. The grid that is displayed in the window that opens has inline editing turned on. When I try to perform an update / create / delete, the Action is properly called, but the passed in model is null.

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Name).Groupable(false).Width(125);

columns.Bound(p => p.AuthorityReceived)

.Title("A")

.Filterable(false)

.Width(40)

.ClientTemplate("<input type='checkbox' disabled='disabled' #= AuthorityReceived ? checked='checked':'' # />");

columns.Bound(p => p.W9Received)

.Title("W9")

.Filterable(false)

.Width(40)

.ClientTemplate("<input type='checkbox' disabled='disabled' #= W9Received ? checked='checked':'' # />");

columns.Bound(p => p.InsuranceReceived)

.Title("Ins")

.Filterable(false)

.Width(40)

.ClientTemplate("<input type='checkbox' disabled='disabled' #= InsuranceReceived ? checked='checked':'' # />");

columns.Bound(p => p.Phone1).Groupable(false).Title("Phone 1").Width(125);

columns.Bound(p => p.Phone2).Groupable(false).Title("Phone 2").Width(125);

columns.Bound(p => p.AfterHoursPhone).Groupable(false).Title("After Hrs #").Width(125);

columns.Bound(p => p.Email).Groupable(false).Width(125);

columns.Command(command => command.Custom("ViewComments").Click("showComments"));

})

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Selectable()

.Resizable(resize => resize.Columns(true))

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

.DataSource(

dataSource => dataSource

.Ajax()

.PageSize(50)

.Read(read => read.Action("CarrierRead", "DataActions")))

)

@(Html.Kendo().Window().Name("Comments")

.Title("Comments")

.Visible(false)

.Modal(true)

.Draggable(true)

.Resizable()

)

<script id="comments-template" type="text/x-kendo-template">

<div id="details-container">

<h3>#= Name #</h2>

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

.Name("grid_#=CarrierId#")

.Columns(columns =>

{

columns.Bound(o => o.Comment);

columns.Bound(o => o.AddedBy).Width(150);

columns.Bound(o => o.TimeStamp).Format("{0:MM/dd/yyyy hh:mm tt}").Width(175);

columns.Command(command =>

{

command.Destroy();

command.Edit().UpdateText("Save");

}).Width(200);

})

.DataSource(

dataSource =>

dataSource

.Ajax()

.PageSize(5)

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

.Create(update => update.Action("CommentCreate", "DataActions", new {carrierId = "#=CarrierId#"}))

.Update(update => update.Action("CommentUpdate", "DataActions"))

.Destroy(update => update.Action("CommentDelete", "DataActions"))

.Read(read => read.Action("CommentRead", "DataActions", new {carrierId = "#=CarrierId#"}))

)

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

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

.Pageable()

.Sortable()

.Selectable()

.Resizable(resize => resize.Columns(true))

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

.Scrollable()

.ToClientTemplate())

</div>

</script>

<script type="text/javascript">

var detailsTemplate = kendo.template($("#comments-template").html());

function showComments(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var wnd = $("#Comments").data("kendoWindow");

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

}

</script>

[HttpPost]

public ActionResult CommentRead([DataSourceRequest] DataSourceRequest request, int carrierId)

{

try

{

var facade = new CarrierFacade();

var comments = facade.GetAllComments(carrierId);

return Json(comments.ToDataSourceResult(request));

}

catch (DbException ex)

{

ViewBag.ErrorMessage = ex.Message;

return View("Error");

}

[HttpPost]

public ActionResult CommentCreate([DataSourceRequest] DataSourceRequest request, CarrierComment comment)

{

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

{

try

{

var facade = new CarrierFacade();

facade.InsertComment(comment);

}

catch (DbException ex)

{

ViewBag.ErrorMessage = ex.Message;

return View("Error");

}

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

}

[HttpPost]

public ActionResult CommentUpdate([DataSourceRequest] DataSourceRequest request, CarrierComment comment)

{

try

{

var facade = new CarrierFacade();

facade.UpdateComment(comment);

return Json(ModelState.ToDataSourceResult());

}

catch (DbException ex)

{

ViewBag.ErrorMessage = ex.Message;

return View("Error");

}

[HttpPost]

public ActionResult CommentDelete([DataSourceRequest] DataSourceRequest request, CarrierComment comment)

{

try

{

var facade = new CarrierFacade();

facade.DeleteComment(comment.CommentId);

return Json(ModelState.ToDataSourceResult());

}

catch (DbException ex)

{

ViewBag.ErrorMessage = ex.Message;

return View("Error");

}

If I move the Grid out of the window, the model that is passed to my Controller's actions is no longer null. Any idea why this would be?

Grid

answered on 23 Mar 2017

4 answers

97 views

[Solved] Once More unto the Breach - styles

My dialog has no buttons... Well not really, they're there but they're white. White button, white text... They don;t show up until I hover over one of them. What styles or classes do I need to edit to get my dialog buttons to show up?

Dialog

answered on 23 Mar 2017

5 answers

440 views

kendoValidator Editor template (Tooltip)

Hello,

If I use kendoValidator in a grid Editor template the error is shown in a tooltip over the field - if I use
a "normal" view the kendoValidator error is shown under the field (see attached Pictures)

how to have the same "Tooltip" error in a "normal" form the same as in the grid template?

robert

Grid

answered on 23 Mar 2017

1 answer

150 views

BUG REPORT - Grid Custom Editor Template JavaScript comments would throw error

How to reproduce.

Have a Grid setup,

Use Template like this.

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Example"))

Inside Example Template

Get something like this to the bottom of the page other than your normal input:

<script>

$(document).ready(function () {

setTimeout(function () {

// comments that will cause problem

if ($("#hideClassId").val() > 0) {

$("#tClassId").hide();

$("#tClass").show();

}

});

// comments that can cause problem

$("input#IsActive").on('change', function () {

$('#ActiveWaiting').prop('checked', false);

});

// comments that can cause problem

$('#ActiveWaiting').on('change', function () {

$("input#IsActive").prop('checked', false);

});

</script>

Then the popup would freeze.

This is what the error would look like in the console.

Uncaught SyntaxError: Unexpected end of input

at eval (<anonymous>)

at https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:2651

at Function.globalEval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:2662)

at Ha (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:3:21262)

at n.fn.init.append (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:3:22791)

at M.fn.init.n.fn.(anonymous function) [as appendTo] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:3:24510)

at init._createPopupEditor (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:49:21766)

at init.editRow (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:49:19002)

at init.addRow (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:49:26820)

at HTMLAnchorElement.<anonymous> (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:49:27635)

Grid

answered on 23 Mar 2017

1 answer

216 views

[Solved] Filtering grid with data from resource file

I have table in database which contains events of a system and these events have severity code and event code. These codes have to be localized, it means the text for the severity and event codes should be taken from resource files.

Here is how we construct data for the grid:

public ActionResult GetEvents([DataSourceRequest] DataSourceRequest request)

{

IQueryable<SystemEventGridModel> data = SystemEvent.GetSystemEventFromDatabase().Select(systemEvent =>

new SystemEventGridModel

{

Id = systemEvent.Id,

EventCode = systemEvent.EventCode,

SeverityCode = systemEvent.SeverityCode,

Date = systemEvent.Date,

Node = systemEvent.Node,

IsActive = systemEvent.IsActive

});

DataSourceResult dataSourceResult = data.ToDataSourceResult(request);

foreach (SystemEventGridModel gridModel in dataSourceResult.Data)

{

gridModel.EventText = Language.ResourceManager.GetString($"EventText{gridModel.EventCode}");

gridModel.SeverityText = Language.ResourceManager.GetString($"SeverityText{gridModel.SeverityCode}");

}

return Json(dataSourceResult);

}

Then in the grid we show the localized text but not the codes:

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

.Name("SystemEventGrid")

.Columns(columns =>

{

columns.Bound(x => x.Node).Title(Language.SystemEventGridModelTitleNode);

columns.Bound(x => x.SeverityCode).Title(Language.SystemEventGridModelTitleSeverityText).ClientTemplate("#=SeverityText#").Filterable(x => x.Multi(true).CheckAll(false).ItemTemplate("function(e){return columnFirtalableItemTemplate('SeverityCode', 'SeverityText')}"));

columns.Bound(x => x.EventCode).Title(Language.SystemEventGridModelTitleEventText).ClientTemplate("#=EventText#");

columns.Bound(x => x.Date).Title(Language.SystemEventGridModelTitleDate);

columns.Bound(x => x.IsActive).Title(Language.SystemEventGridModelTitleIsActive);

})

.DataSource(binding => binding.Ajax().Read("GetEvents", "Home", null))

.Sortable()

.Filterable()

.Pageable(x => x.Refresh(true)))

The problem is that we can't use the standard filtering for the columns (e.g. EventText) which do not existing in database and are taken from different places:

http://imgur.com/a/bcV7i

Is there a way to apply the filtering for the text and search by code from database?

P.S. I attached only the source files (models, views and controllers) for the example code.

Grid

answered on 23 Mar 2017

4 answers

1.2K+ views

Empty a div if no records are returned by kendo grid on filtering

I have a kendo grid which is defined as below

$('#BrowseSchool').kendoGrid({

columns: [{

title: 'Name',

headerAttributes: { "data-field": 'Name', "data-title": 'Name' },

field: 'Name',

encoded: true

}, {

title: 'City',

headerAttributes: { "data-field": 'City', "data-title": 'City' },

field: 'City',

encoded: true

}, {

title: 'State',

headerAttributes: { "data-field": 'State', "data-title": 'State' },

field: 'State',

encoded: true

}, {

title: 'Zip',

headerAttributes: { "data-field": 'Zip', "data-title": 'Zip' },

field: 'Zip',

encoded: true

}],

pageable: {

buttonCount: 10

},

sortable: true,

selectable: 'Single, Row',

filterable: true,

scrollable: {

height: '200px'

},

messages: {

noRecords: 'No records available.'

},

dataSource: {

type: (function() {

if (kendo.data.transports['aspnetmvc-ajax']) {

return 'aspnetmvc-ajax';

} else {

throw new Error('The kendo.aspnetmvc.min.js script is not included.');

}

})(),

transport: {

read: {

url: '/Student/Student_Read'

},

prefix: ''

},

pageSize: 10,

page: 1,

total: 0,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

serverGrouping: true,

serverAggregates: true,

filter: [],

schema: {

data: 'Data',

total: 'Total',

errors: 'Errors',

model: {

fields: {

Address1: { type: 'string' },

Name: { type: 'string' },

City: { type: 'string' },

State: { type: 'string' },

Zip: { type: 'string' }

}

});

I have a div tag defined as below in my view, where the grid is loaded.

<div id="BrowseSchool" class="browse"></div>

Now I want that if there are no records returned by the Kendo grid when a filter is applied, I want to hide my div inside which kendo grid loads and show a different div.
I have tried adding databound event to my grid like below:

databound: function (e) {

alert("No Data");

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

//if (grid.dataSource.total() == 0) {

// alert("No Data");

// $("#BrowseSchool").hide();

//}

},

But, this doesn't seem to be working, as I didn't get the alert box.
My question is, how can I hide a div if there are no records returned by the kendo grid when a filter is applied?

Thanks in advance!

Grid

answered on 23 Mar 2017