Questions on UI for ASP.NET MVC Forum

6 answers

1.0K+ 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

585 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

62 views

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

382 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

117 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

182 views

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.1K+ 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

1 answer

3.5K+ views

Change button color/style

Is there any classes I can add to a button to change the styling similar to bootstrap's "btn-danger"?

For buttons that do potentially dangerous things, I would like to add special styling to them but not have to worry about if the text color will be correct. Currently there is the "Primary" attribute, but it'd be great if there were other categories.

I understand adding features like that isn't easy to do quickly, but if there are any classes I can add to a normal kendo button to change color and style that's be great!

Button

answered on 23 Mar 2017

1 answer

104 views

Retrieve search criteria from filter textbox

Hi All,

I need to display the filter criteria used by a user for a kendoUI grid. Is there any built in way to display this info?
If not, how can I access the those values (like value in search textbox, greater than, less than condition values etc).

Grid

answered on 22 Mar 2017

3 answers

1.0K+ views

Validator with no formal form

I have a form that isn't inside of an HTML form tag, and upon a specific button click, I gather up the form data, bundle it up as a JSON object, send to an MVC controller and get the results back via Ajax. Can I still use the Telerik Validator component, and if so, how? Are there any examples of using it via Ajax versus a form submission?

General Discussions

answered on 22 Mar 2017