Hey guys,

I'm actually new to WebApi and I have a Kendo Grid with the WebApi() option activated:

@(Html.Kendo().Grid<OfferType>()
              .Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.Name);
                  columns.Command(command => { command.Edit(); });
              })
              .DataSource(dataSource =>
                  dataSource
                    .WebApi()
                    .Model(model =>
                    {
                        model.Id(p => p.ID);
                    })
                    .Events(events => events.Error("error_handler"))
                    .Read(read => read.Url("https://localhost:44362/api/OfferType"))
                    .Update(update => update.Url("https://localhost:44362/api/OfferType/{0}"))
              )
              .Pageable()
              .Sortable()
	)

In your demo für .NET Core you're using the view inside a webapi-project. This is not my case. I'm using the grid in a project which has to be connected to a webapi outside the project/solution. Therefore I have to use "read => read.Url("xyz")" (I think) to get connection to my outside hosted webapi. Because via "read.Action(x,y)" I can't refer to other projects/solutions and urls.

The controller of my webapi is looking like that:

    [Route("api/[controller]")]
    [ApiController]
    public class OfferTypeController : ControllerBase
    {
        private readonly FrueheHilfenContext _context;

        public OfferTypeController(FrueheHilfenContext context)
        {
            _context = context;
        }



        [HttpGet]
        [EnableCors("AllowLocal")]
        public DataSourceResult Get([DataSourceRequest] DataSourceRequest request)
        {
            List<OfferType> returnList = new List<OfferType>();
            using (_context)
            {
                returnList = _context.OfferTypes.ToList();
            }
            
            return returnList.ToDataSourceResult(request);
        }

        // PUT api/<OfferTypeController>/5
        [HttpPut("{id}")]
        [EnableCors("AllowLocal")]
        public IActionResult Put(int id, OfferType offerType)
        {
            if (ModelState.IsValid && id == offerType.ID)
            {
                try
                {
                    using (_context)
                    {
                        _context.Entry(offerType).State = EntityState.Modified;
                        _context.SaveChanges();
                    }
                }
                catch (DbUpdateConcurrencyException)
                {
                    return new NotFoundResult();
                }

                return new StatusCodeResult(200);
            }
            else
            {
                return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
            }
        }
    }

Getting data is working like expected. But I have problems to update my data via put. The console is giving me the errorcode 415 "unsupported media type". When debugging my webapi project the put actions is never been called. So I think there is something wrong with my setup of the grid.

Edit: I know why I'm getting the 415 error (see my answer in the comments). I found out that when I expect a datasourcerequest as an argument in the put-action (so a "[DataSourceRequest] DataSourceRequest offerType" instead of a "OfferType offerType") the action is successfully called without errors. But with the datasourcerequest there aren't any infos about my updated object in the grid. So my grid isn't sending the updated object but the metadata of the grid.

Is anybody seeing my mistake?

Hi,

I use EditorTemplates in Grids to change entries in cells. By pressing the check-icon a function is called.

It works fine as long as the grid has set:

.Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))

If the MultiSelect-Mode is not set, the click event on the span is not detected. How can I implement this for Single-Selection Mode?

And is it possible to generate a generic EditorTemplate to be used on different grids?

Thanks
Christine

--------------------------------------

Here the sources:

The grid:

<script id="suppress-text-template" type="text/x-kendo-template">
    <div id="suppress-text-container" style="height:100%;width:100%;">
       @(Html.Kendo().Grid<collact.admin.Models.Ticket.TextItemModel>()
            .Name("SuppressTextGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.EntryId).Editable("returnFalse");
                columns.Bound(p => p.Entry).Title("Texteintrag").EditorTemplateName("Ticket/GridSuppressEdit");
            })
            .HtmlAttributes(new { style = "height: 100%;" })
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Events(e => e.Edit("sigGridSuppress_edit"))
            .Scrollable(scr => scr.Height(430))
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.EntryId))
            .Read(read => read.Action("ReadListData", "Ticket"))
                )
            .Filterable()
            .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))
            .PersistSelection(true)
            .Resizable(resize => resize.Columns(true))
            .ToClientTemplate()
        )
    </div>
</script>

The script setting the text of the Textbox in the EditorTemplate:

