Questions on UI for ASP.NET MVC Forum

4 answers

167 views

Can someone point to some demos using this new feature using the MVC Wrappers. A complete demo would be nice. Someone mentioned during the webinar about some examples that also show how to detemine when Broswers on online and offline. Thanks

Grid

answered on 30 Jul 2015

3 answers

144 views

kendo Treeview controls througing runtime error

Hi All,

Can you please help me on this .i am using the telerik mvc application.
i have kendo treeviews is not working on the telerik asp.net mvc3 application.but its working fine for the Normal asp.net mvc3 application
add one .cshtml page and add following code its throughing the error.
<div>
@(Html.Kendo().TreeView()
.Name("TreeView") here througing runtime error.
.Items(treeview =>
{
treeview.Add().Text("My Web Site")
.SpriteCssClasses("folder")
.Expanded(true)
.Items(root =>
{
root.Add().Text("images")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(images =>
{
images.Add().Text("logo.png")
.SpriteCssClasses("image");

images.Add().Text("body-back.png")
.SpriteCssClasses("image");

images.Add().Text("my-photo.jpg")
.SpriteCssClasses("image");
});

root.Add().Text("resources")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(resources =>
{
resources.Add().Text("pdf")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(pdf =>
{
pdf.Add().Text("brochure.pdf")
.SpriteCssClasses("pdf");

pdf.Add().Text("prices.pdf")
.SpriteCssClasses("pdf");
});

resources.Add().Text("zip")
.SpriteCssClasses("folder");
});

root.Add().Text("about.html")
.SpriteCssClasses("html");

root.Add().Text("contacts.html")
.SpriteCssClasses("html");

root.Add().Text("index.html")
.SpriteCssClasses("html");

root.Add().Text("portfolio.html")
.SpriteCssClasses("html");
});
})
)
</div>

i had added the kendo dll file web.cong files and referece aslo but its throughing the javascript runtime error like this.

Microsoft JScript runtime error: Object doesn't support property or method 'kendoTreeView'
plwease anybody can help me .

Thanks & Regards,
Narasimha

TreeView

answered on 29 Jul 2015

2 answers

229 views

Kendo Editor inside a grid in-cell editor

Hi,

We're using the Kendo Editor in a custom editor template for fields in a kendo grid in in-cell edit mode.

It mainly works, but one issue is that sometimes using toolbar tools like foreColor seems to cause the editor blur event to fire, which closes the editor.

Is this a bug or is there a suggested work-around for this?

Editor

answered on 29 Jul 2015

2 answers

275 views

Inline Editing while new row is added

Hi there!

I was facing an issue and have been struggling with it since Friday but couldn't find any solution to it.

While searching on internet I found the same issue on you samples and demos website, if you go to this link:

http://demos.telerik.com/kendo-ui/grid/editing-inline

If you click on "Add New Record" button, a new empty row is added into the grid, now without saving this new row, if you click on Edit button in any of other rows, the empty row that was added against Add action gets removed, which is fine, but the row which you want to Edit, it doesn't come up in editable mode.

Is there any fix for it or it is the behavior of the grid?

Regards

Waqar

Grid

answered on 29 Jul 2015

2 answers

109 views

Treeview control not requesting based on parent node

I am following along with the demo found here: http://www.telerik.com/videos/aspnet-mvc/-persistedvalue-kendo-ui-for-asp-net-mvc-treeview-value-kendo-ui-for-asp-net-mvc-treeview and compared with the documentation here: http://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding and there is no network traffic for subsequent child node requests that includes the id of the parent node. What results is a never ending list of "Andrew Fuller"s.

I am operating in Visual Studio 2013 premium with EF 6.1 and SQL server 2014 hosting the Northwind database and the app being run on MVC 5 platform. The static Tree List displayed fine however upon attempting to perform the updates it stopped working.

This overall has been a pretty poor experience with the trial period and I am wondering exactly what I am doing wrong to be experiencing these issues.

TreeView

answered on 29 Jul 2015

3 answers

84 views

Line chart with custom x coordinate

Hi,

Is there a way to specify a specific x-coordinate for each point in a line chart, independent of the category? The reason is I need to create a chart of points that aren't evenly distributed, alongside a denser set of points that are.

Also, when I try to plot them on the same CategoryAxis, the denser plot ends up just adding additional ticks to the category, which I don't want.

Thanks

Chart

answered on 29 Jul 2015

2 answers

205 views

Hierarchical Grid not able to access child grid

I have a hierarchical grid and a button on child grid which on click opens a window and there is a grid on that window. When on click of the button on child grid , i am trying to reload the grid on the window, but throwing an exception $(...).data(...).kendoGrid is undefined. upon all this, it has been working perfectly fine for one month and suddenly it is not fetching any rows. when i debugged it is throwing this exception. may i know what has changed suddenly even though i haven't changed anything on this page.

parent grid

<div class="container-fluid">

<div class="row">

<div class="col-xs-18 col-md-12">

@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()

.Name("grid")

.Columns(columns =>

{

//columns.Bound(p => p.Id).Filterable(false).Width(50);

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

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

columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");

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

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

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

columns.Command(command => command.Custom("Remove").Text("Remove").SendDataKeys(true).Click("deleteClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" }));

}).Events(e => e.DataBound("onDataBound"))

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Selectable()

.ClientDetailTemplateId("template")

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))

)

@*.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="toolbar">

<button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button>

</div>

</text>);

})*@

)

</div>

child grid

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

@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()

.Name("grid_#=Id#")

