Questions on UI for ASP.NET MVC Forum

1 answer

512 views

Its possible to create Vertical Menu with Vertical children with expand/collapse child with Kendo.Menu

Hello,

I would like to implement a vertical menu and for the child or sub menus
have them pull down like an accordion style rather than flyout.

Is this possible or does anyone have an example I can look at?, its so fantastic if I can achieve with Kendo.Menu

Thanks.

Menu

answered on 26 Feb 2018

3 answers

475 views

Window .center() working only first time

I have code on window :

.Events(events => events.Open("WindowToCenter"))

and javascript:

function WindowToCenter() {

var window = $('#windowEditArticle').data("kendoWindow");

window.center();

}

Problem is that .center() working only first time. When I open window next time window position is total wrong.

Any idea?

Window

answered on 23 Feb 2018

3 answers

513 views

Drag and drop between two treeviews and save in the database

Hello,

I am stacked with this problem since 4 days.

I have two treeviews, the data of the first one is retrieved from my database as bellow :

@(Html.Kendo().TreeView()

.Name("treeview-left")

.Events(events => events

.DragEnd("HierarchyDragEnd"))

.HtmlAttributes(new { style = "height: 100%;" })

.DataTextField("name")

.DragAndDrop(true)

.DataSource(source => source

.Model(m => m

.Id("itemId")

.HasChildren("haschildren")

)

.Read(read => read

.Action("GetCatalog", "ItemsSelection")))

.ExpandAll(true)

)

and the second treeview is empty, but i need to drag and drop items on it from the first tree and save in database :

