how to display the month and year only calendar in kendo grid.

[Bajivali]

hi I have the following in my cshtml pages.

<div class="grid-scrollable">@(Html.Kendo().Grid<ViewModels.Admin.CDSUtilizationViewModel>() .Name("cdsgrid") .Columns(columns => { columns.Bound(c => c.Id).Width(150).Hidden(true); columns.Bound(c => c.Transaction_Id).Width(150).Hidden(true); columns.ForeignKey(p => p.Contract_Id, (System.Collections.IEnumerable)ViewData["ContractNumber"], "Id", "ContractNumber").Width(140); columns.ForeignKey(p => p.Contractor_Id, (System.Collections.IEnumerable)ViewData["ContractorName"], "Id", "ContractorName").Width(200); columns.ForeignKey(p => p.ServiceDetail_Id, (System.Collections.IEnumerable)ViewData["ServiceNameString"], "Id", "ServiceNameString").Width(300); columns.Bound(c => c.ServiceMonth).EditorTemplateName("Date").Format("{0:MMMM yyyy}").Width(120); columns.Bound(p => p.UnitsDelivered).EditorTemplateName("Integer").Width(80); columns.Command(command => { command.Edit().HtmlAttributes(new { @class = "btn-primary" }); command.Destroy().HtmlAttributes(new { @class = "btn-primary" }); }).Width(150); }) .ToolBar(tools => { tools.Create().Text("Add CDS Utilization Record").HtmlAttributes(new { @class = "btn-primary" }); tools.Excel().Text("Excel").HtmlAttributes(new { @class = "pull-right" }); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5)) .Selectable() .Filterable(f => f.Operators(o => o.ForString(s => s.Clear() .Contains("Contains") .DoesNotContain("Does not contain") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") .StartsWith("Starts with") .EndsWith("Ends with ")))) .Resizable(resize => resize.Columns(true)) .Events(e => e.Edit("oncdsutilizationGridEdit")) .Excel(excel => excel.FileName("CDSUtilization.xlsx").Filterable(true).AllPages(true)) .DataSource(dataSource => dataSource.Ajax().PageSize(10).Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); }) .Read(read => read.Action("CDSUtilizationRead", "CDSContractUtilization")) .Create(create => create.Action("CDSUtilizationCreate", "CDSContractUtilization")) .Update(update => update.Action("CDSUtilizationUpdate", "CDSContractUtilization")) .Destroy(destroy => destroy.Action("CDSUtilizationDestroy", "CDSContractUtilization")) .Events(events => events.Error("error"))) )</div>

 

[AcceptVerbs(HttpVerbs.Post)] public ActionResult CDSUtilizationCreate([DataSourceRequest]DataSourceRequest request, CDSUtilizationViewModel cdsutilization)

{

if (ModelState.IsValid) { cdsutilization.CreateDate = DateTime.Now; cdsutilization.Transaction_Id = Convert.ToInt32(cDSUtilizationService.GenerateMaxTrasactionIdCDSUtlization()); var cdsutilizationDataObj = cDSUtilizationService.AddAndSave(Mapper.Map<CDSUtilizationViewModel, CDSUtilization>(cdsutilization)); cdsutilization.Id = cdsutilizationDataObj.Id; }

return Json(new[] { cdsutilization }.ToDataSourceResult(request, ModelState));

}

 

and I want to display only Month and Year calendar

similar to this.

and up on my month selection I want to insert the first day of the selected month in to database.

can you please help.

 

 

[Danail Vasilev]

Hi Bajivali,

Thank you for contacting us.

You can use editor template to configure the date picker as a month picker. You may find useful the following resources on the matter:
    - http://demos.telerik.com/kendo-ui/datepicker/index
    - http://www.telerik.com/forums/grid-filtermode-row-with-a-monthpicker
    - https://onabai.wordpress.com/2012/10/01/kendoui-time-and-datetime-in-grid-yes-we-can/

Regards,
Danail Vasilev
Telerik

[Bajivali]

i tried using all above posts. 

my aim is to display a calendar with month and year , similar to this 

http://demos.telerik.com/kendo-ui/datepicker/index (add ADD TO ARCHIVE MAIL FROM)

and up on selection i should be able to save the first day of the selected month in the database.

columns.Bound(c => c.ServiceMonth).EditorTemplateName("Date").Format("{0:MMMM yyyy}").Width(120); 

 

 

[Danail Vasilev]

Hi,

You can use the approach from this forum post to edit the day of the selected month - http://www.telerik.com/forums/depth-year-last-day-of-month#Bq_rMLy2fEuMJanWiyfDVQ

I have also made such a modification to the custom-popup-editor demo:

Person.cshtml:

<div>
    @Html.Kendo().DatePickerFor(mode => Model.BirthDate).Depth(CalendarView.Year).Start(CalendarView.Year).Events(ev=>ev.Change("onChange"))
    @Html.ValidationMessageFor(model => model.BirthDate)
</div>

Index.cshtml:

<script>
    function onChange(e) {
        var date = this.value();
        date = new Date(date.getFullYear(), date.getMonth());
        this.value(date);  //or put this.set("bindname", date); if you use a data-bind.
    }
</script>

You can also find the modified files of this example attached to this post.

Regards,
Danail Vasilev
Telerik