Questions on UI for ASP.NET MVC Forum

1 answer

171 views

We can't really figure out what is causing this, but all of a sudden, all our TimePickers' popup's got wrong width-formatting (exceptionally small - see picture). Have anyone experienced anything similar or have a proposal to a fix? Is there a way to override this property?

Our code should be straightforward (excepts it is a rather large solution, and everything can change the behavior).
Html:

<td class="col-xs-3">

<input name="startTime" id="startTime" data-val-required="" />

</td>

Js:

_startTime = $("#startTime").kendoTimePicker({

format: "HH:mm",

change: changePeriodTypeOptions

}).data("kendoTimePicker");

DatePicker

answered on 25 Aug 2014

1 answer

393 views

Uncaught TypeError: Cannot read property 'removeData' of null KENDO UI

Hi I purchased this version of kendo ui -> telerik.kendoui.professional.2014.2.716.commercial. I keep on getting this error -> Uncaught TypeError: Cannot read property 'removeData' of null after clicking my return button w/c calls a function with this code -> mainVM.agentVM.isOpenEdit(false); this line of code hides the div that contains some html elements. in my html it looks like this -> <div data-bind="if: mainVM.agentVM.isOpenEditList"> sample element </div>

I hope somebody can help me, thank you

General Discussions

answered on 25 Aug 2014

1 answer

92 views

[Solved] Select a specific date on load

How can I select a specific date on load? I have .Selectable(true) but that only selects the date after a click.

Scheduler

answered on 25 Aug 2014

1 answer

146 views

Create a DataSource server Side

Hi support,

is there a way to create a new kendo.mvc.ui.datasource on the server and transfer this with json to the client ?

Grid

answered on 25 Aug 2014

1 answer

141 views

Row grouping / styling

I have been using Kendo UI for MVC for about a year now and it's awesome. The same can be said/written about the support! So, thanks!

I have a project coming up where I will be breaking down traveler information in the grid. These travelers can have a guest. I want to list the main traveler and guest traveler in their own rows, but I need to group them. Group may be a strong word, but I was thinking of simply styling the grouped rows to match each other rather than the standard Kendo styling of alternating row colors every other row. I looked over the examples in the demo section and nothing comes close to what I need to do here...

I attached a few images of what I am thinking. Basically I have two questions:

1. Is this a good idea? I am familiar with Kendo but nowhere near an expert-level user.

2. Can this be done? I have to assume I can iterate the grid contents and apply css styling at a row-level... Pagination will be at 100 per page with a maximum amount of travelers currently at 800, so we aren't talking about a TON of data here.

Can anyone point me in the right direction or send a fiddle that could put me on the right track? I sincerely appreciate your help!

Grid

answered on 25 Aug 2014

1 answer

279 views

Treeview - Disable Child nodes

Hi,

I have a a kendo treeview control and a requirement wherein I have to disable all the child nodes when a parent node is selected. I for the life of me cannot seem to get the list of child nodes for a parent node. Any help would be appreciated.

TreeView

answered on 25 Aug 2014

3 answers

109 views

Could you provide me assistance to have a graph like the attached image using aspnetmvc?

Hi,

I had tried using Telerik ASP.Net mvc area charts.But i found that its overlapping between series of two colors.The below graph shows that there is a normal oxygen level where limit is 5.The area lying below normal level is shown as red and those above as green.This is my requirement.But when i drawn using Area Chart,it plots like the below chart. For example,its showing 3.5 at 11 o clock.Then at 12 o clock,it has range above normal level with 5.Then why the red portion sliding down till 12o clock.I dont want this.Is there any suggestion for drawing like that?

Chart

answered on 22 Aug 2014

6 answers

280 views

[Solved] Basic Example with asp.net web api and a grid

Hi,

Please can someone help as I cannot get the grid to display any results?

I have adapted the code from the grid example in the installed demos but cant get it to work. Please see my code below.

View:

@(Html.Kendo().Grid<StatusPage.Models.Appliance>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Title);

columns.Bound(p => p.CurrentStatus).Width(100);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

})

.ToolBar(tools =>

{

tools.Create();

})

.Sortable()

.Pageable()

.Filterable()

.DataSource(dataSource =>

dataSource

.WebApi()

.Model(model =>

{

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

})

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

.Read(read => read.Url(Url.HttpRouteUrl("Appliance", new { controller = "Appliances" })))

.Create(create => create.Url(Url.HttpRouteUrl("Appliance", new { controller = "Appliances" })))

.Update(update => update.Url(Url.HttpRouteUrl("Appliance", new { controller = "Appliances", id = "{0}" })))

.Destroy(destroy => destroy.Url(Url.HttpRouteUrl("Appliance", new { controller = "Appliances", id = "{0}" })))

)

<script>

