Questions on UI for ASP.NET MVC Forum

4 answers

190 views

Legend does not display for Column chart

I have a column chart which does not show the legend even though I have set legend.Visible to true. If I uncomment the .Group line commented in the code below, then the legend starts showing, but unfortunately it displays the default colors rather than those I have customised with m => m.UiColor



Sorry I am getting "Invalid post content." when trying to paste the code in this post so I have attached it as an image.

Chart

answered on 04 Jul 2013

7 answers

689 views

[Solved] Not able to change the editable state of a Kendo Grid column.

I have tried numerous solutions I have found googling this, but was unable to find anything that worked for me.
Basically, I have a grid that uses inline editing (with a few foreign key columns), and I need to set some fields as editable based on the value in another field. I have attached a screen print of the grid..
I would like the last column to always be editable, but the other columns should only be editable when the last column is not = 'LOGGED'.

The following is the definition of my partial view that contains the grid - using jQuery dialog to display as popup ..

01.<div id="editLocalEventModal" title="Edit Local Vessel" style="overflow: scroll; display: none;">

02. <form method="post" id="formEditLocalVessel">

03.

04. <div style='text-align: center; background: gray; color: #ffffff; font-size: 15px; height: 22px; width: 100%;'>General Event Information</div>

05. <div style='margin: 5px 5px 0px 5px'>

06. <label for='vesselNum'>Vessel #: </label>

07. <input id='vesselNum' style='width:60px' type='text' disabled value='@ViewBag.VesselNum' />

08. <label for='vesselName'>Vessel Name: </label>

09. <input id='vesselName' style='width:350px' type='text' disabled value='@ViewBag.VesselName' />

10. <input type='checkbox' id='AgentCalled' @ViewBag.AgentCalled/><label for='AgentCalled'>Agent Called</label>

11. <input type='checkbox' id='Quarantine' @ViewBag.Quarantine/><label for='Quarantine'>Quarantine</label>

12. <input type='checkbox' id='COTP' @ViewBag.COTP/><label for='COTP'>COTP</label>

13. <input type='checkbox' id='Announce' @ViewBag.Announce/><label for='Announce'>Announce</label>

14. </div>

15. <br />

16. <div style='text-align: center; background: gray; color: #ffffff; font-size: 15px; height: 22px; width: 100%;'>Activity Details</div>

17. <div>

18. @(Html.Kendo().Grid((IEnumerable<Maris.Domain.VEGetAttrDetailForVEidLocal_Result>)ViewBag.Fields)

19. .Name("editLocalEventDetail")

20. .HtmlAttributes(new { style = "width:1100px; margin:0;" })

21. .DataSource(dataSource => dataSource

22.

.Ajax()

23.

.Batch(true)

24.

.ServerOperation(false)

25.

.PageSize(200)

26.

.Model(model => { model.Id(d => d.VEDDId);

27.

//model.Field(d => d.VEDADesc);

28.

model.Field(p => p.VEDDId).Editable(false);

29.

model.Field(p => p.PortID);

30.

model.Field(p => p.VEDDDate);

31.

model.Field(p => p.VEDDTime);

32.

model.Field(p => p.VEDDComment);

33.

model.Field(p => p.VEDStatusID);

34.

})

35.

//.Read(read => read.Action("EditingCustom_Read","EventSummary"))

36.

)

37. .ToolBar(toolBar =>

38. {

39.

//toolBar.Save();

40.

toolBar.Create();

41. })

42. .Columns(columns =>

43. {

44. columns.ForeignKey(d => d.VEDAId, (System.Collections.IEnumerable)ViewData["AttrDropDown"], "VEDAId", "VEDADesc")

45.

.Title("Attribute").Width(200);

46.

columns.ForeignKey(d => d.PortID, (System.Collections.IEnumerable)ViewData["PortsListsDropDown"], "PortId", "PortShortName").Title("Port").Width(80);

47. columns.Bound(d => d.VEDDDate).Format("{0:MM/dd/yyyy}").Title("Date").Width(100).EditorTemplateName("Date");

48. columns.Bound(d => d.VEDDTime).Format("{0:HH:mm}").Title("Time").Width(100).EditorTemplateName("Time");

49. columns.Bound(d => d.VEDDComment).Title("Comments").Width(300);

50.

columns.ForeignKey(d => d.VEDStatusID, (System.Collections.IEnumerable)ViewData["StatusDropDown"], "VEDStatusID", "VEDStatusAbbr").Title("Status").Width(80);

51. })

52. .Scrollable(scr => scr.Height(400))//will be overriden in splitter layoutchange event.

53. .Resizable(resize => resize.Columns(true))

54. .Events(events => events.Edit("onEdit")) // .Change("onChange")

55. .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))

