Questions on UI for ASP.NET MVC Forum

4 answers

874 views

TabStrip not displaying data for subsequent Tabs

Hello guys, i am trying to load a partial view in my tab-strip. each tab strip has a place-holder, where the partial view. will be displayed. One first load, the partial view displays that data. However, when i click the subsequent tabs, the tab-strip does not reload with the new data. i have added a tab re-load logic but, to no avail unfortunately.

Here is my Index.cshtml

01.<div class="demo-section k-content">

02. @(Html.Kendo().TabStrip()

03. .Name("tabstrip")

04. .Events(events => events

05. .Select("onSelect")

06. )

07. .Animation(animation =>

08. animation.Open(effect =>

09. effect.Fade(FadeDirection.In)))

10. .Items(tabstrip =>

11. {

12. tabstrip.Add().Text("James Bond")

13. .Selected(true)

14. .Content(@<text>

15. <div id="partialPlaceHolder" style="display:none;">

16.

17. </div>

18. </text>);

19.

20. tabstrip.Add().Text("Earl Klugh")

21. .Content(@<text>

22. <div id="partialPlaceHolder" style="display:none;">

23.

24. </div>

25. </text>);

26.

27. tabstrip.Add().Text("Paul Play")

28. .Content(@<text>

29. <div id="partialPlaceHolder" style="display:none;">

30.

31. </div>

32. </text>);

33.

34. tabstrip.Add().Text("Chinonso M")

35. .Content(@<text>

36. <div id="partialPlaceHolder" style="display:none;">

37.

38. </div>

39. </text>);

40. })

41.)

42.</div>

43.

44.<script type="text/javascript">

45.

46. $(document).ready(function () {

47. $("#tabstrip").kendoTabStrip({

48. animation: {

49. open: {

50. effects: "fadeIn"

51. }

52. }

53. });

54.

55. $.get('/Parent/MyAction', { id: 1 }, function (data) {

56.

57. $('#partialPlaceHolder').html(data);

58. /* little fade in effect */

59. $('#partialPlaceHolder').fadeIn('fast');

60. })

61. });

62.

63. function onSelect(e) {

64. // alert($(e.item).find("> .k-link").text());

65. //$(e.contentElement).html("");

66. var tabName = $(e.item).find("> .k-link").text();

67. var id = 0;

68.

69. if (tabName == "James Bond"){ id = 1; }

70.

71. else if (tabName == "Earl Klugh"){ id = 2; }

72.

73. else if (tabName == "Paul Play") { id = 3; }

74.

75. else if (tabName == "Chinonso M"){ id = 4; }

76.

77. $.get('/Parent/MyAction', { id: id }, function (data) {

78.

79. $('#partialPlaceHolder').html(data);

80. /* little fade in effect */

81. $('#partialPlaceHolder').fadeIn('fast');

82. })

83.

84. //var ts = $("#tabstrip").data().kendoTabStrip;

85. //var item = ts.items()[1];

86. //ts.reload(item);

87.

88. var ts = $("#tabstrip").data().kendoTabStrip;

89. ts.tabGroup.on('click', 'li', function (e) {

90. ts.reload($(this));

91. })

92. }

93.

94.</script>

Here is my ParentController.cs

01.namespace JustTestingWeb3.Controllers

02.{

03. public class ParentController : Controller

04. {

05. public DbQuery db = new DbQuery();

06. // GET: Parent

07. public ActionResult Index()

08. {

09. return View();

10. }

11.

12. public ActionResult MyAction(int id)

13. {

14. var result = db.GetChildren(id);

15. return PartialView("~/Views/Child/Detail.cshtml",result);

16. }

17. }

18.}

Here is the picture, when if load the firs time and when i click on the next tab. Thanks for your help.

TabStrip

answered on 28 Jun 2017

1 answer

330 views

online report designer for client is possible or not

Hello,

We are working on a web site using telerik reporting q1 2013 trial version our client will purchase its license for us.
But we have some requirement which client and we want to be clear telerik supports or not.

The Requirement is we have *.trdx telerik report file designed using telerik report designer and displayed in web site using report viewer.
Now client can edit this *.trdx report and save on server
Now my question
1) is this possible using telerik reporting technologies to online edit report in design mode and save again like the picture i attached shows?
2) If not online than is this possible using telerik report designer to update *.trdx and after doing changes in report save it on server directly from telerik report designer.