function sigGridSuppress_edit(e) {
        var editForm = e.container;
        var model = e.model;

        editForm.find("#EntryId_entryid_edit").val(model.EntryId);
        editForm.find("#Entry_entrysuppress_edit").val(model.Entry);
    }

The EditorTemplate:

Hello,

we're evaluating Kendo UI and we are planning to convert an existing application which creates every form it uses from a configuration info in a database.

Doing this in a razor file creates a unreadable code. So the plan is to create the form elements in code behind. I figured out an idea, but I'm not sure if this is the best (or correct) way to do it.

The markup:

@page
@model MyModel
@{
    ViewData["Title"] = "BuildSomethingWonderfulInCodeBehind";
}

...

    @(Model.Build(Html))

And the code behind:

...
  public class MyModel: PageModel
    {
        public IHtmlContent Build(IHtmlHelper<MyModel> html)
        {
            StringBuilder result = new();

            GetDataSourceWithFormsInfo().ForEach(r =>
            {
                result.Append(
                    html.Kendo()
                        .TextArea()
                        .Name(r.Name)
                        .MaxLength(r.Length)
                        .ToHtmlString());
            });
            return html.Raw(result.ToString());
        }

        public void OnGet()
        {
        }
      
                   // in real world the configuration commes from the db 
         private static List<TextAreaConfig> GetDataSourceWithFormsInfo()
            => new()
            {
                new TextAreaConfig("name", 20),
                new TextAreaConfig("surname", 30),
                new TextAreaConfig("street", 40),
                new TextAreaConfig("town", 50),
            };

        privateclassTextAreaConfig
        {
            public readonly int Length;
            public readonly string Name;

            public TextAreaConfig(string name, int length)
            {
                Name = name;
                Length = length;
            }
        }
    }
....
  
              

This is a working test fragment just to show the principle. It creates 4 textareas. So it looks that this is a possible path to port the existing app to Kendo UI.

But is the correct way to solve this requirement?

Hello, I have a page with a Kendo Grid where every row has a custom button to open a Kendo Window.

Like this:

When user click exit button opens this Kendo Window:

This is my current code:

And this is button click:

I want to allow user to click multiple times in exit button and open different kendo windows but when user click in exit button I open a new windows with same id and replace previous one.

Is there any way to implement this behaviour(allow multi kendo windows)?

BR, Miguel Machado

We see a lot of samples in the demo pages.

However, we would like to see them in action and download the fully functional demo on localhost. 

On Git I didn't found the samples. Is there, and, if is, where, the sources for ASP.NET compoentnts.

I wonder especially for a sample example of DataGrid, like this one https://demos.telerik.com/aspnet-core/grid/editing-custom

.NET 5 (CORE) for RazorPages, by example

Hello,

I use a Tabstrip in a Grid Editor Template and want to load the the Content with LoadContentFrom and Parameters like:

The Problem to have aTabstrip in the grid template is that I cannot access the model values:
new { mitgliedid = Model.Mitglied_ID, aktid = Model.Akt_ID }

How can I load the Content of a tab with Parameters on the Client (reload?) or how to pass the two Parameters for loading if the tab is klicked
(I think it must be on the Client with javascript)

robert

Hey guys,

I'm using the PanelBar for side navigation. For describing my issue the following simple setup should work too.

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {
                        panelbar.Add().Text("Home").Action("Index", "Home");
                        panelbar.Add().Text("Offers")
                             .Items(offers=>
                             {
                                 offers.Add().Text("Show").Action("Index", "Offers");
                             });
                    })
                )

Each item in the PanelBar is connected to an action. When loading "/Home/Index" the selected item in the PanelBar after loading the page is the first item "Home". It works like expected.

But when loading "/Offers/Index", there will be nothing selected in the PanelBar. So in the end only the items in the highest item level are selected by it's action. You can see it when putting the "Offers/Index" directly under "Home/Index".

panelbar.Add().Text("Home").Action("Index", "Home");
panelbar.Add().Text("Offers").Action("Index", "Offers");

Currently I'm using "2021.2.616". I know from a previous project that this behavior wasn't yet in version "2021.1.119". There the subitems were also selected if the current url matched the href of the item.

Maybe a bug?