56. )

57. </div>

58. <br />

59. <div style='text-align: center; background: gray; color: #ffffff; font-size: 15px; height: 22px; width: 100%;'>Comments</div>

60. <div>

61. <textarea id='txtComment' rows='3' style='width: 99.5%; border: 0'>@ViewBag.Comment</textarea>

62. </div>

63. <div style="text-align: center;">

64. <input type="button" id="btnUpdate" value="Save" /> <input type="button" id="btnClose" value="Close" />

65. </div>

66. </form>

67.</div>

68.

69.<script>

70.

71. function onEdit(arg) {

72. alert("hello");

73. // suggestions..

74. }

75.

76.

77.</script>

Grid

answered on 03 Jul 2013

1 answer

332 views

Dynamically update categories legend

Hi,

I have a simple page with a droplist and a chart. When selecting an item of the droplist, I update the chart with new values. The new chart can have different number of categories. On initial load the chart displays correctly with all the categories legend. When selecting a different element from the droplist, the chart updates correctly but the categories legend does not.

For example, if the original chart had 5 categories and the selected item has 4, the chart still shows 5 categories where the 5th category is empty (no graph) but the 5th category legend still shows. Whereas if the selected category has more series then the original, the chart displays correctly the additional categories but the the category legend is blank. Somehow the category legend does not change.

Using kendo version 2013.1.514.

Manufacturers @(Html.Kendo().DropDownListFor(m => m.MfgList)

.Name("mfgList")

.DataTextField("Text")

.DataValueField("Value")

.BindTo(Model.MfgList)

.HtmlAttributes(new { style = "width:200px;margin-right:10px;" })

.Value(Model.selectedMfgId)

.Enable(true)

.Events(e => e.Change("ReloadGraph"))

)

<div class="chart-wrapper">

@(Html.Kendo().Chart(Model.graphData)

.Name("chart")

.Title(Model.Title)

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Column().Stack(true)

)

.Series(series =>

{

series.Column(m => m.Series1).Name(Model.Series1Label).Color("#f3ac32");

series.Column(m => m.Series2).Name(Model.Series2Label).Color("#eda6a6");

}

)

.CategoryAxis(axis => axis

.Visible(true)

.Categories(m => m.Categories)

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

.Labels(labels=>labels.Rotation(-90))

)

.ValueAxis(axis => axis

.Numeric()

.Labels(labels => labels.Format("{0}%"))

.Max(100)

.Line(line => line.Visible(false))

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

)

.Tooltip(tooltip => tooltip

.Visible(true)

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

)

.HtmlAttributes(new { @style = "Width:400px%;" })

)

</div>

<script type="text/javascript">

function ReloadGraph() {

var mfgId = $('#mfgList').val();

var schoolYear = $('#schoolYearList').val();

$.ajax({

type: "POST",

async: true,

data: "{'mfgId':'" + mfgId + "','schoolYear':'" + schoolYear + "'}",

url: '@Url.Action("LoadGraphData", "Commodity")',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: ReloadGraph_ajaxCallSucceed,

failure: ajaxCallFailed

});

}

function ReloadGraph_ajaxCallSucceed(response) {

$('#chart').data("kendoChart").dataSource.data(response.graphData);

}

function ajaxCallFailed(response) {

alert("Ajax call Failed ");

}

</script>

Thanks,

Chart

answered on 03 Jul 2013

1 answer

635 views

Error! The requested URL returned 500 - Internal Server Error

Hi all

When I load the page with the following grid, the browser show me this message "Error! The requested URL returned 500 - Internal Server Error"
Could anybody help me please?

That's my code:

(IndexRechte.cshtml)

