Wrong date format in Kendo Grid - kendo-ui

I have a kendo grid,
#(Html.Kendo().Grid<TaskViewModel>()
.Name("grid")
.Deferred()
.ClientRowTemplate(Html.Partial("Partials/TaskGridRowTemplate").ToHtmlString())
.TableHtmlAttributes(new { #class = "table table-stripped" })
.Events(e => e.DataBound("setCdsPriority"))
.Columns(columns =>
{
columns.Bound(e => e.IsSelected)
.Sortable(true)
.Filterable(false)
.Title(string.Empty);
columns.Bound(e => e.ScanDate).Title("Scanning Date");
...
})
.Filterable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Sortable()
.Pageable(x =>
{
x.ButtonCount(3);
x.Enabled(true);
x.PageSizes(new[] { "5", "10", "20" });
x.Refresh(true);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("AllTasks", "Cockpit"))
.ServerOperation(true)
))
And I have to filter it as you can see in the image
This is the method that does the filter
public List<TaskViewModel> GetTasksFiltered(TaskFilterModel filters)
{
List<Task> tasks = service.GetTasksFiltered(MapperExtension.CreateMapper<TaskFilterModel, TaskFilter>(filters));
return tasks.Select(Convert).ToList();
}
This is the method that returns the results to the view
public JsonResult AllTasksFiltered(TaskFilterModel filters)
{
return Json(taskModelFactory.GetTasksFiltered(filters), JsonRequestBehavior.AllowGet);
}
And this is my ajax
function onClickSearch() {
var filtersObject =
{
CurrentWorkflowStepId: $("#taskStatus").data("kendoDropDownList").value(),
ScanFromDate: $("#scanFromDate").data("kendoDatePicker").value(),
ScanToDate: $("#scanToDate").data("kendoDatePicker").value(),
BusinessCase: $("#businessCase").data("kendoDropDownList").value(),
Region: $("#region").data("kendoDropDownList").value(),
ZR: $("#zr").val()
}
$.ajax({
type: "PUT",
url: "/Cockpit/AllTasksFiltered",
dataType: "json",
traditional: true,
data: JSON.stringify(filtersObject),
contentType: 'application/json; charset=utf-8',
success: function (data) {
$("#grid").data("kendoGrid").setDataSource(new kendo.data.DataSource({
data: data
}));
}
});
}
When the grid is first loaded, the Scanning Date column is ok.
This is the row template bit for the scanning date
<td>
#: kendo.toString(ScanDate, 'dd.MM.yyyy HH:mm')#
</td>
When I do a search, the date that is displayed is
/Date(1498558275437)/
The date has the right format before being displayed, but I get this strange format on screen.
Any ideas?
Tks in advance.

Related

select2 js empty value on load in select option

I have implemented select2js in my project, In few cases when i load my page, an empty value is appending to my select input box. Can anyone help me out, what is the issue,
I have added a image of it and My code is
{!! Form::select('searchSkillTools[]',[],(isset($skillToolXref) && $skillToolXref!='')?$skillToolXref:'', array('autocomplete' => 'off', 'class' => 'chosen-select','multiple'=>'multiple', 'id' => 'searchSkillTools-'.$randomId, 'placeholder' => '' ,'style' => 'height: auto !important')) !!}
$('#searchSkillTools-{{$randomId}}').select2({
ajax: {
url: skillToolUrl,
dataType: 'json',
method:'get',
delay: 250,//delay in response
data: function (data) {
return {
search: data.term //search term
};
},
/*option to transform the data returned by response into the format expected by Select2*/
processResults: function (response) {
return {
results:response
};
},
cache: true
}
});
This way will fix the bug:
(isset($skillToolXref) && $skillToolXref!='')?$skillToolXref:null

Load data to Form:select in Laravel using Ajax

So I have this Form in Blade
{!! Form::select('jobslist[]', $jobs, null, ['id' => 'jobs', 'class' => 'form-control jobs mav-select', 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!`}
I am trying to load $jobs data using Ajax, so I rewrote the form as
{!! Form::select('jobslist[]', [], null, ['id' => 'jobs', 'class' => 'form-control jobs mav-select', 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
And added onload script underneath
function loadData(card){
$.ajax({
type: 'POST',
url: '/loadJobs/',
data: {name: card, element: '{{$posting->id}}'},
dataType: 'json',
success: function (response) {
console.log(response);
$("#jobs").html('');
$("#jobs").html(response.options);
})
},
error: function(response){
console.log('Error: ', response["responseText"]);
}
});
}
Through console log I can verify that I am hitting the controller and obtaining data in the format
Object:
options:
27969: "2016-230 :: PL"
27974: "2016-231 :: ML"
27989: "2016-233 :: RF"
how should I pass it to the select box?
You can use append to add the items to select in the success function:
success: function(response){
...
$('#jobs').append('<option value='+response.id+'>' +response.name+ '</option>')
...
}
There you have it, just change 'id' and 'name' as necessary, I hope it helps.
//...
success:function(response){
var len = response.length;
$("#jobs").empty();
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
$("#jobs").append("<option value='"+id+"'>"+name+"</option>");
}
}
//...
success: function(data){
console.log('success');
console.log(data);
jobs = data;
$.each(data, function(key, target){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(target.name, target.id);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(target.name);
//Append the option to our Select element.
$("#jobs").append(option);
//$("#jobs").append("<option> An Option </option>");
});
/
},

binding a collection/list to a kendo mvc grid column

I am trying to bind a list of comments to a column, but it doesn't display anything. I am using an inline Client Template to quickly test it, but no luck. I know for sure there are Comments in the model, but it seems to think that the Comments is undefined or null. Below is my code:
#{
var grid = Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(l => l.Name);
columns.Bound(l => l.Description);
columns.Bound(l => l.Comments).ClientTemplate("# if(Comments) { for(var i=0; i<Comments.length; i++) {# #=Comments[i].Comment# #}}# ").Title("Comments");
})
.HtmlAttributes(new { style = "height: 850px;" })
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
);
grid.Render();
}
I suggest creating a JavaScript function and calling it in your client template. Also, it will be easier to debug.
function displayComments(data) {
return $.map(data.Comments, function (e) { return e.Comment; }).join(", ");
}
In your Grid:
columns.Bound(l => l.Comments).ClientTemplate("#= displayComments(data) #").Title("Comments");

I understand how to use template with script but not with server controls

Now what I am trying to do is a hybrid or server controls and javascript. I think kendo server controls are elegant.
As you can see I am desparately trying to find how to access editable property in the grid but have no luck.I thought it would be
var grid = $("#Grid").data("kendoGrid");
grid.editable.template = function () { kendo.template($("#MyTemplate").html()) };
The idea is that when a user click on the edit button they get to see #MyTemplate instead of kendo default html version of it. Perhaps, I need to go in a different direction please guide me.
Here is my full code just for reference.
#model IEnumerable<Msh.Intranet.Models.ApiAdFileDisplayGridModel>
<script type="text/x-kendo-template" id="myTemplate">
<input data-bind="value: Id" name="Id"/>
</script>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Visible(false);
columns.Bound(p => p.FileName).Visible(false);
columns.Bound(p => p.FormNumber);
columns.Bound(p => p.FormTitle);
columns.Bound(p => p.Class);
columns.Bound(p => p.SecondaryCategory).Title("Category") ;
columns.Bound(p => p.RevisionDate).Format("{0:MM/dd/yyyy}");
columns.Command(c =>
{
c.Edit();
c.Destroy();
});
})
.Selectable()
.Groupable()
.Pageable()
.Filterable()
//.Sortable()
.ToolBar(tools =>
{
tools.Create();
})
.Editable(editor => editor.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
//this tells kendo I am the primary key
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.RevisionDate);
})
.Read(read => read.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Get))
.Create(create=>create.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Post))
.Update(update=>update.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Put))
.Destroy(destroy=>destroy.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Delete))
)
)
<script type="text/javascript">
$(function () {
var grid = $("#Grid").data("kendoGrid");
//grid.bind("change", function () {
// alert("Change ");
//});
grid.bind("dataBound", function (data) {
alert("dataBound");
});
grid.bind("edit", function (e) {
if (e.model.isNew()) {
//create
alert("new");
} else {
//edit
alert("edit");
}
})
// WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80
grid.dataSource.transport.options.update.url = function (data) {
var baseUrl = "#Url.Content("~/api/ApiAdFileDisplayGrid/")" +data.Id;
return baseUrl;
}
// WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80
grid.dataSource.transport.options.destroy.url = function(data) {
var baseUrl = "#Url.Content("~/api/ApiAdFileDisplayGrid/")" + data.Id;
return baseUrl;
}
grid.editable.template = function () { kendo.template($("#MyTemplate").html()) };
});
</script>
To customize the editor you should use the MVC Editor templates engine. Follow the approach in this code library.
I found this thread in kendo site which give me an alternative to my method of doing templates:
http://www.kendoui.com/forums/mvc/grid/new-client-details-template.aspx#2427170
However, it would be interesting to see how to interact with the javascript objects the kendo html helpers create.

Concatenate multiple fields to display in autocomplete using AJAX in cakephp

currently my autocomplete works in displaying the first name of the user, but I want to concatenate the first name, last name and etc. How do I achieve this in the following code?
<script type="text/javascript">
$(function() {
$(".suggest").autocomplete({
source: function( request, response ) {
$.ajax({
url: '<?php echo $this->Html->url(array('controller' => 'searches', 'action' => 'suggestUser')); ?>',
dataType: "json",
data: {
//request.term is the value of the current textbox.
term: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.User.firstName,
value: item.User.firstName
}
}));
}
});
},
minLength : 1
});
});
In my controller, the following codes below is my logic to search for that field.
function suggestUser() {
if (isset($_GET["term"])) {
$term = $_GET["term"];
$result = $this->User->find('all', array(
'conditions' => array(
'User.firstName LIKE' => $term . '%'
),
'fields' => array(
'firstName'
)
));
if ($term) {
$this->set('results', $result);
$this->view = 'Json';
$this->set('json', 'results');
}
}
}
http://book.cakephp.org/view/1588/virtualFields
It is really simple I realised. I managed to resolve it.
label: item.User.firstName + " " + item.User.lastName,
value: item.User.firstName + " " + item.User.lastName
You also need to append the lastName field in.
'fields' => array(
'firstName',
'lastName',
)

Resources