Telerik Forums
UI for ASP.NET Core Forum
3 answers
91 views

Hello,

I want for my bar to have a Y-axis line. Just the same as this Dojo Example

I have removed the first plotband so only the line will be visible. But then I see this:

from: 30000,
to: 30500,

Is there a way to just set it at 30000 and not to 35000? 

Kind regards

Konstantin Dikov
Telerik team
 answered on 07 Dec 2018
4 answers
2.5K+ views

Hi! I'm using IFrame windows for modal forms and want to be able to resize the modal window dynamically, based on the size of the calling parent.

Here is the calling parent:

@page
@addTagHelper "*, Kendo.Mvc"
@model MySite.Test.CustomerModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Customer</title>
</head>
<body>
    @{
        string[] actions = new string[] { "Close" };
    }
    <kendo-window name="addEditCustomer"
                  modal="true"
                  title="Add a New Customer"
                  draggable="true"
                  iframe="true"
                  resizable="true"
                  on-close="onClose"
                  style="display:none"
                  actions="actions">
        <content>
            loading user info...
        </content>
        <popup-animation enabled="true" />
    </kendo-window>
 
    <a href="javascript:void(0);" onclick="openWindow(5)"  class="btn btn-sm btn-outline-primary right">Click here to open the window.</a>
    <div class="responsive-message"></div>
    <script>
        function onClose() {
            //alert("closed");
        }
 
        function openWindow(id) {
            var url = "/test/testaddcustomer?id=" + id;
            $("#addEditCustomer").data("kendoWindow").refresh({ url: url }).title("Edit Customer");
            $("#addEditCustomer").data("kendoWindow").open();
            $("#addEditCustomer").data("kendoWindow").center();
        }
    </script>
</body>
</html>

 

And here is the window page:

@page
@model MySite.Test.AddCustomerModel
@{
    Layout = null;
}
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="~/css/bootstrap.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link href="~/lib/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet" />
 
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/js/bundle.js"></script>
 
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <br />
        <h2>TestAddCustomer</h2>
 
        <p> This would be a form to add the customer.</p>
    </div>
</body>
</html>
<script>
    $(document).ready(function () {
        //var showWidth = $(window).parent.width()*.8;
        //var showHeight = $(window).parent.height() * .8;
        var showWidth = 400;
        var showHeight = 400;
        window.parent.$("#addEditCustomer").data("kendoWindow").setOptions({ width: showWidth, height: showHeight });
        window.parent.$("#addEditCustomer").data("kendoWindow").center();      
    });
 
</script>

 

I am able to get the width and height to set to static values (400x400) and recenter, but I'd like to get the height dynamically, as in the commented lines. 

Any help would be much appreciated!

Marin Bratanov
Telerik team
 answered on 06 Dec 2018
3 answers
1.6K+ views

I cannot figure out how to color the background of the Toolbar in a Kendo UI Grid.  I can style the buttons but I want the <div> or panel behind the buttons to be a different color that what you see in the attachment, white.

 

Thanks

Eyup
Telerik team
 answered on 06 Dec 2018
4 answers
972 views

Hi,

 

I have some question,how to disable column in popup grid.I have code :

View:

@model DevRedsMk3.Models.NpvCalculation

<style>
    .k-grid {
        font-size: 12px;
    }
</style>

<div>
    @(Html.Kendo().Grid<DevRedsMk3.Models.NpvCalculation>()
        .Name("NpvCalculation")
        .Columns(columns =>
        {
            columns.Bound(p => p.NpvCalculationId).Hidden();
            columns.ForeignKey(p => p.TransactionId, (System.Collections.IEnumerable)ViewData["custTrans"], "TransactionId", "TransactionId").Title("TransactionId ID");
            columns.Bound(p => p.LastPayment).Title("Last Payment");
            columns.Bound(p => p.OutstandingAmount).Title("Outstanding Amount");
            columns.Bound(p => p.Installment).Title("Installment");
            columns.Bound(p => p.Interest).Title("Interest");//Title("Interest").Editable(false)

            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
            columns.Command(c => c.Custom("OK").Text("OK").Click("OK"));
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
        })
        .Events(e => {  e.DataBinding("onchangeevent"); })
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Scrollable(s => s.Height(570))
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(datasource => datasource
             .Ajax()
             .ServerOperation(false)
             .Model(model =>
             {
                 model.Id(p => p.NpvCalculationId);

                 model.Field(p => p.Interest).Editable(false);

             })

             .Read(read => read.Action("List", "NpvCalculations"))
             .Update(update => update.Action("Update", "NpvCalculations"))
             .Create(create => create.Action("Create", "NpvCalculations"))
             .Destroy(destroy => destroy.Action("Destroy", "NpvCalculations"))

        )
    )

    <script type="text/javascript">
        function OK(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            
            $.ajax({
                url: "/NpvCalculations/GenerateNpvBaru",
                //data: dataItem.id,
                //data: { 'TransactionId': dataItem.TransactionId },
                data: { TransactionId: dataItem.TransactionId },
                success: function (response) {
                    //$('#viewDetails').html(response);
                    //alert('Approve done...');
                }
            });
        }
    </script>

    <script>
        function onchangeevent() {
            $('#OutstandingAmount').val("10000");
            //document.getElementById("OutstandingAmount").value = "10000";
        }

    </script>

