Questions on UI for ASP.NET MVC Forum

1 answer

135 views

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

134 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

267 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

105 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

264 views

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

109 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.3K+ 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);

}

});

}

function showMessage(container, name, errors) {

//add the validation message to the form

container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")

.replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))

}

</script>

Grid

answered on 22 Aug 2014

3 answers

220 views

Paging/Scrolling not working as expected with AJAX binding

I have a hierarchal grid that's mostly doing what I want, however, paging and scrolling are not working as expected. I'm using AJAX binding. It doesn't seem to matter what I set pageSize to in the DataSource section; the presentation doesn't change much, only the number of page buttons for example. In my current scenario I have 12 rows in the 2nd level grid, and a pageSize of 6. Scrolling is turned on. The grid allows me to scroll through all 12 rows, but what I expected was that I could use the page buttons to advance. I tried turning scrolling off and it kept right on scrolling the entries. This is very curious, and not at all what I expected. The following shows my grid markup (RAZOR format):

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

.Name("BatchGrid")

.Pageable()

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:525px; width:1200px" })

.Columns(columns =>

{

columns.Bound(b => b.BatchID)

.Width("300px")

.Title("Batch ID")

.Visible(false);

columns.Bound(b => b.ShortBatchID)

.Width("100px")

.Title("Batch ID");

columns.Bound(b => b.HasErrorTransaction)

.Width("50px")

.Title("Err").Visible(false);

columns.Command(c => c.Custom("Post Batch")

.Click("onClickPostBatch")

.HtmlAttributes(new { style = "width:100px;" }));

columns.Bound(b => b.Created_Emp_Name)

.Width("200px")

.Title("Created Employee");

columns.Bound(b => b.Transmitted_DateTime)

.Width("175px")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Transmitted");

columns.Bound(b => b.Completed_DateTime)

.Width("175px")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Completed");

columns.Command(c => c.Custom("Delete Batch")

.Click("onClickDeleteBatch")

.HtmlAttributes(new { style = "width:100px;" }));

}

)

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort => sort.Add("HasErrorTransaction").Ascending()) // <-- initial sort

.PageSize(12)

.Read(read => read.Action("FetchBatchCollection", "Home").Data("addlData"))

.ServerOperation(false)

)

.Events(events => events.DataBound("onBatchGridDataBound")

.DetailExpand("onBatchGridExpand"))

.ClientDetailTemplateId("transactions")

)

<!-- Nested grid for transaction object, member of BatchHeader.TranCollection

There can be many ITransaction objects per BatchHeader -->

<script id="transactions" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ROAMTranReview.ROAMHostSvc.TransactionBase>()

.Name("TranGrid_#=BatchID#") // makes the sub-grid name unique so that it will be displayed on each child row.

.HtmlAttributes(new { style = "height:535px; width:1400px" })

.Columns(columns =>

{

columns.Bound(b => b.BatchID)

.Visible(false);

columns.Bound(b => b.TransactionType)

.Visible(false);

columns.Bound(b => b.ID)

.Width("300px")

.Title("Transaction ID")

.Visible(false);

columns.Bound(b => b.ShortTranID)

.Width("100px")

.Title("Tran ID");

columns.Command(c => c.Custom("View Transaction")

.Click("onClickViewTransaction")

.HtmlAttributes(new { style = "width:100px;" }));

columns.Bound(b => b.TranTypeDisplayText)

.Width("100px")

.Title("Type");

columns.Bound(b => b.ItemID)

.Width("100px")

.Title("Item ID");

columns.Bound(b => b.ItemDescription)

.Width("300px")

.Title("Item Description");

columns.Bound(b => b.Quantity)

.Width("50px")

.Title("Qty");

columns.Bound(b => b.WorkOrderTask)

.Width("100px")

.Title("Workorder");

columns.Bound(b => b.EmployeeName)

.Width("200px")

.Title("Employee");

columns.Command(c => c.Custom("Delete Transaction")

.Click("onClickDeleteTransaction")

.HtmlAttributes(new { style = "width:155px;" }));

columns.Bound(b => b.PostingFlagDisplayText)

.Width("150px")

.Title("Posting Flag");

})

.Scrollable()

.Pageable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(6)

.Read(read => read.Action("FetchTransactionCollection", "Home", new { batchID = "#=BatchID#" }))

)

.Events(events => events.DataBound("onTranGridDataBound")

.DetailExpand("onTranGridExpand"))

.ToClientTemplate()

)

</script>

Grid

answered on 22 Aug 2014

22 answers

1.1K+ views

Solution Upgrade no longer detects selected project

I recently updated all my Telerik controls (using the control panel) and now projects that were previously created with the Kendo UI Visual Studio extension will not permit me to upgrade. The error I get is "No Projects Selected" and then instructions to go back and select at least one project. The Kendo upgrade item in the right click menu does not show up at all, so this errors is coming from running the command from the Telerik tool bar. All of the extensions are updated to most current via the control panel and via a check for extension updates in Visual Studio. Creating a new C# Kendo UI MVC Application works fine and the project is manageable by the extension

Installer and VS Extensions

answered on 22 Aug 2014

2 answers

102 views

Possible bug with Online Basic Usage Scheduler

http://demos.telerik.com/aspnet-mvc/scheduler/index

Select Month
Double click "HR seminar preparation" on Wednesday June 5th.
Repeat = Daily
End = On 6/12/2013

Delete the current occurrence for "HR seminar preparation" on June 09
Edit the current occurrence for "HR seminar preparation" on June 10 End Date to 6/11/2013 12:00 PM (this meeting is a two day event now)
Edit the current occurrence for "HR seminar preparation" on June 11 End Date to 6/12/2013 12:00 PM (this meeting is a two day event now)
Edit the current occurrence for "HR seminar preparation" on June 10 Owner from Alex to Charlie

Note that the current occurrence for "HR seminar preparation" on June 10 disappears.
I switched to Week and Day view too and its not there either..

Scheduler

answered on 21 Aug 2014