Please help me out.

So that we can create demo for client and want to make sure that this requirement may be fulfilled by Telerik reporting q1 2013 or with telerik report designer standalone.

General Discussions

answered on 28 Jun 2017

1 answer

195 views

Video Controls?

Why do my video controls look like the attached image versus the way the demo works? I've gone through styles, disabling what I thought might do it?

@(Html.Kendo().MediaPlayer()
.Name("heads-up-youtube-player-id-" + Model.LiveWidgetID)
.AutoPlay(Model.AutoPlay)
.AutoRepeat(Model.AutoRepeat)
.Navigatable(Model.Navigatable)
.FullScreen(Model.FullScreen)
.Volume(Model.Volume)
.Mute(Model.Mute)
.ForwardSeek(Model.ForwardSeek)
.Media(m => m
.Title(Model.WidgetTitle)
.Source(Model.YouTubeURL)
)
.HtmlAttributes(new { style = "height: 100%; background-color: transparent" })
)

MediaPlayer

answered on 28 Jun 2017

1 answer

131 views

[Solved] Remove menu extra part

Hello,

Did anyone knows how can I remove the part that is extra from menu?

Menu

answered on 28 Jun 2017

1 answer

961 views

hide and show export excel and pdf in grid

How set export to excel and export to pdf based on condition kendo grid

Grid

answered on 28 Jun 2017

6 answers

464 views

Telerik MVC Upgrade Wizard

I just upgraded from 2017.2.504 to 2017.2.621. As of this update I can not seem to get any project to upgrade. I get 100% failure no matter how complex or simple the solution.

Does anyone have an actual solution which is upgrade capable via the "normal" upgrade wizard? I know the Telerik folks deliver great products however this might be simply something I am not doing or doing incorrectly.

As I am now getting 100% failures, I visited the documentation site and actually walked through things step by step. I noticed the existence of the "Compatibility" button. While that looks like a wonderful option, I now get the error "There is missing resource for comparing versions: 2017.2.504 and 2017.2.621 for technology ASP.NET MVC." once it is used. This error is consistent among all the projects I have attempted.

NOTE: I define a failure to upgrade to mean any upgrade that never completes (after waiting 20 minutes) or produces a "the task stopped working" message. In these cases I undid all source code changes, re-retrieved a fresh copy of everything from TFS and re-tried things.

My review of the TELERIK install shows I do in fact have the requisite 2017.2.621 files however the project in question does not have them copied to it yet as that is what the upgrade wizard is supposed to do.

If it is of importance the projects in question are all .NET 4.6.1.

NOTE: My asp.net/Ajax wizards work without issue. The problem seems to be MVC based.

General Discussions

answered on 27 Jun 2017

3 answers

1.0K+ views

Cascading DropDownLists

I am trying to follow the example code of a cascading combobox here for some cascading drop down lists I need. I have 3 total drop down lists, just as in the example. The first cascading drop down is working fine. The only problem with the first cascading drop down is that my "optionlabel" is ignored completely. The second does not work at all. What's wrong with my second cascading drop down list, and how do I pass my vehicle type and my make to the action to get my models? Here are my drop down lists.


<script type="text/javascript">
    function VehicleType() {
        return {
            VehicleType: $("#VehicleType").val()
        };
    }
    function Make() {
        return {
            Make: $("#Make").val()
        };
    }
</script>

<%: Html.Kendo().DropDownListFor(i => i.VehicleType)
                .Name("VehicleType")
                .BindTo(new SelectList(Model.DemographicValues, "ValidValue", "ValidValueLabel"))
                .OptionLabel("Please Select")
                .HtmlAttributes(new {Style="Width:200px;"})%>

<%: Html.Kendo().DropDownListFor(i => i.Make)
                .Name("Make")
                .DataTextField("Make")
                .DataValueField("Make_Code")
                .DataSource(source => {
                    source.Read(read =>
                        {
                            read.Action("GetCascadeMakes", "Home")
                                .Data("VehicleType");
                        })
                        .ServerFiltering(true);
                    })
                .OptionLabel("Please Select")
                .CascadeFrom("VehicleType")
                .Enable(false)
                .AutoBind(false)
                 %>