function error_handler(e) {

var errors = $.parseJSON(e.xhr.responseText);

if (errors) {

alert("Errors:\n" + errors.join("\n"));

}

</script>

Controller:

public class AppliancesController : BaseApiController

{

public AppliancesController(IRepository repo)

: base(repo)

{

}

public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)

{

//var appliances = TheRepository.GetAppliances().ToList()

// .Select(m => TheModelFactory.Create(m));

var appliances = new List<Appliance>() { new Appliance() { Title = "Appliance 1", CurrentStatus = 2 } };

return appliances.ToDataSourceResult(request);

}

public HttpResponseMessage Get(int appId)

{

try

{

var entity = TheRepository.GetAppliance(appId);

if (entity == null) return Not_Found();

return Request.CreateResponse(HttpStatusCode.OK,

TheModelFactory.Create(entity));

}

catch

{

// TODO logging

}

return Bad_Request();

}

public HttpResponseMessage Post([FromBody] Appliance model)

{

try

{

if (!ModelState.IsValid) return Bad_Request();

model.CurrentStatus = (int)StatusType.Operational;

model.LastUpdated = DateTime.Now;

if (TheRepository.Insert(model) && TheRepository.SaveAll())

{

return Request.CreateResponse(HttpStatusCode.Created, TheModelFactory.Create(model));

}

catch

{

// TODO logging

}

return Bad_Request();

}

[HttpDelete]

public HttpResponseMessage Delete(int appId)

{

try

{

var entity = TheRepository.GetAppliance(appId);

if (entity == null) return Not_Found();

if (TheRepository.DeleteAppliance(entity) && TheRepository.SaveAll())

{

return Request.CreateResponse(HttpStatusCode.OK);

}

catch

{

// TODO logging

}

return Bad_Request();

}

[HttpPut]

[HttpPatch]

public HttpResponseMessage Patch(int appId, [FromBody] Appliance model)

{

try

{

if (!ModelState.IsValid || appId != model.Id)

return Bad_Request();

if (TheRepository.UpdateAppliance(model) && TheRepository.SaveAll())

{

return Request.CreateResponse(HttpStatusCode.OK);

}

catch (Exception ex)

{

return Bad_Request(ex);

}

return Bad_Request();

}

The grid is displayed and the web api controller GET is being called and is returning the DataSourceResult and no rows are displayed.

If anyone can help I would be grateful. Thanks in advance.

Grid

answered on 22 Aug 2014

1 answer

119 views

DropDownListFor in grid - cannot get access to selected item in update

Hi,

I cannot figure out how to get access to dropdown selected item in the update procedure.

See attached files.

Regards

Grid

answered on 22 Aug 2014

1 answer

2.4K+ views

Kendo Grid Custom Delete

Hi ,

I'm trying to add custom delete command in the grid , When clicking the delete button I have to call a popup window with textbox entering reason to delete the record and save the reason in different table and delete the selected record from the grid... I'm not able to create a delete popup. Any help appreciated. Thank you

<h2>Delete Selected Transaction</h2>

<br />

@* The DIV where the Kendo grid will be initialized *@

<div id="grid"></div>

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

<p> <h4> Enter Reason to Delete this Transaction</h4></p>

<div class="k-edit-label"><label for="Notes">Notes</label></div>

<textarea name="Notes" data-bind="value: Notes" class="k-textbox" required validationMessage="Notes is required." style="height: 100px;"></textarea>

</script>

<script>

$(function () {

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

url: "GetJournalsFromLoadByID",

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

type: "POST",

cache: true,

data: {

tkey: @Request["tkey"]

}

},

update: {

url: "@Url.Action("EditingPopup_Delete","Journals")",

type: "POST",

complete: function(e) {

alert("Successfully Deleted - Transactionn");

$("#grid").data("kendoGrid").dataSource.read();

},

error: function (e) {

alert("Manage: DeleteTransaction -> Ajax Error!");

}

},

parameterMap: function (data, operation) {

if (operation != "read") {

var result = {};

for (var i = 0; i < data.models.length; i++) {

var tk = data.models[i];

var c = new Date(tk.CreatedDate);

tk.CreatedDate = kendo.toString(new Date(c), "F");

for (var member in tk) {

result["newTkey[" + i + "]." + member] = tk[member];

}

return result;

}

else {

return JSON.stringify(data)

}

},

schema: {

data: "Data",

total: "Total",

model: {

id: "TRANSACTION_KEY",

fields: {

TRANSACTION_KEY: { editable: false, nullable: true },

Notes: { editable: true, validation: { required: true } }

}

},

pageSize: 1000,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

groupable: true,

columnMenu: true,

filterable: true,

sortable: true,

pageable: true,

columns: [

{ field: "TRANSACTION_KEY", title: "TRANSACTION_KEY", width: "100px" },

{ field: "FISCAL_YEAR ", title: "FISCAL_YEAR", width: "150px" },

{ field: "ACCOUNTING_PERIOD", title: "ACCOUNTING_PERIOD", width: "150px" },

{ field: "Notes", width:"250px" },

{ command: ["edit"], title:"Update Delete Reason", width:"200px"}], //["edit","destroy"]

editable: {

mode: "popup",

template: kendo.template($("#popup_editor").html())

}

});

</script>

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

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">

<span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>

</script>

<script type="text/javascript">

var validationMessageTmpl = kendo.template($("#message").html());

function error(args) {

if (args.errors) {

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

grid.one("dataBinding", function (e) {

e.preventDefault(); // cancel grid rebind if error occurs

for (var error in args.errors) {

showMessage(grid.editable.element, error, args.errors[error].errors);

}