@(Html.Telerik().Grid<GruppeFunktion>()

.Name("Grid")

.DataKeys(keys =>

{

keys.Add(o => o.GruppeFunktionID);

})

.ToolBar(commands => { commands.SubmitChanges(); })

.DataBinding(dataBinding =>

dataBinding.Ajax()

.Select("_IndexRechte", "Rechte")

.Update("_SaveBatchEditing", "Rechte")

)

.Columns(columns =>

{

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

columns.Bound(o => o.visible)

.ClientTemplate("<#=visible? 'ja' : 'nein' #>")

.Title("K")

.Width(12);

})

.ClientEvents(events => events

.OnDataBinding("Grid_onDataBinding")

.OnError("Grid_onError"))

.Editable(editing => editing.Mode(GridEditMode.InCell))

.Scrollable(scrolling => scrolling.Enabled(false).Height("auto")) // ohne Scrolling zerfällt die Tabelle, wenn sie zu breit ist

.TableHtmlAttributes(new { style = "table-layout = fixed" })

.Resizable(resizing => resizing.Columns(true))

.Sortable()

.Filterable()

.Groupable()

.Pageable(paging =>

paging

.PageSize(ViewBag.PageSize)

.Style(ViewBag.PageStyle)

.Position(GridPagerPosition.Bottom)

)

And that's the Controller:

[GridAction]

public ActionResult _IndexRechte()

{

List<GruppeFunktion> gruppeFunktion;

gruppeFunktion = (List<GruppeFunktion>)Session["gruppeFunktion"];

// vorbereitete Geschäftsliste anzeigen

return View(new GridModel<GruppeFunktion> { Data = gruppeFunktion });

}

public ViewResult IndexRechte(Guid gruppeID)

{

// PageSize

ViewBag.PageSize = PageSizeFunktionliste;

List<GruppeFunktion> gruppeFunktion = (from ObjGF in this.db.GruppeFunktion

where ObjGF.GruppeID == gruppeID

select ObjGF).ToList();

Session["gruppeFunktion"] = gruppeFunktion;

if (gruppeFunktion.ToList().Count > PageSizeFunktionliste)

{

ViewBag.PageStyle = GridPagerStyles.NextPreviousAndNumeric;

}

else

{

ViewBag.PageStyle = GridPagerStyles.Status;

}

return View();

}

Thank's a lot!

Marco

Grid

answered on 02 Jul 2013

2 answers

212 views

Custom Popup Editor Showing WYSIWYG editor for simple string field

I created a custom popup editor for my grid. I have two string fields, both defined with [StringLength(20)] in the model. In the custom popup editor template I use EditorFor to display an editor for both fields. One gets a standard text input as expected. One gets the WYSIWYG editor. (Screenshot attached) Color me confused. Any ideas?

The two fields I'm referring to in the template below are PowerNumber and CaseNumber.

The model definitions are:
[Required]
        [StringLength(20)]
        [Display(Name="Power")]
public string PowerNumber { get; set; }

[StringLength(20)]
        [Display(Name="Case #")]
        public string CaseNumber {get; set;}

The editor template:

@model KendoMVC4.Models.Power
@Html.HiddenFor(model => model.ID)
<div class="editor-label">
    @Html.LabelFor(model => model.PowerNumber)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.PowerNumber)
    @Html.ValidationMessageFor(model => model.PowerNumber)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(model => model.Posted)
</div>
<div class="editor-field">
    @Html.Kendo().DatePickerFor(model => model.Posted)
    @Html.ValidationMessageFor(model => model.Posted)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(model => model.Forfeited)
</div>
<div class="editor-field">
    @Html.Kendo().DatePickerFor(model => model.Forfeited)
    @Html.ValidationMessageFor(model => model.Forfeited)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(model => model.Discharged)
</div>
<div class="editor-field">
    @Html.Kendo().DatePickerFor(model => model.Discharged)
    @Html.ValidationMessageFor(model => model.Discharged)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(model => model.CaseNumber)
</div>
<div class="editor-field">
    @Html.Kendo().EditorFor(model => model.CaseNumber)
    @Html.ValidationMessageFor(model => model.CaseNumber)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(model => model.State)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.State)
            .Name("State")
            .OptionLabel("Select State")
            .DataTextField("Text")
            .DataValueField("Value")
            .Items(items =>
                {
                    items.Add().Text("Alaska").Value("AK");
                    items.Add().Text("Hawaii").Value("HI");
                    items.Add().Text("New York").Value("NY");
                    items.Add().Text("Texas").Value("TX");
                })
                )