@(Html.Kendo().TreeView()

.Name("treeview-right")

.Events(events => events

.DragEnd("HierarchyDragEnd"))

.HtmlAttributes(new { style = "height: 100%;" })

.DragAndDrop(true)

.DataTextField("name")

.DataSource(source => source

.Model(m => m

.Id("itemId")

.HasChildren("haschildren")

)

I use the script bellow to get the information from the first tree but the script works just in case if i do drag and drop in the same tree:

function HierarchyDragEnd(e) {

setTimeout(function () {

var originDataItem = $("#treeview-left").data('kendoTreeView').dataItem(e.sourceNode);

var originNodeId = originDataItem.id;

var originNodeText = originDataItem.name;

var destinationDataItem = $("#treeview-right").data('kendoTreeView').dataItem(e.destinationNode);

var destinationNodeId = destinationDataItem.id;

var destinationNodeText = destinationDataItem.name;

destinationDataItem.add(originDataItem);

var dropPosition = e.dropPosition;

alert("Origin ID: " + originNodeId +

"\nOrigin Text: " + originNodeText +

"\nDestination ID: " + destinationNodeId +

"\nDestination Text: " + destinationNodeText +

"\nDrop Position: " + dropPosition);

}, 100);

}

Can someone pease help me to get all the information i need to save the dropped items in my database, maybe i am not using the right events or something else.

Thank you for your help.

TreeView

answered on 22 Feb 2018

3 answers

213 views

Grid / Hierarchy and Conditional Statements

The above is a code snippet from a Hierarchical Grid Template. What I am attempting to do is show an icon based on the value of "cosci". The issue is, this value is null. The type of this object is string. But when the page is hit, the value is gone. My Previous attempts had me set the object type to boolean. In all cases, it always came back as null. Interestingly enough, the c.ci.IsDO is "true", and it's type is boolean. Is it possible to have conditional statements in a child template? Please provide source files or a link to documentation that will shed light on the issue; but not http://demos.telerik.com/aspnet-mvc/grid/, as that link does not address the issue.

FWIW, the convertToBoolean is a function I was using in attempt to change the types to achieve my desired result(s), this fails, because the sequence in which the objects are loaded into the DOM is unexpected.

Thanks.

Grid

answered on 22 Feb 2018

1 answer

180 views

How do you set the EnableRangeFiltering property when using Razor and Ajax client-side binding?

I am trying to enable range filtering using the EnableRangeFiltering property on a Grid column. The ShippedDate column in the following example demonstrates how to do it using webforms and server side binding, but I need an example using Razor and Ajax client side binding.

https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx?show-source=true

Can you point me in the right direction?

Grid

answered on 22 Feb 2018

3 answers

777 views

How to create a tooltip for Grid column

I have a grid with an image column to show if there is an error or not. If this is an error, I would like to display a tooltip with a message when the user hovers over the image. The message would be from c.ErrorMessage.

Is there a sample on how to do this? I searched and could not find one.

@(Html.Kendo().Grid<GridLineItem>().Name("grid").Columns(columns =>

{

columns.Bound(c => c.ReportName).Title("Status").ClientTemplate(

"# if (HasError == true) { #" +

"<img src='" + Url.Content("Images/error.png") + "'/>" +

"# } else { #" +

"<img src='" + Url.Content("Images/success.png") + "'/>" +

"# } #"

);

)

Grid

answered on 22 Feb 2018

7 answers

881 views

ClientDetailTemplateId and Id of Parent

Hello!
I have grid, which contains ClientDetailTemplateId("//here template with Grid -> " MyGridChild"...
If I create new object in MyGridChild, I want get Id him Parent
Please help

Grid

answered on 22 Feb 2018

2 answers

506 views

Multi-Select List in bootstrap modal.

Hey there guys and girl, i seem to be having a bit of an issues with the KENDO multi-select list when using it in a bootstrap modal. I have a simple form (_CreatePartial) that is used to add a new person to the. When the form is opened the first time, the multi-select list (car and phone ) load and appear properly but if you close the modal and re-open it, the multi-select lists don't load again.I don't know what exactly could be causing this, I am using the latest version of KENDO (2018.1.117) and latest version of bootstrap-3 (3.3.7). I have attached pictures to show what i see. Thanks for the help

MultiSelect

answered on 20 Feb 2018

4 answers

1.2K+ views

Dropdownlistfor Displaying [object Object] when selecting items

Hello,

Since updating to the latest version of UI for MVC, I've been having issues with DropdownListFor. Everything seems to work fine i.e. load the data and displaying it fine when you click on the icon to open the popup. However, when you select a value, the text displayed is [object Object]. I have no idea why this is and I have searched around for a solution to no avail. I would really appreciate some help on this issue. Below is a sample of my code:

@{

Html.Kendo().DropDownListFor(m => m.Centres)

.Name("cboCentres")

.DataTextField("CentreName")

.DataValueField("CentreId")

.OptionLabel(new

{

CentreName = "All",

CentreId = 0

})

.DataSource(ds =>

{

ds.Read(r => r.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Lookup", action = "GetCentres" })).Type(HttpVerbs.Get));

})

.Events(e =>

{

e.Change("cboCentres_SelectedValueChanged");

})

.Value("0")

.Render();

}

Below is my code for getting the data using WebApi:

public async Task<HttpResponseMessage

> GetCentres() => Request.CreateResponse(HttpStatusCode.OK, await _CentreServices.GetCentres(), Configuration.Formatters.JsonFormatter);

As an aside, another minor issue I am having is with the grid. Despite the grid displaying data, at the bottom right of it, I get the text "No items to display" instead of the previous "5 of 10 items" for example.

Regards

DropDownList

answered on 20 Feb 2018

5 answers

144 views

DataSpriteCssClassField does not seem to be working

Hi,

I cannot seem to get the DataSpriteCssClassField to work correctly. Here is the controller supplied class for each node...

01.public class DataDictionary_Categories : IStringIDDescription

02.{

03.

04. [DataMember]

05. [XmlAttribute]

06. public string CategoryCode { get; set; } = string.Empty;

07.

08. [DataMember]

09. [XmlAttribute]

10. public string TaxonomyCode { get; set; } = string.Empty;

11.

12. [DataMember]

13. [XmlAttribute]

14. public string Taxonomy { get; set; } = string.Empty;

15.

16. [DataMember]

17. [XmlAttribute]

18. public string Parent { get; set; } = string.Empty;

19.

20. [DataMember]

21. [XmlAttribute]

22. public string Description { get; set; } = string.Empty;

23.

24. [DataMember]

25. [XmlAttribute]

26. public string DataSpriteCSSClass { get { return ("glyphicon glyphicon-folder-close"); } set { } }

27.

28. [DataMember]

29. [XmlAttribute]

30. public int ComponentCount { get; set; } = 0;

31.

32. [DataMember]

33. [XmlAttribute]

34. public bool HasChildren

35. {

36. get

37. {

38. return (ComponentCount == 0);

39. }

40.

41. set { }

42. }

43.

44. public DataDictionary_Categories()

45. {

46.

47. }

48.}

Here is the TreeView setup...

01.@(Html.Kendo().TreeView()

02. .Name("CategoryTree")

03. .TemplateId("TreeViewTemplate")

04. .HtmlAttributes(new { })

05. .DataTextField("Description")

06. .AutoScroll(false)

07. .LoadOnDemand(true)

08. .Events(e => e.Select("OnCategorySelected"))

09. .Events(e => e.Expand("OnCategoryExpand"))

10. .Events(e => e.Collapse("OnCategoryCollapse"))

11. .Animation(true)

12. .DataSpriteCssClassField("DataSpriteCSSClass")

13. .DataSource(d => d

14. .Model(m => m

15. .Id("CategoryCode")

16. .HasChildren("HasChildren")

17. )

18. .Read(read => read.Action("ListSubCategories", "Services"))

19. .Events(e => e.RequestEnd("OnCategoryRequestEnd"))

20. .Events(e => e.RequestStart("OnCategoryRequestStart"))

21.))

I am trying to use the BootStrap glyph icons folder open/folder close glyphs. I have the glyhs working elsewhere. It seems that the TreeView does not recognize this kind of thing. Am I missing something?

TreeView

answered on 20 Feb 2018