Hello, in my grid I stored the DateTime as a short date string (Format: "month/day/year") and of course, it is sorting improperly. I looked up other solutions and they are for other platforms. From what I've seen you guys have a javascript library where it will properly sort the column. What is that javascript and how do I specify the correct column that needs to be sorted like a date? Do I also need to specify what format it is in? This is my code:
I want to sort c.ReceivedDate as a date.
@(Html.Kendo().Grid<ViewModels.RecentReceiptsViewModel>()
.Name(
"RecentReceiptsGrid"
)
.Columns(columns =>
{
columns.Bound(c => c.PoNumber).Title(
"Po#"
).Width(100);
columns.Bound(c => c.ReceivedDate).Title(
"Date"
).Width(100);
columns.Bound(c => c.ItemName).Title(
"Item"
).Width(100);
columns.Bound(c => c.Dimensions).Width(100);
columns.Bound(c => c.Cost).Width(100);
columns.Bound(c => c.Quantity).Width(100);
columns.Bound(c => c.Total).Width(100);
})
.Scrollable()
.Groupable()
.Sortable()
.DataSource(
dataSource => dataSource.Ajax()
.Read(read => read.Action(
"ReadRecentReceiptsReport"
,
"Reports"
)))
Hi there,
I have below code:
dropsGrid.table.kendoSortable({<br> filter:
">tbody >tr"
,<br> placeholder: $(
'<tr class="placeholder"><td colspan="11">Drop Here!</td></tr>'
),<br> hint:
function
(element) {<br>
var
width = $(
'#Drops'
).width();<br>
var
table = $(
'<table style="width: '
+ width +
'px;" class="k-grid k-widget"></table>'
),<br> hint;<br><br> table.append($(
'#Drops .k-state-selected'
).clone());<br> table.css(
"opacity"
, 0.7);<br><br>
return
table;<br> },<br> start:
function
(e) {<br>
if
($(
'#Drops .k-state-selected'
).length == 0) {<br> e.preventDefault();<br> }
else
{<br> $(
'#Drops .k-state-selected'
).hide();<br> }<br> },<br> end:
function
(e) {<br> $(
'#Drops .k-state-selected'
).show();<br> },<br> change:
function
(e) {<br>
try
{<br> isDropInProgress =
true
;<br><br>
var
items =
this
.element.find(
'.k-state-selected'
).not(e.item);<br>
for
(
var
i = 0; i < items.length; i++) {<br> console.log(items[i]);<br> $(items[i]).insertBefore(e.item).show();<br> }<br><br>
var
selectedSequence = $(e.item[0]).find(
'.row-number'
).text();<br>
for
(
var
i = 0; i < items.length; i++) {<br>
var
sequence = $(items[i]).find(
'.row-number'
).text();<br>
if
(Number(sequence) > Number(selectedSequence)) { <br> $(e.item).insertBefore(items[i]);<br>
break
;<br> }<br> }<br><br>
var
rows = $(dropsGrid.tbody[0]).find(
'tr'
);<br>
for
(
var
i = 0; i < rows.length; i++) {<br>
var
uid = $(rows[i]).data(
'uid'
);<br>
var
drops = dropsGrid.dataSource.data();<br>
var
dataItem =
null
;<br>
for
(
var
j = 0; j < drops.length; j++) {<br>
if
(drops[j].uid == uid) {<br> dataItem = drops[j];<br>
break
;<br> }<br> }<br>
if
(dataItem !=
null
) {<br> dropsGrid.dataSource.remove(dataItem);<br> dropsGrid.dataSource.insert(i, dataItem);<br> }<br> }<br><br> } finally {<br> isDropInProgress =
false
;<br> isDirty =
true
;<br> onDataBound();<br> refreshMap(dropsGrid.dataSource._data);<br> }<br> },<br> cancel:
function
(e) {<br> $(
'#Drops .k-state-selected'
).show();<br> }<br> }).data(
"kendoSortable"
);
With this code the user can reorder rows on a grid using drag and drop. Also "refreshMap(dropsGrid.dataSource._data);" updates the pins on a google map when the user changes the order of the rows.
Everything works as expected, but if the grid contains, lets say 80 rows and you are trying to move 3 rows at a time the performance takes a significant hit. I.e It takes between 9 to 10 seconds for the rows to drop in place.
I did some debugging around it and found that the issue is with the chunk of code below:
var
rows = $(dropsGrid.tbody[0]).find(
'tr'
);<br>
for
(
var
i = 0; i < rows.length; i++) {<br>
var
uid = $(rows[i]).data(
'uid'
);<br>
var
drops = dropsGrid.dataSource.data();<br>
var
dataItem =
null
;<br>
for
(
var
j = 0; j < drops.length; j++) {<br>
if
(drops[j].uid == uid) {<br> dataItem = drops[j];<br>
break
;<br> }<br> }<br>
if
(dataItem !=
null
) {<br> dropsGrid.dataSource.remove(dataItem);<br> dropsGrid.dataSource.insert(i, dataItem);<br> }<br> }
I tried for the past couple of days to replace the nested for loops but without a complete successful result.
I got as far as getting the single selection to work synchronously with the map by using below code:
<code style=
"color: #069;font-weight: bold;"
>
var
</code> <code style=
"color: #000;"
>skip = 0,<br> oldIndex = e.oldIndex + skip,<br> newIndex = e.newIndex + skip,<br> </code><code style=
"color: #008200;"
>data = dropsGrid.dataSource.data(),<br> dataItem = dropsGrid.dataSource.getByUid(e.item.data(
"uid"
));<br><br> console.log(
"------"
+ e.newIndex +
" "
+ newIndex +
" "
+ skip +
" - "
+ e.oldIndex +
" "
+ oldIndex +
" "
+ skip);<br><br> dropsGrid.dataSource.remove(dataItem);<br> dropsGrid.dataSource.insert(newIndex, dataItem);</code>
but I am loosing the multiple selection functionality.
By using below code:
start:
function
(e) {<br>
if
($(
'.k-state-selected'
).length === 0) {<br> e.preventDefault();<br> }
else
{<br> $(
'.k-state-selected'
).hide();<br> }<br> },<br> end:
function
(e) {<br> <br> $(
'.k-state-selected'
).show();<br> },<br> change:
function
(e) {<br>
try
{<br> isDropInProgress =
true
;<br><br> console.time(
"whole drop"
);<br><br>
var
items =
this
.element.find(
'.k-state-selected'
).not(e.item);<br>
for
(
var
i = 0; i < items.length; i++) {<br> console.log(items[i]);<br> $(items[i]).insertBefore(e.item).show();<br> }<br><br>
var
selectedSequence = $(e.item[0]).find(
'.row-number'
).text();<br>
for
(
var
i = 0; i < items.length; i++) {<br>
var
sequence = $(items[i]).find(
'.row-number'
).text();<br>
if
(Number(sequence) > Number(selectedSequence)) { <br> $(e.item).insertBefore(items[i]);<br>
break
;<br> }<br> }<br><br> $(
'.k-state-selected'
).removeClass(
"state-selected"
);<br><br> console.timeEnd(
"whole drop"
);<br> } finally {<br> isDropInProgress =
false
;<br> isDirty =
true
;<br> onDataBound();<br> refreshMap(dropsGrid.dataSource._data);<br> }<br> },<br> cancel:
function
(e) {<br> $(
'.k-state-selected'
).show();<br> } <br> }).data(
"kendoSortable"
);<br><br> testDrop.draggable.userEvents.bind(
"tap"
,
function
(e) {<br>
if
(e.event.ctrlKey) {<br> e.target.toggleClass(
"state-selected"
);<br> }
else
{<br> $(
'.k-state-selected'
).removeClass(
"state-selected"
);<br> e.target.addClass(
"state-selected"
);<br> }<br> });
multiple and single selection works but the pins on the map are not updating anymore.
Another issue with the above approach is that when I move, lets say, two rows from position 1 and 2 under row 5 I am getting following behavior:
- the 2 rows that I moved are selected (expected behavior)
- the rows that replaced position 1 and 2 are also selected (unwanted behavior, as this creates confusion)
As I spent couple of days already on this issue I was wondering if you can, please, help with an example or some guidance in order to resolve the issue.
I am looking forward to hearing from you!
Thank you
Hello,
I am currently using a listview from Telerik. Now I want to add an OnLoad function so the items will be displayed differently. When I check the possible events for the listview I cant see a onload or some other useful event to display it different directly when the page loads. So now is my question. Is there another alternative to make this work?
Kind regards.
i'm trying to figure out how to use tag helpers with grid to achieve the same functionalities as basic razor syntax. Some thing i have noticed that behave differently : data annotations are not being used, neither for Display names nor display format, i also do not have the option to autogenerate column with tag helpers.
Here is the code in my .cshtml page
@(Html.Kendo().Grid<
DemandeNonTraiteViewModel
>()
.Name("Nontraite")
.Columns(cols =>
{
cols.Bound(c => c.Date);
cols.Bound(c => c.NomComplet);
cols.Bound(c => c.NomOrganisation);
cols.Bound(c => c.DemandePAA);
cols.Bound(c => c.DemandeFDT);
cols.Bound(c => c.DemandeOrg);
})
.DataSource(ds => ds
.Ajax()
.Model(m => m.Id(p => p.Id))
.Read(r => r.Action("DemandeNonTraite_Read", "Demande", new { Area = "Identity" }))))
<
kendo-grid
name
=
"grid"
>
<
columns
>
<
column
field
=
"Date"
/>
<
column
field
=
"NomComplet"
/>
<
column
field
=
"NomOrganisation"
/>
<
column
field
=
"DemandePAA"
/>
<
column
field
=
"DemandeFDT"
/>
<
column
field
=
"DemandeOrg"
/>
</
columns
>
<
datasource
type
=
"DataSourceTagHelperType.Ajax"
>
<
schema
>
<
model
id
=
"Id"
>
</
model
>
</
schema
>
<
transport
>
<
read
url
=
"@Url.Action("
DemandeNonTraite_Read","Demande", new {
Area
=
"Identity"
})" />
</
transport
>
</
datasource
>
</
kendo-grid
>
Here is my viewmodel:
public class DemandeNonTraiteViewModel
{
public Guid Id { get; set; }
[Display(Name = "Date")]
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime Date { get; set; }
public string Prenom { get; set; }
public string Nom { get; set; }
public string NomOrganisation { get; set; }
[Display(Name = "PAA")]
public bool DemandePAA { get; set; }
[Display(Name = "FDT")]
public bool DemandeFDT { get; set; }
[Display(Name = "Ajout organisation")]
public bool DemandeOrg { get; set; }
[Display(Name = "Nom complet")]
public string NomComplet
{
get
{
return $"{Prenom} {Nom}";
}
}
}
And attached are the grid that are rendered . i would love to have both render with same way as the first so that i can use taghelpers instead of razor syntax
I have a requirement where the user has to enter 3 letter and for each group of letters I have to display a different list. For instance if the user writes A I have to display AA, AB,... and if the user write AC I have to display ACA, ACB,...
I have configured the autocomplete with server filtering and if the user selects an item I need for the autocomplete to display a different list.
The autocomplete i like this
@(Html.Kendo().AutoCompleteFor(m => m.Field)
.DataTextField(
"Prefix"
)
.Filter(FilterType.StartsWith)
.MinLength(0)
// this does not work
.DataSource(dataSource => dataSource.Read(read => read.Action(
"GetClassifications"
,
"Device"
).Data(
"device.getFilterClassification"
))
.ServerFiltering(
true
))
.Template(
"<span class='k-state-default'>#: Prefix # - #: Name #</span>"
)
.Events(events => events.Select(
"classificationSelect"
))
)
and the script looks like this
function
classificationSelect(e) {
var
dataItem = e.sender.dataItem(e.item.index());
var
text = dataItem.Prefix;
if
(text.length < 3) {
e.sender.search(text);
}
}
The select method does not open the dropdownlist even though the server method is called with the correct selection. Sometimes it opens but with the old values.
I have a grid where i have popup edit enabled. For this popup editing i have a template and in the template i have a multiselectfor which looks like this:
@(Html.Kendo().MultiSelectFor(x => x.SelectedConsultantIds)
.AutoClose(false)
.Placeholder("Select consultants")
.DataTextField("DisplayName")
.DataValueField("Id")
.IgnoreCase(true)
.Filter("contains")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAvailableConsultants", "Project");
});
})
)
When i load the grid the SelectedConsultantIds (List<string>) is populated for each item. I then click Edit for a row and the multiselectfor loads with all the DisplayNames preselected. However when i add new items to the multiselect from the selection they do not get added to the SelectedConsultantIds list when i click update and watch the viewmodel in the controller. The list stays the same if i only add. It does seem to update when i remove items from the list and click update.
So i can only remove items and not add items in this multiselect. The items get added and removed in the box itself, but not when i pass the viewmodel with the list to the controller.
hi,
I am following the example and the documentation, but I can't solve thi issue
Uncaught TypeError: Cannot read property 'slice' of undefined
at init.success (kendo.all.js:7083)
at success (kendo.all.js:7010)
at Object.n.success (kendo.all.js:5934)
at fire (jquery.js:3182)
at Object.fireWith [as resolveWith] (jquery.js:3312)
at done (jquery.js:8754)
at XMLHttpRequest.<anonymous> (jquery.js:9120)
my view:
<div class="row">
<form asp-controller="Home" asp-action="SetLanguage" role="search" method="post">
<div class="form-group">
@*<input type="text" placeholder="Search for something..." />*@
@(Html.Kendo().MultiColumnComboBox()
.Name("products")
.DataTextField("Name")
.DataValueField("Id")
.Columns(columns =>
{
//columns.Add().Field("Name").Template("<a href= '" + "Instrument/Quotes/#: Id #" + "'>Q</a>").Title("Name");
//columns.Add().Field("Id").Title("ID");
columns.Add().Field("Id").Template("<a href= '" + "/Analisys/AnalisysShort/#: Id #" + "'>#: Name#</a>").Title("ID");
})
.Placeholder("Search...")
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(80)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("SearchInstruments_Read", "Home");
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
})
.Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper")))
<button type="submit" class="btn btn-success">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
</div>
<script>
function valueMapper(options) {
$.ajax({
url: "@Url.Action("SearchInstruments_ValueMapper", "Home")",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
});
}
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}
</script>
my controller
public async Task<ActionResult> SearchInstruments_Read([DataSourceRequest] DataSourceRequest request)
{
var model = await _repo.GetAllAsync<Instrument>();
var vmodel = Mapper.Map<IEnumerable<InstrumentViewModel>>(model);
return Json(vmodel);
}
public async Task<IActionResult> SearchInstruments_ValueMapper(int[] values)
{
var indices = new List<int>();
if (values != null && values.Any())
{
var index = 0;
foreach (var model in await _repo.GetAllAsync<Instrument>())
{
if (values.Contains(model.Id))
{
indices.Add(index);
}
index += 1;
}
}
return Json(indices);
}
thank you for help
Hi,
I'm using a custom template for popup editing in my Grid, eg
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp);
editable.TemplateName("/Areas/RiskProfile/Views/Shared/ClinicalGapEditor.cshtml");
})
In "ClinicalGapEditor.cshtml" i'm binding to a view model and have some date field
[Required(ErrorMessage = Messages.Generic)]
[DisplayFormat(ApplyFormatInEditMode =
true
, DataFormatString =
"{0:dd/MM/yyyy}"
)]
[DataType(DataType.Date)]
public
DateTime? To {
get
;
set
; }
I want the date to be entered in dd/MM/yyyy format but when I enter the date and tab out of the field it is automatically change to a long date, such as "Tue Dec 12 2000 00:00:00 GMT+0000 (Greenwich Mean Time)".
How do I fix this?
How can we disable the sorting that is applied to groups in kendo grid.
Please reply asap.