.Columns(columns =>

{

// columns.Bound(o => o.Id).Width(50);

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

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

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

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

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

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

columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");

columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");

columns.Command(command => command.Custom("Remove").SendDataKeys(true).Click("deleteClickServices"));

}).Events(e => e.DataBound("onDataBoundServices"))

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="toolbar">

<button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Assign Services</button>

</div>

</text>);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

window on click of button on child grid

@(Html.Kendo().Window()

.Name("servicewindow")

.Title("Assign Services")

.Content(@<text><div class="container-fluid">

<div class="row">

<div class="col-xs-18 col-md-12">

@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()

.Name("gridServicesWindow")

.Columns(columns =>

{

columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chkBoxServices' />");

columns.Bound(p => p.Id).Filterable(false).Width(50);

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

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

columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");

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

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.AutoBind(false)

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.HtmlAttributes(new { style = "height:350px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("GetAllServices_Read", "Contract").Data("additionalInfoAddServices{('#=Id#');}"))

)

<button class="k-button close-buttonservices k-primary" style="bottom: 10px; ">Cancel</button>

<button class="k-button k-primary" id="addSelectedServices" style="bottom: 10px; ">Assign</button>

</div>

</div></text>

)

.Draggable()

.Resizable()

.Width(800)

.Modal(true)

.Visible(false)

)

on click of button on child grid

$("#grid").on("click", "#serviceskendowindow", function(e){

$("#servicewindow").data("kendoWindow").center().open();

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

var row= grid.dataItem($(e.target).closest(".k-detail-row").prev(".k-master-row"));

addSelectedContractorService = row.Id;

$('#gridServicesWindow').data().kendoGrid.dataSource.read();

});

$("#gridServicesWindow").on("click", ".checkbox", function (e) {

var checked = $(this).is(":checked");

row = $(this).closest("tr");

var grid = this; // this is not even identifying here so changed to this line

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

var model = grid.dataItem(row);

checkedServiceIds[model.Id] = checked;

});

Grid

answered on 28 Jul 2015

4 answers

64 views

Grid is filtering the next column

I have a MVC grid and it seems that if I pick a column to sort it actually sorts the column to the right.

Below is my razor code. Not sure why this is happening.

Thanks,

Matthew

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

.Columns(columns =>

{     columns.Bound("").Locked(true).Filterable(true).Sortable(false).ClientTemplate("imagePath;").Width(75).Title("").Groupable(false);;      columns.Bound(c => c.Code).Title("Code");

columns.Bound(c => c.ShortName).Title("ShortName");

columns.Bound(c => c.Name).Title("Name");

columns.Bound("").ClientTemplate("#=Description#, #=Comment#).Title("Desc");columns.Bound("").Locked(true).HtmlAttributes(new { @class = "k-group-cell" }).Width(60).Title("").Filterable(false).Sortable(false).Groupable(false).ClientTemplate();

})

.Groupable()

.Filterable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))

.Sortable(sortable => sortable

.SortMode(GridSortMode.MultipleColumn))

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource =>dataSource

.Ajax()

.Sort(sort => sort.Add("Code").Ascending())

.PageSize(50)

.ServerOperation(false)

)

Grid

answered on 28 Jul 2015

2 answers

301 views

Cannot select DropDownList item in javascript

Hi, I am using Kendo for ASP.Net MVC version 2015.2.264

I am trying to set the selected value of a dropdown list programatically via javascript as follows, but it always returns null:

var ddl = $("#selDFTAlignment").data("kendoDropDownList");
if (ddl == null) { alert('null ddl'); return; }
ddl.select("1");

I use the MVC wrappers to define the dropdown which generates the dropdown script as follows:

jQuery(function(){jQuery("#selDTFAlignment").kendoDropDownList({"dataSource":[{"Text":"Left","Value":"0"},{"Text":"Centre","Value":"1"},{"Text":"Right","Value":"2"}],"dataTextField":"Text","template":"\u003cspan\u003e#:data.Text#\u003c/span\u003e","valueTemplate":"\u003cspan\u003e#:data.Text#\u003c/span\u003e","dataValueField":"Value"});});

The dropdown list is inside a div container for a modal popup:

Why is the selector not working? Am I missing something?

General Discussions

answered on 28 Jul 2015

2 answers

101 views

Row only partially deleted when frozen and grouped in batch mode

I've run into a rather specific bug that only occurs when using the MVC helper - an equivalent grid created using Javascript works as expected. This is using Kendo UI v2015.2.624 (Kendo MVC 2015.2.624.545) and is non-browser-specific (reproed in Chrome, Firefox, and IE).

In a grid in batch edit mode, grouped by a column, with some frozen columns, the delete command button will only delete some of the columns in the row it's in. If the delete button is locked (and thus in the locked column section) it will only delete the locked columns for that row; if it's an unlocked column, it will only delete the unlocked columns. You have to Cancel Changes, or Save Changes and refresh the grid, to get both sides to match again.

I've attached a picture showing the error. I also have a test MVC project with two equivalent grids - one created with the MVC helper, one created with Javascript. (I can't attach it because it's 16MB when zipped, and the maximum attachment size is 2MB.) The MVC helper grid displays this error, and the Javascript grid does not. Both grids have a locked and unlocked delete button to show how it only deletes each section in the MVC grid. The delete function is only a stub, so Save Changes doesn't work, but it's not needed to display the bug.

I'm sure I could hook into an event and hide the rest of the row myself, but I'm not sure I should have to, since the javascript grid works well. Is this a known bug? Is there an existing workaround?

Grid

answered on 28 Jul 2015