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

I'm getting a 400 Error when I click on the toolbar button to export the grid contents to Excel.  The call to the ProxyURL method never happens.

Chrome Dev Tools shows the following.

POST https://localhost:44329/Admin/Companies?handler=Read 400

I suspect this is because the Anti-Forgery token is not getting passed to the read that the export function uses although it looks like the same read call that the grid uses successfully.  Any ideas on how I can resolve this?

@(Html.Kendo().Grid<InstallerCompanyPageModel>()
    .AutoBind(false)
    .Name("CompaniesGrid")
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit()
            .HtmlAttributes(new { title = "Edit", @class = "k-button k-button-icontext" })
            .UpdateText("Save"); }).Width(100);
        columns.Bound(a => a.CompanyName).Width(200)
            .Filterable(filterable => filterable.Extra(false)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .StartsWith("Starts with")
                        .Contains("Contains")
                    ))
            );
        columns.Bound(a => a.WebSite).Width(250)
            .HtmlAttributes(new { @class = "wordWrapGridColumn" })
            .Filterable(filterable => filterable.Extra(false)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .StartsWith("Starts with")
                    .Contains("Contains")
                ))
            );
        columns.Bound(a => a.Active).Width(60)
            .ClientTemplate("#= Active ? 'Yes' : 'No' #").HtmlAttributes(new { style = "text-align:center" });
    })
    .ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-file'></i> Add New")
        .HtmlAttributes(new { id = "companyAdd", title = "Add a new company.", @class = "k-button k-button-icontext k-grid-add" }))
    .ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-sync'></i> Refresh Grid")
        .HtmlAttributes(new { id = "companyRefresh", title = "Refresh the data in the grid." }))
    .ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-minus-square'></i> Clear Filters")
        .HtmlAttributes(new { id = "companyReset", title = "Clear the grid column filters." }))
    .ToolBar(toolbar => toolbar.Custom().Text("<i class='fas fa-file-excel'></i> Export To Excel")
        .HtmlAttributes(new { id = "export", title = "Export to Excel", @class = "k-button k-button-icontext k-grid-excel" }))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(pageable => pageable
        .Input(true)
        .Numeric(false)
        .PageSizes(true)
        .Messages(messages => messages.Display("Showing items from {0:0,0} to {1:0,0}. Total items: {2:0,0}"))
        .Messages(messages => messages.Empty("No companies found."))
        .PageSizes(new[] { 5, 10, 25, 50 })
    )
    .Resizable(resizeable => resizeable.Columns(true))
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .Filterable()
    .Excel(excel => excel
        .AllPages(true)
        .Filterable(true)
        .FileName("Companies.xlsx")
        .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
    )
    .Events(events => events.ExcelExport("excelExport1"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Url("/Admin/Companies?handler=Read"))
        .Update(u => u.Url("/Admin/Companies?handler=Update"))
        .Create(c => c.Url("/Admin/Companies?handler=Create"))
        .Model(m =>
        {
            m.Id(id => id.InstallerCompanyId);
            m.Field(i => i.CompanyName);
            m.Field(i => i.WebSite);
            m.Field(i => i.Active).DefaultValue(true);
        })
        .PageSize(10)
        .Sort(sortable => sortable.Add("CompanyName"))
        .Events(events => events.Error("gridErrorHandler"))
    )
)

 

My JavaScript

$(function () {
    // razor pages have built in anti-forgery token so wire up the kendo grid to pass it when doing crud
    var grid = $("#CompaniesGrid").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.transport.options.create.beforeSend = function (req) {
        req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
    };
});

 

My controller method

[HttpPost]
public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
{
    var fileContents = Convert.FromBase64String(base64);
    return File(fileContents, contentType, fileName);
}

 

John
Top achievements
Rank 1
 answered on 22 May 2019
5 answers
748 views

Hi Experts,

    I am using kendo-validator to validate the input controls like (Textbox, Dropdown etc.)

