I'm using Kendo Grid with editpopup and I have a DateTime field in my Model.
If I set the Max property to my datepicker, last date in datepicker not shown in editpopup field at the time of edit.
If i use below 14 its works like charm.
Code:
#Html.Kendo().DatePickerFor(m => m.DateOfBirth).Max(DateTime.Today.AddYears(-18))).HtmlAttributes(new { placeholder = "dd/mm/yyy", type = "date", #class = "datePicker" })
But Kendo Grid shows properly.Insert Updated Working properly with last date too.
Note:
I'm using MVC with Razor syntax.
Thanks in advance!
I added culture to my code.it works like charm.
#Html.Kendo().DatePickerFor(m => m.DateOfBirth).Max(DateTime.Now.AddYears(-18)).HtmlAttributes(new { placeholder = "dd/mm/yyy", type = "date", #class = "datePicker" }).Culture("en-AU")
And added one more function to set the date at the time of edit.
Kendo Grid :
.Events(events => events.Edit("dateformat"))
Jquery Function
function dateformat(e) {
if(!e.model.isNew())
{
var data =e.model;
var dob=data.DateOfBirth;
if(dob!=null)
{
var parsedDate= kendo.parseDate(dob, "dd/MM/yyyy");
var finalDate = kendo.toString(parsedDate, "d");
var datepicker = $("#DateOfBirth").data("kendoDatePicker");
if(finalDate!=null)
{
datepicker.value(finalDate);
}
}
}
Related
I have the following time picker in a Kendo grid:
columns.Bound(s => s.StartTime).Title("Start Time").Width(76).ClientTemplate((
#Html.Kendo().TimePicker()
.Name("StartTimePicker" + "#=ID#")
.Format("HH:mm:ss")
.Interval(15)
.HtmlAttributes(new { data_bind = "value: StartTime" })
.ToClientTemplate()).ToHtmlString());
This works as intended. I also have the following button in the grid:
columns.Command(command => command.Custom("Save").Text("<span class=\"k-icon k-i-check\"></span>Save").Click("saveSchedule")).Width(80).HtmlAttributes(new { #class = "text-center" });
I want to access the value of the time picker in my saveSchedule function, which is:
function saveSchedule(e) {
e.preventDefault();
// etc
// need code to get time here
How do I get the time that was selected in the grid?
I added this to my saveSchedule function:
var timepicker = $(e.currentTarget).closest('tr').find('.k-input');
schedule.StartTime = timepicker[0].value;
Solved the issue.
I am trying to implement Kendo Grid "SelectAll" feature for our extended Kendo grid. When "SelectAll" Column included, UI is rendering properly But, the "Select All" header checkbox click is not working. Noticed that getKendoGrid method is not working with extended Kendo grid.
Kendo.web.js....
_headerCheckboxClick: function (e) {
var that = this,
checkBox = $(e.target),
checked = checkBox.prop('checked'),
**parentGrid = checkBox.closest('.k-grid.k-widget').getKendoGrid();**
if (that !== parentGrid) {
return;
}
if (checked) {
that.select(parentGrid.items());
} else {
that.clearSelection();
}
},
You can try to use checkBox.closest('.k-grid.k-widget').data("kendoGrid") instead of getKendo* method.
that function change is name to the parameter d
o = <your_kendo_plugin_name>
d = "kendo" + o
so you should use the function kendoGrid() instead of getKendoGrid(),
I have a Kendo UI Grid and added mouse events to the grid by jQuery (e.g. click). This is working without any problem. But by deleting a row in the grid, all events of the grid are also deleted. What am I doing wrong?
This is my code to delete a row:
var rowToDelete = $(this).closest("tr");
var grid = $("#gridId").data("kendoGrid");
grid.removeRow(rowToDelete);
I added a button to each row of the grid, added a click event to these buttons which deletes the corresponding row. After the row is deleted, the click events of all other buttons are removed. The same with the mouse-over events of a grid column.
Thanks for your help!
Please try with the below code snippet.
VIEW
<script>
function gridDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
grid.tbody.find(">tr").click(function () {
$("#divTest").html('Row Index Clicked :' + $(this).index());
});
}
function DeleteRow(obj) {
var rowToDelete = $(obj).parent().parent()
var grid = $("#Grid").data("kendoGrid");
grid.removeRow(rowToDelete);
}
</script>
#(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p => p.Name);
columns.Template(#<text></text>).ClientTemplate("<input type='button' class='k-button' value='Delete' onclick='DeleteRow(this);' />");
})
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Grid_Read", "Home"))
)
.Events(e => e.DataBound("gridDataBound"))
)
<div id="divTest"></div>
CONTROLLER
public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
{
List<TestModels> models = new List<TestModels>();
for (int i = 0; i < 5; i++)
{
TestModels t1 = new TestModels();
t1.ID = i;
t1.Name = "Name" + i;
models.Add(t1);
}
return Json(models.ToDataSourceResult(request));
}
MODEL
public class TestModels
{
[Display(Name = "ID")]
public int ID { get; set; }
[Display(Name = "Name")]
public string Name { get; set; }
}
Let me know if any concern.
You are not posting all the code so I have to guess...
What is happening is that you set an event handler associated to the elements just after the initialization and therefore for some particular HTML elements but there are circumstances under which Kendo UI grid gets regenerated (basically the system removes the table and generates a new one).
If you want to set an event handler not for the current table content but for any future one, you might use jQuery on event but using three arguments where the second is the selector (in previous version of jQuery this was achieved with live function but now is deprecated, so if your jQuery version supports it better use on).
What you have to do is:
$("#grid").on("click", ".my-selector", function(e) {
var rowToDelete = $(this).closest("tr");
var grid = $("#gridId").data("kendoGrid");
grid.removeRow(rowToDelete);
});
Where my-selector is a CSS class attribute that you probably already set for identifying the remove button.
I'm trying to populate a dropdownlist for use in my Kendo Grid using Editor Templates.
My StatesEditor.cshtml contains:
#(Html.Kendo().DropDownList()
.Name("State")
.DataValueField("StateID")
.DataTextField("ShortName")
.BindTo((System.Collections.IEnumerable)ViewData["states"]))
In my Controller I have:
public ActionResult Index()
{
var db = new ACoreEntities();
db.Configuration.ProxyCreationEnabled = false;
var states = db.StateLookups;
var stateList = states.Select(state => state.ShortName);
ViewData["states"] = stateList;
return View("~/Views/System/PMarkup/Index.cshtml");
}
In my actual grid, when I click the 'Edit' button for the row I get a dropdownlist that contains 51 'undefined' entries.
I ended up creating a State model then in my ActionResult I changed my code to:
ViewData["states"] = new ACoreEntities()
.StateLookups
.Select(s => new State
{
Id = s.StateID,
ShortName = s.ShortName
})
.OrderBy(s => s.ShortName);
I am using ember-data and there is an inbuilt date type object. I am hooking this up to the date picker(built on Twitter bootstrap components). The issue is that I created a date attribute in the input tag to store the date object. The date object is getting store as a long string. This has to somehow get parsed into a date object and then get stored into the App.store. Where do I do this conversion. This is what I have done so far.
App.DatePicker = Ember.View.extend({
classNames: ['ember-text-field','input-small'],
tagName: "input",
attributeBindings: ['data','value','format','readonly','type','size'],
size:"16",
type: "text",
format:'mm/dd/yyyy',
value:function(){
var date = this.get('data');
if(date)
return date.format(this.get('format'));
else
return "";
}.property('data'),
data:null,
didInsertElement:function(){
this.$().datepicker({
format:this.get(this.get('format'))
}).on('changeDate', function(ev){
console.log(ev.date);
console.log(ev.target);
ev.target.setAttribute('data',ev.date);
});
}
});
I am using it in the view template like this
{{view App.DatePicker dataBinding="staff.emp_edate" format="mm/dd/yyyy"}}
When the date attribute is set when the date is changed, the date attribute is getting changed which is binded to the staff.emp_edate. Unfortunately the staff.emp_edata is not getting changed.
Any pointers will be of great help.
Try the following:
Fiddle: http://jsfiddle.net/ppanagi/9rCBL/
App.DatePicker = Ember.View.extend({
// ... leave the rest as is
didInsertElement: function(){
var self = this;
var onChangeDate = function(ev) {
self.set('data', ev.date);
};
var format = this.get('format');
this.$().datepicker({ format: format })
.on('changeDate', onChangeDate);
}
});