</div>
<br />

Grid

answered on 02 Jul 2013

1 answer

150 views

Custom command with data save

I followed the instructions here and successfully created a custom command column which displays some text in a popup window. The next step in what I'd like to do is to have the user able to edit something on the window shown by that custom command and update the datasource. How can this be accomplished?

In other words, how can I add, for example, a DatePickerFor a particular field in the model and have a button click send that data back for update? The model being used is a list of items so it would have to be a DatePicker for the current item in the list.

Grid

answered on 02 Jul 2013

1 answer

352 views

Legend does not display for Column chart

Hi,

I have a column chart which does not show the legend even though I have set legend.Visible to true. If I uncomment the .Group line commented in the code below, then the legend starts showing, but unfortunately it displays the default colors rather than those I have customised with m => m.UiColor

                        

@(Html.Kendo().Chart<WorkItemStatusSummary>()
                      .Name("Chart")
                      .Legend(legend => legend
                          .Visible(true)
                          .Position(ChartLegendPosition.Bottom))
                      .DataSource(ds => ds
                        .Read(read => read
                            .Action("DummyAction", "DummyController")
                            .Data("ChartAdditionalFilterData"))
                        //.Group(g => g.Add(m => m.Status))
                      )
                      .Series(series => series.Column(m => m.Count, m => m.UiColor).Name(""))
                      .CategoryAxis(axis => axis
                                                .Categories(m => m.Status)
                      )
   )

Chart

answered on 02 Jul 2013

0 answers

185 views

Kendo bundling broken by new System.Web.Optimization 1.1.0

I recently updated several nuget packages in my MVC4 solution. After the update none of the kendo styles or js files were being found. I narrowed it down to the bundling, and identified it was an update to "Microsoft ASP.NET Web Optimization Framework" 1.1.0

