Questions on UI for ASP.NET MVC Forum

1 answer

365 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

77 views

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

126 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

126 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

255 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

99 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

249 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

100 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

180 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