Telerik Forums
UI for ASP.NET Core Forum
4 answers
173 views

Hi

I have a Class like this : 

public class History
{
public bool Wt_loss { get; set; }
 public bool WT_Gain { get; set; }
 public bool HairLoss { get; set; }
}
 public class PmhDh{
public string Levothyroxine { get; set; }
 }
 public class Datum{
public History History { get; set; }
public PmhDh PmhDh { get; set; }
 }

and i fill the main class with some data

i want to show this class in kendo grid mvc wit main header and sub header but i my code not work correctly

this is my grid code :

@(Html.Kendo().Grid<dynamic>()
                 .Name("gridEQ")
                 .Columns(columns => columns.AutoGenerate(true))
                 .Sortable()
                 .Pageable()
                 .Scrollable()
                 .DataSource(d => d
                     .Ajax()
                     .PageSize(20)
                     .ServerOperation(true)
                     .Read(r => r.Action("SendData", "Thyroid"))
                     
                 ))

and attach the result on this post

please help me

thanks

Viktor Tachev
Telerik team
 answered on 23 Oct 2018
1 answer
173 views

@(Html.Kendo().Grid<BitteleERP.MVC.Models.Corporation>()
                .Name("grid")
            .Columns(columns =>
            {
                columns.Command(command => command.Custom("Edit").Click("edit")).Width(40);
                columns.Command(command => command.Custom("Delete").Click("deleted")).Width(40);
                columns.Bound(c => c.Name).Width(140);
                columns.Bound(c => c.Location).Width(190);
                columns.Bound(c => c.DefaultCurrency).Width(100);
            })
            .ToolBar(toolbar =>
            {
                toolbar.ClientTemplateId("GridToolbarTemplate");
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Sortable()
            .Scrollable(scrollable => scrollable.Virtual(true))
            .HtmlAttributes(new { style = "height:84vh;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Read", "Corporation"))
            )
)

 

<script id="GridToolbarTemplate" type="text/x-kendo-template">

    <div class="refreshBtnContainer">
        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET"  data_ajax_mode="replace" data-ajax-update="#ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
</script>

--

data-ajax-update="#ajax-content" with # is not working with kendo

---

ncaught Error: Invalid template:'
    <div class="refreshBtnContainer">
        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET"  data_ajax_mode="replace" data-ajax-update="#ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div class="refreshBtnContainer">\n        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET"  data_ajax_mode="replace" data-ajax-update="';ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (kendo.all.min.js:25)
    at Object.d [as template] (jquery.min.js:2)
    at HTMLDocument.<anonymous> (Corporation:252)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

 

 

 

Alex Hajigeorgieva
Telerik team
 answered on 22 Oct 2018
1 answer
43 views

hello.

when i update window with 

$(window).resize(function(){
    $("#chart").data("kendoChart").refresh();
});

my is fall and need reload window

Tsvetina
Telerik team
 answered on 19 Oct 2018
6 answers
1.2K+ views

     Hello,

 

I am trying to put an upload in a grid's editor so i can add a profile picture to my users. However, when the save action is called i always receive a null object. I am using an EditorTemplate to put the upload control in the grid's edit mode. 

 

I suspect that the reason it does not work has something to do with the Editortemplate since if i copy my upload control in my main view, it sends the files to the controller properly.

 

here are the relevant code snippets:

 

Controller  
[HttpPost]
        public ActionResult Save(IFormFile files)
        {
            //Do save
            return Content("");
        }

Editortemplate

@model string

@(Html.Kendo().Upload()
        .Name("files")
        .Multiple(false)
        .Async(a => a
            .Save("Save", "File")
            .AutoUpload(true)
        )
)

 

The grid Column 

            columns.Bound(c => c.ProfilePicture).Title("Photo").EditorTemplateName("FileUpload").ClientTemplate("<img src='" + Url.Action("GetImage", "File") + "?imageID=#= ProfilePicture.ID #' alt='Profil' height='172' width='147'>").Width(160);

 

 

 

Veselin Tsvetanov
Telerik team
 answered on 19 Oct 2018
2 answers
264 views

Hi, I think this is a bug.  

This menu item will not work:

<menu-item text="Search1" asp-action="search" asp-controller="Client" link-html-attributes='new { data_attr = "custom value" }'></menu-item>

 

This menu item will work:

<menu-item text="Search" asp-action="_search" asp-controller="Client" link-html-attributes='new { data_attr = "custom value" }'></menu-item>

 

The only difference is the underscore.  The underscore can be anywhere in the action name, but if it's not there, Telerik won't build the link with the action.  

Are my actions required to have underscores? 

 

Veselin Tsvetanov
Telerik team
 answered on 18 Oct 2018
4 answers
640 views

When using DateInputFor on a required nullable datetime it allows submit when date is blank. It should throw a field required error like DatePicketFor. Same error if you use DatePickerFor(...).DateInput().

 

using System;
using System.ComponentModel.DataAnnotations;
namespace WebApplication9.Models {
    public class TestViewModel {
        [Required]
        [DataType(DataType.Date)]
        public DateTime? TheDate { get;set;}
        [Required]
        [DataType(DataType.Date)]
        public DateTime? TheDate2 { get; set; }
    }
}

 

@model TestViewModel
<form asp-action="Index" method="post">
    <script type="text/javascript">
        $.validator.setDefaults({
            ignore: ""
        });
    </script>
    <p>
        @(Html.Kendo().DatePickerFor(m => m.TheDate))
        <span asp-validation-for="TheDate" class="text-danger"></span>
    </p>
    <p>
        @(Html.Kendo().DateInputFor(m => m.TheDate2))
        <span asp-validation-for="TheDate2" class="text-danger"></span>
    </p>
    <input type="submit" value="Go" />
</form>

 

 

Konstantin Dikov
Telerik team
 answered on 17 Oct 2018
1 answer
478 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
82 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
469 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
96 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?