I have a Kendo Grid and would like to bind to the server-side WebAPI call result after the postback. The Grid result is based upon the selected dropdown value when the submit button is clicked. I am able to invoke the button click event, bind the webapi result to the Input.PermitList JSON result  attribute. But the Grid is still empty. Anything I might have missed? Please suggest

Front-end code

 <form method="post">
    <h2>Permits</h2>
    <div>
        <label asp-for="Input.PermitCategoryList" class="control-label"></label>
        <kendo-dropdownlist name="categories" for="@Model.Input.PermitCategory"
                            option-label="Select permit Category..."
                            class="form-control"
                            bind-to="@(new SelectList(@Model.Input.PermitCategoryList,"Alias","Name"))"></kendo-dropdownlist>
        <span asp-validation-for="Input.PermitCategoryList" class="text-danger"></span>
    </div>
    <div>
        <button name="btnGetPermit" icon="filter" type="submit" asp-page-handler="PermitList" class="k-button">Get Permits</button>
    </div>

    <div>
        <h4>Permits</h4>
        <kendo-grid name="grid" height="550" datasource-id="dataSource">
            <groupable enabled="true" />
            <sortable enabled="true" />
            <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
            </pageable>
            <filterable enabled="true" />
            <columns>
                <column field="Id" title="Permit Id" />
                <column field="Class" title="Permit Class" />
                <column field="Name" title="Permit Name" />
                <column field="Type" title="Permit Type" />
                <column field="Fee" title="Permit Fee" />
            </columns>
        </kendo-grid>
    </div>

    <script>
    var data = @LITSPermitting.Admin.Extensions.JavaScriptConverter.SerializeObject(Model.Input.PermitList);

    var dataSource = new kendo.data.DataSource({
        data: data,
        pageSize:5
    })
    </script>
</form>

Back-end Button click event

        [BindProperty]
        public InputModel Input { get; set; }

        public class InputModel
        {
            [Required]
            [Display(Name = "Permit Category")]
            public List<PermitCategoryDto> PermitCategoryList { get; set; }

            public string PermitCategory { get; set; }

            public JsonResult PermitList { get; set; }
        }

        /// <summary>
        /// Get a list of Permits based upon the category request
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        public async Task<ActionResult> OnPostPermitListAsync([DataSourceRequest]DataSourceRequest request)
        {
            await HttpContext.Session.LoadAsync();
            Input.PermitCategoryList = HttpContext.Session.Get<List<PermitCategoryDto>>(Constants.PERMIT_CATEGORY_LIST);

            //tp is the temporary permit type
            string requestUri = Constants.PERMIT_CATEGORY_REQUEST_URI + Input.PermitCategory;

            _response = await _client.GetAsync(requestUri);
            if (_response.IsSuccessStatusCode)
            {
                //Storing the response details recieved from web api     
                var result = _response.Content.ReadAsStringAsync().Result;

                //Deserializing the response recieved from web api and storing into the Permit list    
                var drResult = JsonConvert.DeserializeObject<List<PermitDto>>(result);

                Input.PermitList=new JsonResult(drResult.ToDataSourceResult(request)); 
                return Input.PermitList;
            }
            else
            {
                return NotFound();
            }

        }

Is there an documentation on how to do some custom validation? Or even better, know how to handle an exception being returned? Such as, "A file with that name already exists"?

Right now if I just throw an error in my action method, it just shows that is was unsuccessful but I cannot give it a reason for why it failed on the async save.

Hi,

Is it possible to use tag helpers with model validation using Kendo's validation framework?

C#

HTML

JS

I can't seem to get the required validation to appear.  The form posts even if the control is blank.  Can anyone give me a working example of model validation with tag helpers in .NET Core?

Thanks!

Hello everybody!

I would like to make my helper. In UI for MVC It looked like this

public static WindowBuilder KendoWindow(this HtmlHelper helper, string name, string titleResKey, string dataRequestUrl = null, int? minWidth = null, int? minHeight = null, int? maxWidth = null, int? maxHeight = null, string onRefreshEvent = null)
        {
            var attrib = new Dictionary<string, object>();

            var window = helper.Kendo()
            .Window()
            .Name(name)
            .Title(titleResKey)
            .Draggable()
            .Actions(action => action.Close())
            .Animation(true)
            .Events(x => x.Activate("onKendoWindowActivate").Close("onKendoWindowClose"))
            .Modal(true)
            .Visible(false).AutoFocus(true);

return window;

}

