I am using the code below which works to show that icon but at a cost of causing another read action on the controller.  How can we show the sort icon in a column by default, indicating to the user what the current sort is?

var kendoGrid = $("#grid").data('kendoGrid');
var dsSort = [];
dsSort.push({ field: "ProductRoot.Name", dir: "asc" });        
kendoGrid.dataSource.sort(dsSort); 

The grid definition in asp.net mvc core chtml

index.cshtml
@(Html.Kendo().Grid<COSalesDto>()

.Name("grid")

.Columns(columns => { columns.Bound(p => p.CatalogNumber); columns.Bound(p => p.UsageCode).Width(150); })

Pageable() .Sortable() .Filterable()

.DataSource(dataSource => dataSource

       .Ajax() .PageSize(20)

     .Read(read => read.Action("ChangeOrder_Read", "Naco"))

).Deferred() )  

Here is my data returned from ajax call

{ "Data": [ { "CatalogNumber": "Catalog 12345", "UsageCode": "Usage Code 1" }, { "CatalogNumber": "Catalog 8234758", "UsageCode": "Usage Code 2" } ], "Total": 0, "AggregateResults": null, "Errors": null }

all events are triggering on grid, but no data binding happening.  Here is my entry in startup

Startup.cs

services.AddControllersWithViews(options => { options.Filters.Add(new AbpAutoValidateAntiforgeryTokenAttribute()); })

.AddJsonOptions(options => { options.JsonSerializerOptions.PropertyNameCaseInsensitive = true; options.JsonSerializerOptions.PropertyNamingPolicy = null; }) 

Any help greatly appreciated.
Thanks V

I have a kendo timeline in a razor page defined in a Razor Class Library.

it all works as expected when the RCL is referenced from an AspNet Core MVC project but nothing is generated or shown when referenced from a Razor Pages project. 

Am I missing something ?

NB: I am using one .cshtml file to render the page

Hi

I am implementing the FileManager, but I have come across a problem. When the server side upload fails, this doesn't raise the Error event, instead controls swallows the error and dumps it to the console. If there server side fails, I would like to alert the user and give more details feedback, how could I accomplish this?

In the code below I have set the error method and the action method straight up throws an exception, i also tried this just returning StatusCode(500)

<div>
    @(Html.Kendo().FileManager()
        .Name("filemanager")
        .DataSource(ds =>
        {
            ds.ServerFiltering(true);
            ds.Read(operation => operation
                .Type(HttpVerbs.Post)
                .Action("ReadDocument", "Home")
                );
            ds.Destroy(operation => operation
                .Type(HttpVerbs.Post)
                .Action("DestroyDocument", "Home")
                );
            ds.Create(operation => operation
                .Type(HttpVerbs.Post)
                .Action("CreateDocument", "Home")
                );
            ds.Update(operation => operation
                .Type(HttpVerbs.Post)
                .Action("UpdateDocument", "Home")
                );
        })
        .UploadUrl("Upload", "Home")

       .Events(e => e
            .Error("onError")
        )
        )
</div>


<script>
    function onError(e) {
        console.log("there is an error");
        debugger;
      
    };
    function onOpen(e) {
        debugger;
    };
</script>

---controller---

[HttpPost]
        public IActionResult Upload(IFormFile file, string path)
        {
            throw new NotImplementedException("error");
        }

Ross

Hello All,

I wish to seek your guidance on this question.  How do we post strong type to the controller? More specifically, can we post the selected data-item to the controller?

Here is the sample form:

Here is the controller:

I am able to get the selected ID to bind to the selectedOptions variable but no luck with the data-item object. 

Thank you for your time. 

I have seen a number of Threads on this but none that fully answers what I am trying to achieve. I am after the following :

ToolBar(toolbar =>
                                    {
                                        toolbar.Create().Text("New Order");
                                        toolbar.Custom()
                                                . call an action method i.e "<a class='k-button' href='" + Url.Action("Submit", "myController")+"'"+">Submit</a>")
                                                .Text("Submit").IconClass("k-icon k-i-cancel");

                                    })

The answer on a previous tread :   toolbar.ClientTemplate("<a class='k-button' href='" + Url.Action("Submit", "myController")+"'"+">Submit</a>");

Does not tell me how I can add the toolbar.Create().Text("New Order"); to the same template.