The release notes (http://aspnetoptimization.codeplex.com/releases/view/101096) has a section at the bottom that explains why.

I thought of 3 potential solutions:

Change the IgnoreList to be applied to the new directory filters instead (I didn't try this one)
Include the kendo css and js files without using wildcards (tried this one and it works)
Include the non-minified versions of the files, taken from the 'src' folder, in my solution (tried this one and it works)

I've ended up using option 3 as it seems to work best with the intention of how the MV4C bundling should work (non-minified used in debug so can debug into kendo code, and then minified version used in release).

I'm mainly posting to help anyone else who hits this problem, but if anyone has any suggestion why option 3 is not a good option I'd like to hear.

Also Kendo should probably update the documentation as the current IgnoreList approach no longer works.

Installer and VS Extensions

asked on 02 Jul 2013

5 answers

685 views

[Solved] Cascading DropDownList WITHOUT ServerFiltering

I have a DropDownList that, depending on another value, has anywhere from 5 to 15 values in it and there are about 20-25 total possible values.
It seems a bit ridiculous to go back to the server to get the proper data.
What I would like to do is render ALL of the items to the browser (as an array or something?) and do the filtering on the browser in javascript.
Has anyone done anything like this? I can't find any examples of cascading DropDownLists that don't have ServerFiltering turned on.

DropDownList

answered on 01 Jul 2013

1 answer

128 views

[Solved] Kendo Menu wierdness

Hi,

I'm trying to create a menu in my MVC 4 _Layout.cshtml file.

I started from the example and I hacked it up to show the structure I want. The problem is that when I use the syntax:
children.Add().Text("Application Home").Action("Index", "Home");

Sometimes the menu item is placed correctly with the action wired up. Other times the action appears to be causing some kind of error, (page compiles fine), but the item is not shown. If I remove the Action method, the
item shows up where it's supposed to.

I've attached the entire menu code. Can someone please help?

001.@(Html.Kendo().Menu()

002. .HighlightPath(true)

003. .Name("Menu")

004. .Items(items =>

005. {

006. items.Add()

007. .Text("Home")

008. .Items(children =>

009. {

010. children.Add().Text("Website Home");

011. children.Add().Text("Application Home").Action("Index", "Home");

012. });

013.

014. items.Add()

015. .Text("Company")

016. .Items(children =>

017. {

018. children.Add().Text("Events")

019. .Items(innerChildren =>

020. {

021. innerChildren.Add().Text("List");

022. //.Action("Index", "CompanyEvents");

023. innerChildren.Add().Text("Calendar View");

024. //.Action("Calendar", "CompanyEvents");

025. });

026.

027. children.Add().Text("Departments");

028. //.Action("Index", "Department");

029.

030.

031. children.Add().Text("Configure")

032. .Items(innerChildren =>

033. {

034. innerChildren.Add().Text("Benefit Year");

035. //.Action("Index", "BenefitYear");

036. innerChildren.Add().Text("Employee Types").Action("Index", "EmployeeType");

037. innerChildren.Add().Text("Holidays").Action("Index", "Holiday");

038. innerChildren.Add().Text("Job Codes").Action("Index", "JobCode");

039. innerChildren.Add().Text("PTO Request Status Codes").Action("Index", "RequestStatusCode");

040. innerChildren.Add().Text("PTO Acrual").Action("Index", "PTOAcrual");

041. });

042.

043. });

044.

045. items.Add()

046. .Text("Employee")

047. .Items(children =>

048. {

049. children.Add().Text("Employee Search");

050. //.Action("Index", "Employee");

051. children.Add().Text("Employee Grid");

052. //.Action("IndexGrid", "Employee");

053.

054. children.Add().Text("PTO Request")

055. .Items(innerChildren =>

056. {

057. innerChildren.Add().Text("List").Action("Index", "PTORequest");

058. innerChildren.Add().Text("New PTO Request").Action("Create", "PTORequest");

059. });

060.

061. children.Add().Text("Edit Personal Data").Action("Edit", "Employee", new { id = EmpId });

062. children.Add().Text("Employee Profile")

063. .Items(innerChildren =>

064. {

065. innerChildren.Add().Text("List").Action("Index", "EmployeeProfile");

066. //innerChildren.Add().Text("Edit my Profile").Action("Edit", "EmployeeProfile", new { id = EmpProfileId });

067. innerChildren.Add().Text("Edit my Profile").Action("Edit", "EmployeeProfile");

068. });

069.

070. children.Add().Text("Sanction")

071. .Items(innerChildren =>

072. {

073. innerChildren.Add().Text("List").Action("Index", "Sanction");

074. innerChildren.Add().Text("New Sanction").Action("Create", "Sanction");

075. });

076.

077. children.Add().Text("Attendance Log")

078. .Items(innerChildren =>

079. {

080. innerChildren.Add().Text("List").Action("Index", "AttendanceLog");

081. innerChildren.Add().Text("New Attendance Log").Action("Create", "AttendanceLog");

082. });

083.

084. children.Add().Text("Timesheet")

085. .Items(innerChildren =>

086. {

087. innerChildren.Add().Text("List").Action("Index", "TimeSheet");

088. innerChildren.Add().Text("List (Grid)").Action("IndexGrid", "TimeSheet");

089. innerChildren.Add().Text("New Timesheet").Action("Create", "Timesheet");

090. });

091.

092. });

093.

094.

095. items.Add()

096. .Text("Admin").HtmlAttributes(new { id="admin"})

097. .Items(children =>

098. {

099. children.Add().Text("Company").Action("Index", "Company");

100. children.Add().Text("Subscription Level").Action("Index", "SubscriptionLevel");

101. children.Add().Text("Subscription Limits").Action("Index", "SubscriptionLimit");

102. children.Add().Text("PTO Pool Type").Action("Index", "PTOPoolType");

103. children.Add().Text("Absence Code").Action("Index", "AbscenceCode");

104. children.Add().Text("Timesheet Status Codes").Action("Index", "TimesheetStatusCode");

105. children.Add().Text("Activity Log").Action("Index", "ActivityLog");

106. children.Add().Text("Release History").Action("Index", "ReleaseHistory");

107. children.Add().Text("Report List").Action("Index", "Report");

108. children.Add().Text("Suggestion List").Action("Index", "UserSuggestion");

109. children.Add().Text("Create Employee w/o User").Action("Create", "Employee");

110. }).Enabled(false);

111.

112. //items.Add().Text("About");

113. //items.Add().Text("Contact");

114. })

115. )

Menu

answered on 01 Jul 2013