But in the version for Net Core I do not have a reference helper.Kendo()

How can I do this now? Thank you

Hi,

In my current implementation I have a page that is set up as stated in my previous post:
https://www.telerik.com/forums/autobind(false)-not-adding-a-new-row-when-grid-is-empty 

The above implementation sets up my datasource in the initialization of the grid and populates the grid with the data from the API.

What am I trying to achieve?

I am looking for a way to design 2 sets of datasources and apply the selected datasource to the grid based on a button click.

My current attempt looks like this:

@(Html.Kendo()
                .Grid<CoreMVC.ViewModels.SysuserViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                   ...

                })
                    .ToolBar(toolbar =>
                    {
                        toolbar.Create();
                        toolbar.Save();
             })
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Filterable(filterable => filterable
                            .Extra(false)
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts with")
                                    .EndsWith("Ends with")
                                    .IsEqualTo("Is equal to")
                                    .IsNotEqualTo("Is not equal to")
                                    .Contains("Contains")
                                    .DoesNotContain("Doesn't contain")
                                ))
                            )
                .Pageable()
                .Navigatable()
                .ColumnMenu()
                .AutoBind(false)
                .Sortable()
                .Editable()
                .Resizable(resizable => resizable.Columns(true))
                .Scrollable(scr => scr.Height(800))
                .Reorderable(reorderable => reorderable.Columns(true))
                .DataSource("dataSource1")
)

@(Html.Kendo().DataSource<CoreMVC.ViewModels.SysuserViewModel>()
        .Name("dataSource1")
        .Ajax(dataSource => dataSource
           .PageSize(10)
           .Model(m =>
           {
               m.Id(p => p.userid);
               m.Field(p => p.role).DefaultValue(ViewData["defaultRole"] as CoreMVC.ViewModels.RoleViewModel);
           })

           //.Events(ev => ev

           //.Error("error_handler")
           //.Push("onPush")
           //.Sync("sync_handler")

           //)
           .Read(read => read
           .Url(Base.APIHostAddress + "/api/user/getall")
           .Type(HttpVerbs.Get)
           )
        )
)

This datasource successfully hits my API and returns JSON but the grid is not populated and there is no error message. Is this because I am not specifying a DataType as "json" on the datasource? If so, I am unable to find the correct place to state the datatype with this datasource.

The return of the API looks like this: "return Json(userList);" where userList isa  List<userDTO>.

I have commented out the events, but i am also receiving errors on the events saying that the methods cannot be found even though they are present and work when I use the implementation from the forum post i created stated above.

Thank you in advance!

Right now it the ColumnMenu() is enabled for a grid by default it shows:

• Sort Ascending
• Sort Descending
• Columns
• Filter

Is it possible to add custom items to this list?

Hello,

we configured our grid to be filterable by a filter row. Filter row support autocomplete, however the autocomplete's default filter operator is 'startswith'. Our requirement is, that the autocomplete's filter operator corresponds to the operator selected in the operator-dropdownlist (next to the input-field). I am trying to fullfill that requirement by adding a change-listener to the operator-dropdownlist, which does not work, because the change-event is not being triggered.

Here is my javascript-code for that purpose:

Any ideas why?

Thanks in advance & best regards,

Dima.

I have an autocomplete on a form. We are using jquery validation and I have discovered an issue that I don't know if it is kendo issue, jquery issue or my application issue.

The autocomplete field has a server validation and the form can load having the autocomplete field invalid. I have noticed that after the form is displayed in the browser the autocomplete is like this

Please noticed the input-validation-error on the span. The jquery is based on this and after I provide a valid value the jquery validation will remove all the dom structure because it does something like $('span.input-validation-error').text('').

Is the input-validation-error attached to autocomplete done by the .net core framework or done by the telerik framework? Can it be removed?

I have a grid that successfully inserts and deletes, however, after I perform an insert the inline edit remains open. If I hit cancel it does not display the new data; I have to refresh the page to see it in the grid.

Here is my code:

Hi,

How would one show the value of a cell in a popup editor template without making it editable? In other words it's just text, not a disabled widgit.

Thanks!