The validation for empty field is working if i move one control to another control using Tab.

I needed that all validation for empty fields should triggered on form submit, not on Tab.

The sample code is below.

<div class="row">
    <div class="col-md-4">
        <form id="addfacility" asp-action="Add" kendo-validator="true">
            <div asp-validation-summary="ModelOnly" class="text-danger" style="width:900px;"></div>

            <div class="form-group" style="width:400px;">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" maxlength="200" style="width:300px" />
                @*<span asp-validation-for="Name" class="text-danger" style="width:500px"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Address.Address1" class="control-label"></label>
                <input asp-for="Address.Address1" class="form-control" maxlength="100" style="width:300px" />
                @*<span asp-validation-for="Address.Address1" class="text-danger"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Address.Address2" class="control-label"></label>
                <input asp-for="Address.Address2" class="form-control" maxlength="100" style="width:300px" />
                @*<span asp-validation-for="Address.Address2" class="text-danger"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Address.City" class="control-label"></label>
                <input asp-for="Address.City" class="form-control" maxlength="50" style="width:200px" required="required" title="City field is required."/>
                @*<span asp-validation-for="Address.City" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Address.State" class="control-label"></label>

                @(Html.Kendo().DropDownListFor(x => x.SelectedStateId)
                                                                    .OptionLabel("--Please Select--")
                                                                    .DataTextField("Name")
                                                                    .DataValueField("EntityId")
                                                                    .BindTo(Model.StateList)
                                                                    .HtmlAttributes(new { required = "required", validationmessage = "The State field is Required.", @class = "form-control", style = "width: 200px;" })
                )

                @*<span asp-validation-for="SelectedStateId" class="text-danger"></span>*@

            </div>
            <div class="form-group">
                <label asp-for="Address.Zip" class="control-label"></label>
                <input asp-for="Address.Zip" class="form-control" maxlength="5" style="width:75px" />
                @*<span asp-validation-for="Address.Zip" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Address.County" class="control-label"></label>
                <input asp-for="Address.County" class="form-control" maxlength="50" style="width:200px" />
                @*<span asp-validation-for="Address.County" class="text-danger"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Phone" class="control-label"></label>

                @(Html.Kendo().MaskedTextBoxFor(x => x.Phone)
                                                                    //.Name("Phone")
                                                                    .Mask("000-000-0000")
                                                                    .HtmlAttributes(new { @class = "form-control", style = "Width:130px" }
                                                                )
                        //.Value(Model.PhoneNumber.Number)
                )
                <span asp-validation-for="Phone" class="text-danger"></span>

            </div>
            <div class="form-group">
                <label asp-for="Ext" class="control-label"></label>
                <input asp-for="Ext" class="form-control" maxlength="4" style="width:75px" />
                @*<span asp-validation-for="Ext" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" style="width:300px" maxlength="255"/>
                @*<span asp-validation-for="Email" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Status" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.SelectedStatusId)
                                                                    //.Name("Status")
                                                                    .DataTextField("Text")
                                                                    .DataValueField("Value")
                                                                    .BindTo(Model.StatusList)
                                                                    .HtmlAttributes(new { @class = "form-control", style = "width: 130px;" })
                //.Value(Convert.ToString((int)Model.Status))

                )
                @*<span asp-validation-for="SelectedStatusId" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Organization" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.SelectedOrganizationId)
                                                                    .OptionLabel("--Please Select--")
                                                                    .DataTextField("Name")
                                                                    .DataValueField("EntityId")
                                                                    .BindTo(Model.OrganizationList)
                                                                    .HtmlAttributes(new { required = "required", validationmessage = "The Organization field is Required.", @class = "form-control", style = "width: 300px;" })

                )
                @*<span asp-validation-for="SelectedOrganizationId" class="text-danger"></span>*@

            </div>
            <div class="form-group">

                <label asp-for="FacilityType.Name" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.SelectedFacilityTypeId)
                                                                    .OptionLabel("--Please Select--")
                                                                    .DataTextField("Name")
                                                                    .DataValueField("EntityId")
                                                                    .BindTo(Model.FacilityTypeList)
                                                                    .HtmlAttributes(new { required = "required", validationmessage = "The FacilityType field is Required.", @class = "form-control", style = "width: 300px;" })

                )
                @*<span asp-validation-for="FacilityType" class="text-danger"></span>*@
            </div>

            <div class="form-group">
                <br />
                <input type="submit" value="Add" class="btn btn-primary" />
                &nbsp;&nbsp;
                <input type="button" value="Cancel" class="btn btn-primary" onclick="location.href = '@Url.Action("Index", "Facility")'" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Please help !!!