</div>

I want in field Interest column disable,i have write code  => model.Field(p => p.Interest).Editable(false) but it did not work.

 

Can you help me.

 

Thanks,

 

Regadrs,

 

Machriza

 

Viktor Tachev
Telerik team
 answered on 05 Dec 2018
2 answers
416 views

Dear,

Firstly, I downloaded the test grid file with https://www.telerik.com/forums/razor-pages-grid-binding-with-ajax-support, I tried, the grid works.

when I added "services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");" to ConfigureServices,the dome of grid doesn't work, it is no response to call the read and update handler.

Test Env:VS2017 .net core 2.1 Razor, Telerik:Ver 2018.3.1017

I would appreciate it if you can give me some ideas.

thanks.

 

        ......

          services
                .AddMvc()
                .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
                .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
                
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

            services.AddKendo();
        }

razor page code

<h2>TestGrid</h2>

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

@(Html.Kendo().Grid<WebApplication8.Models.Customer>().Name("grid")
                                            .AutoBind(false)
                                            .Groupable()
                                            .Sortable()
                                            .Columns(x =>
                                            {
                                                x.Bound(c => c.Address);
                                                x.Bound(c => c.Name);
                                                x.Command(c => c.Edit());
                                            })
                                            .DataSource(d => d.Ajax()
                                                   .Read(r => r.Action("Pages", "Contact", new { handler = "ReadRecords" }).Type(HttpVerbs.Post))
                                                   .Update(u => u.Action("Customer", "Index", new { handler = "UpdateRecord" }).Type(HttpVerbs.Post))
                                                   .Model(m => m.Id(id => id.CustomerId))
                                                .PageSize(10)
                                            )
                                            .Pageable()
)



<script>
    $(function () {
        var grid = $("#grid").data("kendoGrid");

        grid.dataSource.transport.options.read.beforeSend = function (req) {
            req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        grid.dataSource.transport.options.update.beforeSend = function (req) {
            req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        grid.dataSource.read();
    })
</script>

 

second, If I removed "services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");" from ConfigureServices, The Grid can work fine, but the ajax event doesn't work, I really don know the why.

 

<input asp-for="SearchString" onchange="HandlerTest()" class="form-control" />

<script>
    function HandlerTest() {


        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "About?handler=LoginIn",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            //data: { UserName: $("#UserName").val(), PassWord: $("#PassWord").val() },
            success: function (response) {
                console.log(response);
            },
            failure: function (response) {
                alert(response);
            }
        });
    }


</script>

 

 

Wang Xin
Top achievements
Rank 1
 answered on 05 Dec 2018
2 answers
165 views

Hi,

I am currently using a trial version of Kendo UI for ASPNet Core. For my application I am looking to use a Gantt like control.

I need to be able to show the Gantt displaying the Tasks that users need to complete. These are assigned to a particular place in a factory.

Would there be a way in this control to show the "assigned locations" down the left (where task id, title, start & end are in the example), and then all the tasks are displayed on the right on the correct location row; at the correct date/time etc.

Thanks

Ashley


Ashley
Top achievements
Rank 1
 answered on 04 Dec 2018
3 answers
260 views
I'm having an issue with the DropDownTree (with checkboxes) when trying to display a user's saved selections.  When you render the tree with the following code taken from the example here and try to set some of the items as Checked by default, only the deepest level item is displayed in the tag list.  However, if the user checks nested items, all levels are displayed in the tag list.  You can see in the attached images the same items are selected, but the tag list is rendered differently.  Is this a bug in the DropDownTree?

