Questions on UI for ASP.NET MVC Forum

1 answer

1.3K+ views

Hi, I have a strange issue where the DatePicker in my MVC grid is posting a null value to the controller on Save of an Edit only.

When creating a new record, I set the date in the picker and it comes through just fine.

When editing an existing record, if I change other Columns and save, the date from the DatePicker is null. All other columns are not null and come through just fine. Also when editing, the datepicker shows the correct date

When editing an existing record, if I change the date in the DatePicker, the date comes through just fine.

@(Html.Kendo().Grid<PDFBinderWebApp.Models.IndexPageViewModel>()

.Name("grid")

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

.Columns(columns =>

{

columns.Bound(c => c.vPdfContent.PdfName).Title("<div align=center>Name</div>").HtmlAttributes(new { style = "text-align: center;" }).Width(200);

columns.Bound(c => c.PdfFileUrl).EditorTemplateName("PdfFileUrl").Title("<div align=center>Document</div>").ClientTemplate("#: Filename #").Width(200);

columns.Bound(c => c.DocumentTypeName).EditorTemplateName("DocumentTypeList").Title("<div align=center>Document Type</div>").ClientTemplate("#:DocumentTypeName#").HtmlAttributes(new { style = "text-align: center;" }).Width(200);

columns.Bound(c => c.DocumentArchiveName).EditorTemplateName("ArchiveRuleList").Title("<div align=center>Document Rule</div>").ClientTemplate("#:DocumentArchiveName#").HtmlAttributes(new { style = "text-align: center;" }).Width(200);

columns.Bound(c => c.vPdfContent.ExpirationDate).EditorTemplateName("DatePickerTemplate").ClientTemplate("#= formatExpiration(vPdfContent.ExpirationDate ? kendo.toString(kendo.parseDate(vPdfContent.ExpirationDate), 'MM/dd/yyyy') : 'n/a') #").Title("<

div align=center>Expiration</div>").HtmlAttributes(new { style = "text-align: center;" }).Width(140);

columns.Bound(c => c.ADGroupsList).EditorTemplateName("ADGroupMultiSelectList").ClientTemplate("#= adGroupsTemplate(ADGroupsList) #").Title("<

div align=center>AD Groups</div>").Width(200);

columns.Bound(c => c.MeetingYear).EditorTemplateName("MeetingYearList").Title("<div align=center>Meeting Year</div>").ClientTemplate("#:MeetingYear#").HtmlAttributes(new { style = "text-align: center;" }).Width(100);

columns.Bound(c => c.ChainOfCustody).ClientTemplate("#= replaceString(ChainOfCustody) #").HtmlAttributes(new { style = "font-size:10pt;" }).Title("<

div align=center>Chain Of Custody</div>").Width(250);

columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy(); }).Title("<div align=center>Action</div>").HtmlAttributes(new { style = "text-align: center;" });

})

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

.ToolBar(toolbar => { toolbar.Create().Text("Add Document"); })

.Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("PdfEditor"))

//.Scrollable()

.Sortable(sortable => sortable.AllowUnsort(false))

.Events(e=>e.Edit("onEdit").Cancel("onCancel").Save("onSaved"))

//.Selectable()

.Pageable()

.DataSource(d => d

.Ajax()

.PageSize(20)

.Batch(false)

.AutoSync(false)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

model.Id(p => p.vPdfContent.PdfId);

model.Field(p => p.vPdfContent).DefaultValue(new PDFBinderWebApp.Models.v_PdfContent());

model.Field(p => p.vPdfContent.PdfId).Editable(false);

model.Field(p => p.vPdfContent.CreatedBy).Editable(false);

model.Field(p => p.vPdfContent.ExpirationDate).Editable(true);

model.Field(p => p.ADGroupsList).DefaultValue(new List<SelectListItem>());

})

.Read(read => read.Action("EditingInline_Read", "PdfContents"))

.Create(update => update.Action("EditingInline_Create", "PdfContents"))

.Update(update => update.Action("EditingInline_Update", "PdfContents"))

.Destroy(update => update.Action("EditingInline_Destroy", "PdfContents"))

)