I also want to pass to the submit action the current Datasource request information i.e filtering etc so that I can refresh the grid on finish.

I am attempting to set up a Grid in ASP.Net Core 2.1 using Razor Pages.  This grid could potentially load thousands of records so I want to only load those that I need and use ajax server side sorting/grouping etc.  I have searched around and had trouble getting this to work as I like, which is completely inside the PageModel.  Using Razor Pages it is very easy to load all the data locally, but am I correct that you can not load the data remotely Ajax style without setting it up in a separate service layer?  I can set up my own remote endpoints if needed, but am confused as to why the Grid can not treat the page handlers of the PageModel as usable endpoints as long as they return the appropriate JSON.  If it can do this, could I be pointed to a simple sample?   Thanks.

Hi,

I followed your tutorial on "Copying Client Side Resources" (https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources).  I'm using the last option, using NPM and webpack.  I'm also including vanilla Bootstrap 4 in my project.

It seems that the bundled version of jQuery that is included in the generated "bundle.js" file from your instructions isn't working with Bootstrap 4.  My Bootstrap navbar is now broken (none of the Javascript components work properly -- for example, responsive navbar won't expand).  When I explicitly include jQuery (again) in my layout, the navbar works but all of my Kendo components are now broken.

How can I reconcile this?  In what order should I place my CSS and JS?  How can I use jQuery from the bundle with my project?

Here is my code snippet.

Thanks,
Brian

Hello,

I have the following grid and the Read method is working fine but when I try to delete or edit a record the button doesn't call the method from the controller.

Can you please advise ?

Here is the .cshtml

<kendo-grid name="OverTime">
    <toolbar>
        <toolbar-button name="create" text="Add new Overtime"></toolbar-button>
    </toolbar>
    <columns>
        <column field="Id" title="ID" />
        <column field="RecordDate" format="{0:MM/dd/yyyy}" title="Record Date" />
        <column field="TimeFrom" title="Time From" />
        <column field="TimeTo" title="Time To" />
        <column field="NumberOfHours" title="Number of hours" />
        <column field="OvertimeReason" title="Overtime Reason" />
        <column>
            <commands>
                <column-command text="delete" name="destroy"></column-command>
                <column-command text="update" name="update"></column-command>
            </commands>
        </column>
    </columns>
    <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
        <schema>
            <model id="Id">
                <fields>
                    <field name="RecordDate" type="date"   />
                    <field name="TimeFrom" type="time" />
                    <field name="TimeTo" type="time" />
                    <field name="NumberOfHours" type="number" />
                    <field name="OvertimeReason" type="string" />
                </fields>
            </model>
        </schema>
        <transport>
            <read url="@Url.Action("Read_Overtime","OverTimes",  new { id = ViewContext.RouteData.Values["Id"] })" />
            <destroy url="@Url.Action("Destroy_Overtime","OverTimes")" />
            <update url="@Url.Action("Update_Overtime","OverTimes")" />
        </transport>
    </datasource>
    <groupable enabled="true" />
    <sortable enabled="true" />
    <pageable button-count="5" refresh="true" />
    <filterable enabled="true" />
    <editable enabled="true" />
    <toolbar>
    </toolbar>
</kendo-grid>

Here is the update and delete method from the controller.

        [HttpPost]
        public ActionResult Destroy_Overtime ([DataSourceRequest]DataSourceRequest request, OverTimeViewModel overTime)
        {
            try
            {
                OverTime over = _context.OverTime.Find(overTime.Id);
                if (over == null)
                {
                    return Json("Employee Not Found");
                }

                _context.OverTime.Remove(over);
                _context.SaveChanges();
                return Json(_context.OverTime.ToList());
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

        [HttpPost]
        public ActionResult Update_Overtime([DataSourceRequest]DataSourceRequest request, OverTime overTime)
        {

            try
            {
                if(ModelState.IsValid)
                {
                    
                    _context.Entry(overTime).State = EntityState.Modified;
                    _context.SaveChanges();
                    return Json(new[] { overTime }.ToDataSourceResult(request, ModelState));
                }
                else
                {
                    return Json(_context.OverTime.ToList());
                }
            }
            catch(Exception ex)
            {
                return Json(ex.Message);
            }
        }

Problem :

Destroy doesn't go to the controller, What am i doing wrong?

Read function works fine.

Grid :

Controller :