<%: Html.Kendo().DropDownListFor(i => i.Model)
                .Name("Model")
                .DataTextField("Model")
                .DataValueField("ModelCode")
                .DataSource(source => {
                    source.Read(read =>
                        {
                            read.Action("GetCascadeModels", "Home")
                                .Data("Make");
                        })
                        .ServerFiltering(true);
                    })
                .CascadeFrom("Make")
                .Enable(false)
                .AutoBind(false)
                 %>

DropDownList

answered on 27 Jun 2017

4 answers

926 views

Pass series name to tooltip template

I have a pop-up chart in a tooltip template working for some column charts. The definition passes the dataitem to the template function, which then creates a pie chart in the tooltip.

This is working well for charts which dynamically create the series using a field in the dataitem.

However, I now have a stacked column chart using two fixed series, from two different value fields in the dataitem. To create the pop-up chart, I need to identify which series is being hovered over, but I can't work out how to pass this to the function, as the dataitem field names just seem to get parsed in a 'magical' way.

The chart definition is:-

@(Html.Kendo().Chart<WLI_Payments.Models.TimelinessChartItem>()

.Name("SummaryTimelinessChartFour")

//.Title("Paid / Awaiting Payment Requests")

.Title(ti => ti.Text("Payment Timeliness By Month").Font("11px Arial"))

.Theme("bootstrap")

.Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))

.ChartArea(c => c.Background("transparent").Height(250))

.DataSource(ds => ds.Read(read => read.Action("GetTimelinessData", "Dashboard"))

.Sort(s =>

{

s.Add("Year").Ascending();

}

)

.SeriesDefaults(sd => sd.Column().Stack(true))

.Series(series =>

{

series.Column(model => model.InTime).Name("In Time").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#428BCA");

series.Column(model => model.Late).Name("Late").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#DA3B36");

})

.CategoryAxis(axis => axis

.Categories(model => model.MonthText)

.Labels(labels => labels.Rotation(-45).Font("10px Arial"))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Font("10px Arial"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0:N0}")

//.Template("#=series.name# : #=value#")

//.Font("10px Arial")

.Background("White")

.Template("#=tooltipTemplate4(dataItem)#")

)

.Pannable(p => p.Lock(ChartAxisLock.Y))

.Zoomable(zoomable => zoomable

.Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))

.Selection(selection => selection.Lock(ChartAxisLock.Y))

)

</div>

<p></p></text>);

})

)

The template definition is:-

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

<div id="childChart4" />

# setTimeout(function() { createChildChart4(SeriesName,Mth,Year); }) #

</script>

The Mth and Year fields are in the dataitem, and get passed through to the function, but I also need the series name.

The template is defined in the script block as:-

var tooltipTemplate4 = kendo.template($("#childChartTemplate4").html());

And then the function createChildChart4 gets the data and builds the chart (or would do, if it had the series name). How do I pass the series name through to the function?

Thanks

Chart

answered on 27 Jun 2017

1 answer

562 views

Multi-level grid

Hello,

My team is wanting to utilize a grid control to display data in a multi level format. We looked into the pivot grid control, and that looks a little more complicated then what we need, and after looking over documentation, the Aggregate filter on the grid control looks like the closest match (Doc here). What we are looking for is in the attached image, Grid Mockup.png.

Essentially, the x-axis is the month/year for the data that we are looking for, with the current month needing to show up two times, once for the estimated month and the next column with month-to-date. All the other columns are for a past month. The y-axis is a given cost center.

We want the top row(first level) to be an aggregate of all the data across all cost centers for the given time period, upon expanding the tree, it shows a second level where it is the overall cost center, then then it can be expanded further to show the third level where it is the specific cost center.

I strongly feel the aggregate filter is what we are looking for, but is it possible to write our own filters? Or is there a better way to do this?

Grid

answered on 27 Jun 2017

1 answer

151 views

kendo grid date column format after filtering

I have a kendo MVC grid that has a bound column like below

columns.Bound(c => c.CreatedDate).Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Format("{0: MM/dd/yyyy HH.mm.ss}");

the column formats fine when first loading the view: 06/22/2017 15.02.00
but i have some buttons which use AJAX to post back and get back filtered data and when re-populating the grid the column looks like this:

/Date(1498161720000)/

Any help?

Grid

answered on 27 Jun 2017