DatePickerTemplate is as follows:

@model DateTime?

@(Html.Kendo().DatePickerFor(m=>m)

.Name("vPdfContent.ExpirationDate")

.Format("yyyy-MM-dd")

)

Again, the DatePicker is working for all scenarios, Create and Edit (when actually selecting a date) and displaying the date.

The problem is when editing, the datepicker displays the proper date, but when you click Save, vPdfContent.ExpirationDate is null and validation fails Stating:

"The value /'Date(1504152000000)' is not valid for ExpirationDate" (See attached screen shot).

Also when I use the Chrome developer tools and debug through the onSave javascript, when I inspect the model in e, it always shows a date, which is weird because when it hits the controller the date is null.

Grid

answered on 05 Jul 2017

2 answers

1.2K+ views

Kendo Grid MVC Column Filter DateTimePicker not working

Hello

I am using the kendo grid control and I'm not able to get a DateTime Picker to appear on the filter for the column that contain DateTime values. The grid filter with datetimepicker demos that I have come across have only been implemented with javascript examples. I am assuming some javascript may be requiried. What I was hoping was, help with the grid filter datetimepicker demo/example via ASP.Net MVC implementation. Below is my unsuccessful implementation. Hope I am clear with my desires and thanks in advance for any assistance.

@(Html.Kendo().Grid<ATSAnnouncementViewModel>()
                              .Name("AnnouncementGrid")
                              .Columns(columns =>
                              {
                                  columns.Bound(c => c.ATSAnnouncementID).Title("Announcement ID").Hidden(true);
                                  columns.Bound(c => c.TargetDepartment).Title("Target").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                                 columns.Bound(c => c.StartDateTime).Format("{0:MM/dd/yyyy HH:mm tt}").Title("Start Date Time").Filterable(ftb => ftb.UI("DateTimeFilter"));

columns.Bound(c => c.Message).Title("Description").Filterable(false).Sortable(false).ClientTemplate(@Html.ActionLink("#=Message#", "Edit", "Announcement",                               })
                              .Sortable()
                              .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                              .Pageable(pageable => pageable
                                  .Refresh(true)
                                  .PageSizes(true)
                                  .ButtonCount(5))
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .PageSize(20)
                                  .Model(model => model.Id(x => x.ATSAnnouncementID))
                                  .Read(read => read.Action("GetActiveATSAnnouncements", "DataSource"))
                              ).Events(e => e.DataBound("onAnnouncementDataBound")))

function DateTimeFilter(e) {
            //$(control).kendoDateTimePicker();
            $("#datetimepicker").kendoDateTimePicker({
                value: new Date(),
                dateInput: true
            });

        }
    </script>

kw

Grid

answered on 05 Jul 2017

3 answers

2.2K+ views

Grid DataSource - 500 Error

Hi, I had my grid working great with a version of Kendo maybe 2 months old as of today. I just updated the Telerik/Kendo control to the 2017.2.621 build and now when I try to do any of the CRUD operations in the grid, including reading data:

.Read(read => read.Action("EditingInline_Read", "PdfContents"))

I get a 500 error when viewing the developers tools in Chrome:

POST http://localhost:63508/PdfContents/EditingInline_Read 500 (Internal Server Error).

The grid handles this silently (gracefully) but nothing happens. If I didnt look in the developer tools in Chrome, I wouldn't know what is happening.

I can't seem to figure out what the issue is. I did not change any code whatsoever. I just updated Kendo UI for ASP.NET MVC

Grid

answered on 05 Jul 2017

17 answers

1.8K+ views

Persist State - Kendo Grid

Hi,

I have a kendo grid that can be sorted, filtered, grouped, etc. via bound columns. I have action links in each row. If the user wants to filter the grid (sort, group, etc), then perform an edit action (navigates to another view), and then return back to the index page, the filtered records need to be preserved. I have tried the coding that is presented in the demo, but those are for situations within the index page (Save & Load buttons). I want to navigate from the index page and return back and keep the grid state preserved.

Thanks,
Suresh

Grid

answered on 05 Jul 2017

3 answers

446 views

Moving Labels For Category Axis To Left Align On Positive/Negative Bar Charts

Hi,

I am looking to use a bar chart with both positive and negative values.

This seems to work however the Labels for the Category Axis is obscured by the bars (see image "chart-wrong").

I have found a workaround to the issue by adding a Right Margin to the Labels (see image "chart-correct").

However this is not a solution. When the data set changes (which will be on a regular bases) the Labels go back to not being left aligned.

Is there a permanent solution to this issue?

Chart

answered on 05 Jul 2017

1 answer

565 views

[Solved] ForeignKey dropdown column in PopUp editor

I've set up a ForeignKey column with dropdown editor that works fine in GridEditMode.InLine but does not work at all in GridEditMode.PopUp

<div>

Season ID

</div>

<div>

@(Html.Kendo().DropDownListFor(model => model.Season)

.Name("SeasonId_#=Season_ID#")

.DataValueField("SId")

.DataTextField("Name")

.Value("#=SId#")

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

.BindTo((System.Collections.IEnumerable) ViewData["seasons"])

.ToClientTemplate().ToHtmlString()

)

@Html.ValidationMessageFor(model => model.Season_ID)

</div>

It creates a functioning dropdown Inline, but in PopUp the input field does not render, but rather shows the HTML:

Season ID

<input id="SeasonId_#=Season_ID#" name="SeasonId_#=Season_ID#" type="text" value="#=SId#" /><script

>    kendo.syncReady(function(){jQuery("#SeasonId_#=Season_ID#").kendoDropDownList({"change":onChange,"dataSource":[{"SId":5,"Name":"1971-1972"},{"SId":6,"Name":"1972-1973"},{"SId":7,"Name":"1973-1974"},{"SId":8,"Name":"1974-1975"},{"SId":9,"Name":"1975-1976"},{"SId":10,"Name":"1976-1977"},{"SId":11,"Name":"1977-1978"},{"SId":12,"Name":"1978-1979"},{"SId":13,"Name":"1979-1980"},{"SId":14,"Name":"1980-1981"}......

Thanks.

Grid

answered on 04 Jul 2017

2 answers

1.7K+ views

[Solved] Grid: Uncaught Error: Invalid template

Hi,
I'm really starting to doubt my coding skills but I am also starting to doubt if it was a good decision to buy Kendo UI, because until now I could not come up with something that worked from beginning.

I'm having this sample Model structure:
Persons -> have Orders -> have Products

The Orders model has a VAT Property. value of this property can be "Intra" or "Extra". On my Order Editor Template, I added a DropDownList to select the corresponding value:

01.@(Html.Kendo().DropDownList()

02. .Name("VAT")

03. .DataTextField("Text")

04. .DataValueField("Value")

05. .Events(e => e.Change("changeType"))

06. .BindTo(new List<SelectListItem>() {

07. new SelectListItem() {

08. Text = "Intra EU",

09. Value = "Intra"

10. },

11. new SelectListItem() {

12. Text = "Extra EU",

13. Value = "Extra"

14. }

15. })

16. .Value(Model.VAT)

17. .HtmlAttributes(new { style = "width: 100%", @class = "k-input" })

18.)

When I delete the the following line from the code, it works without problem.

1..Events(e => e.Change("changeType"))

As soon as I add the line and the following corresponding JavaScript, the Editor window does not show up anymore and the error below is thrown:
Javascript:

1.<script>

2. function changeType() {

3. var selectedType = $("#VAT").val();

4. };

5.</script>

1.Uncaught Error: Invalid template:

'<div class="k-edit-label">    <label for="Id">Id</label></div><div class="k-edit-field">    <input class="k-textbox k-input" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" value="0" /></div><input class="k-input" id="VAT" name="VAT" style="width: 100%" type="text" /><script> kendo.syncReady(function(){jQuery("\#VAT").kendoDropDownList({"change":changeType,"dataSource":[{"Text":"Intra EU","Value":"Intra"},{"Text":"Extra EU","Value":"Extra"}],"dataTextField":"Text","dataValueField":"Value"});});</script><script>    function changeType() {        var selectedType = $("#VAT").val();    };</script>'

Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<div class="k-edit-label"> <label for="Id">Id</label></div><div class="k-edit-field"> <input class="k-textbox k-input" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" value="0" /></div><input class="k-input" id="VAT" name="VAT" style="width: 100%" type="text" /><script>\tkendo.syncReady(function(){jQuery("#VAT").kendoDropDownList({"change":changeType,"dataSource":[{"Text":"Intra EU","Value":"Intra"},{"Text":"Extra EU","Value":"Extra"}],"dataTextField":"Text","dataValueField":"Value"});});</script><script> function changeType() { var selectedType = $("';VAT").val(); };</script>;$kendoOutput+=;}return $kendoOutput;'

2. at Object.compile (kendo.all.js:198)

3. at Object.d [as template] (jquery.min.js:2)

4. at init._createPopupEditor (kendo.all.js:49618)

5. at init.editRow (kendo.all.js:49540)

6. at HTMLAnchorElement.<anonymous> (kendo.all.js:49297)

7. at HTMLDivElement.dispatch (jquery.min.js:3)

8. at HTMLDivElement.r.handle (jquery.min.js:3)

I really do not have any idea why I'm having so many problems implementing the grids and editor templates. Could you please help me or point me in the right direction? Unfortunately, the project zip file is too large to upload here in the forum.

Thank you,
Sascha

Grid

answered on 04 Jul 2017

1 answer

239 views

How can I hide the full screen button?

I want to hide the full screen button on the media player. Can you please tell me how to do that?

Thanks,

Mark

MediaPlayer

answered on 04 Jul 2017

5 answers

430 views

[Solved] Custom editor template window not opening

Hi all,

I've got a new Grid question for you guys. I'm using a grid with Ajax Binding. For editing, I want to use a custom editor template. The problem is that the editor window is not opening when clicking on edit in the grid. Here is the code of my grid:

01.@(Html.Kendo().Grid<ServiorInventaire.Shared.Models.Dynamic.ColumnDescription>()

02. .Name("Columns")

03. .NoRecords(Language.NoRecords)

04. .Columns(columns =>

05. {

06. columns.Bound(p => p.ColumnName).Title(Language.ColumnsColumnName).Width(250);

07. columns.Bound(p => p.Type).Title(Language.ColumnsType).Width(250);

08. columns.Command(command => { command.Edit(); }).Width(250);

09. })

10. .ToolBar(toolbar =>

11. {

12. toolbar.Create().Text(Language.Create);

13. })

14.

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ColumnDescription").Window(w => w.Title(Language.ItemsPageTitle)))

15. .DataSource(dataSource => dataSource

16. .Ajax()

17. .Model(m =>

18. {

19. m.Id(p => p.ColumnName);

20. })

21. .PageSize(20)

22. .Read(read => read.Action("ReadColumnDescriptions", "Item").Data("getTableName"))

23. .Create(create => create.Action("EditingPopup_Create", "Grid"))

24. .Update(update => update.Action("EditingPopup_Update", "Grid"))

25. )

26.)

Here is my custom template:

01.@using Kendo.Mvc.UI;

02.

03.@model ServiorInventaire.Shared.Models.Dynamic.ColumnDescription

04.

05.<div class="k-edit-label">

06. @Html.LabelFor(model => model.ColumnName)

07.</div>

08.<div class="k-edit-field">

09. @Html.Kendo().TextBoxFor(model => model.ColumnName).HtmlAttributes(new { @class = "k-input" })

10.</div>

11.

12.<div class="k-edit-label">

13. @Html.LabelFor(model => model.Type)

14.</div>

15.<div class="k-edit-field">

16. @Html.Kendo().TextBoxFor(model => model.Type).HtmlAttributes(new { @class = "k-input" })

17.</div>

So you see, there is nothing special in my template and in my grid. Still the window is not opening. If I remove ".TemplateName("ColumnDescription")" to specify a custom template, the default editor template opens without problem. Could anybody help me with this?

Thank you very much,

Sascha

Grid