Telerik Forums
UI for ASP.NET Core Forum
1 answer
453 views

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")))
Viktor Tachev
Telerik team
 answered on 16 Oct 2018
1 answer
72 views
hello
how to set width chart.
i have data for 30 year but my chart have small width.
no added scroll for parent chart and fix parent width  but no added crolling
Tsvetina
Telerik team
 answered on 15 Oct 2018
3 answers
437 views

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

Stamo Gochev
Telerik team
 answered on 15 Oct 2018
1 answer
91 views

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.

Viktor Tachev
Telerik team
 answered on 12 Oct 2018
1 answer
226 views

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

Georgi
Telerik team
 answered on 12 Oct 2018
3 answers
215 views

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.

 

Neli
Telerik team
 answered on 11 Oct 2018
1 answer
101 views

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.

 

Veselin Tsvetanov
Telerik team
 answered on 10 Oct 2018
4 answers
606 views

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

Plamen
Telerik team
 answered on 10 Oct 2018
7 answers
1.9K+ views

 

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?

 

 

 

 

 

 

 

Viktor Tachev
Telerik team
 answered on 08 Oct 2018
6 answers
1.7K+ views

How can we disable the sorting that is applied to groups in kendo grid.

 

 

Please reply asap.

Isha
Top achievements
Rank 1
 answered on 08 Oct 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?