Thanks & Regards

Lalit Narayan

 

 

 

 

 

 

Ianko
Telerik team
 answered on 22 May 2019
3 answers
238 views

Hi, 

I follow https://docs.telerik.com/aspnet-core/getting-started/getting-started this instruction to create a new asp.net core 2.1 mvc project to test Telerik UI for Asp.net Core version 2019.1.220

I installed client resource manually following https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources#manual-installation . But the browsers console showed kendo js errors. I was sure I followed the instructions correctly, I don't know why it didn't work. 

I zipped the codes and attached the download url in this thread:

https://celiawestus2.blob.core.windows.net/publics/test/WebApplication1.7z 

Could anyone help to solve this problem?

Ivan Danchev
Telerik team
 answered on 21 May 2019
1 answer
824 views

Does the drop down list tag helper have events?  I can't seem to find documentation anywhere on events.  I want to take action when selected or changed.

<kendo-dropdownlist name="products" filter="FilterType.StartsWith"></kendo-dropdownlist>

 

The examples in the link below only cover the HTML Helper.

https://demos.telerik.com/aspnet-core/dropdownlist/events

Ivan Danchev
Telerik team
 answered on 21 May 2019
7 answers
351 views

Hi, 

I'm trying the Arc Gauge and its not show I'm getting kendoArcGauge is not a function, please see the attached screenshot

Claudia
Top achievements
Rank 1
 answered on 20 May 2019
2 answers
596 views

Hello,

Is there a way to open the toolbar's splitbutton popup to show the items when the splitbutton itself is clicked instead of the little arrow?

Thanks,

Shawn A.

Dimitar
Telerik team
 answered on 20 May 2019
1 answer
1.6K+ views

toolbar.ClientTemplat(string) seems to override all previous toolbar items.

So:

 

.ToolBar(toolbar => {
                        toolbar.Create(); /*toolbar.Save();*/
                        toolbar.Custom().Text("export").IconClass("k-icon k-i-table").HtmlAttributes(new { onclick = "approval_grid_export()" });

                        toolbar.ClientTemplate("etc");

                    })

seems to destroy the toolbar.Create() and toolbar.Custom().

Is there way to just add the ClientTemplate()?

Georgi
Telerik team
 answered on 17 May 2019
1 answer
131 views

Hello,

Is there a way to position the items in a Kendo Toolbar so that some buttons are located on the left-side of the toolbar and some on the right side with empty space between?

Thanks,

Shawn A.

Ianko
Telerik team
 answered on 17 May 2019
4 answers
347 views

Hello,

The column filter icons on my grid are interfering with the column header texts.  Sometimes they are right on top of the texts (see attached).  How do I position these icons so that they are on the bottom right corner of the column header and away from the header text?

Thanks,

Shawn A.

Tsvetomir
Telerik team
 answered on 17 May 2019
1 answer
9.5K+ views

I am trying to get a value and use it to change a label.
All the examples I have found in documentation include only the html helper version
I am using the tag helpers and can’t figure out how to do it.
I tried this:

<script>
         
        function onSelect(e) {
            alert(e.item.Text);
        }
    </script>

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

But it is not working.


John
Top achievements
Rank 1
 answered on 16 May 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?