@(Html.Kendo().DropDownTree()
    .Name("DropDownTree")
    .AutoClose(false)
    .Checkboxes(true)
        .Items(dropdowntree =>
        {
            dropdowntree.Add().Text("My Documents").Id("1")
                .Expanded(true)
                .Checked(true)
                .Items(root =>
                {
                    root.Add().Text("Kendo UI Project").Id("2")
                        .Expanded(true)
                        .Items(project =>
                        {
                            project.Add().Text("about.html").Id("3").Checked(true);
                            project.Add().Text("index.html").Id("4");
                            project.Add().Text("logo.png").Id("5");
                        });

                    root.Add().Text("New Web Site").Id("6")
                        .Expanded(true)
                        .Checked(true)
                        .Items(item =>
                        {
                            item.Add().Text("mockup.jpg").Id("7");
                            item.Add().Text("Research.pdf").Id("8");
                        });

                    root.Add().Text("Reports").Id("9")
                        .Expanded(true)
                        .Items(reports =>
                        {
                            reports.Add().Text("February.pdf").Id("10").Checked(true);
                            reports.Add().Text("March.pdf").Id("11").Checked(true);
                            reports.Add().Text("April.pdf").Id("12");
                        });
                });
        })
)


Dimitar
Telerik team
 answered on 04 Dec 2018
1 answer
297 views

I have a problem where if I add the "for" tag to my dropdown list my cascading stops working.

Here is the code that allows for selecting an item in the dropdown list which changes what is seen in the second dropdown list:

<kendo-dropdownlist name="Countries" class="jProfileMod" datatextfield="CountryName" datavaluefield="Id" bind-to="Model.Countries" index="1"></kendo-dropdownlist>
 
 
<kendo-dropdownlist name="DocumentTypes" for="GovIdTypeID" class="jProfileMod" datatextfield="Name" datavaluefield="Id"  bind-to="Model.GovIdTypes" cascade-from="Countries" cascade-from-field="IssuingCountry.Id"></kendo-dropdownlist>

And here I have added some code so that my model gets updated when the HTML post is called:

<kendo-dropdownlist name="Countries" for="CountryID" class="jProfileMod" datatextfield="CountryName" datavaluefield="Id" bind-to="Model.Countries" index="1"></kendo-dropdownlist>
 
<kendo-dropdownlist name="DocumentTypes" for="GovIdTypeID" class="jProfileMod" datatextfield="Name" datavaluefield="Id"  bind-to="Model.GovIdTypes" cascade-from="Countries" cascade-from-field="IssuingCountry.Id"></kendo-dropdownlist>

as soon as I do that, the fist dropdown box no longer affects the second one.

the only thing I add is: for="CountryId" in the first dropdown.

The model:

public Guid CountryID { get; set; }
public Guid GovIdTypeID { get; set; }
public List<Country> Countries { set; get; }
public List<DocumentType> GovIdTypes { set; get; }
Dimitar
Telerik team
 answered on 04 Dec 2018
3 answers
1.8K+ views

Let me know if I'm doing something wrong here.  I'm creating a Web Service to service my Web Application through a REST API.  One class of methods I'm exposing provides the view models that feed into Kendo UI controls, like the grid.  I'm trying to separate the concerns of the client and server by passing the paging parameters to the service and, when the service has completed the query and reduced the results down to a specific number of items (page size) on a given page (page #), I attempt to return the results to the client using the following:

 

            DataSourceResult dataSourceResult = investments.ToDataSourceResult<InvestmentViewModel>(dataSourceRequest);
            dataSourceResult.Total = total;
            return Json(dataSourceResult);

On the client, I attempt to deserialize this data with:

 

                //Deserializing the response recieved from web api and storing into the Employee list

                dataSourceResult = JsonConvert.DeserializeObject<DataSourceResult>(result);

 

But I get an error message:

                Newtonsoft.Json.JsonSerializationException: 'Cannot create and populate list type System.Collections.IEnumerable. Path 'data', line 1, position 9.'

What is the proper way to deserialize the DataSourceResult JSON?

 

 


Stéphane
Top achievements
Rank 1
 answered on 03 Dec 2018
1 answer
90 views

Hello,

I am using the old Jquery pie charts, these are getting populated by the model (The model will be populated by a stored procedure), however, i am trying to migrating to the new Pie chart Tag Helpers but i can not seem to use a Model as the data-source, is this possible and if so how can i achieve this?

 

Stefan
Telerik team
 answered on 30 Nov 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?