Telerik Forums
UI for ASP.NET Core Forum
1 answer
633 views

I would like to make the splitter bend to my will. Can you give me an example on how to do this?:

  • Make Size relative to the host (instead of hard-coded to 440px).  I'd like it to be .25% of the parent/host.
  • Make the bar between the panes wider so its easier to resize it.
  • Turn off the button that closes/opens the pane.  (I don't want this pane to go away)
  • Set a minimum width on the left pane so it must be at least 100px.
  • Change the color of the bar when it is select/not selected. and/or set the background color for ALL Kendo controls.
@(Html.Kendo().Splitter()
          .Name("splitter")
          .HtmlAttributes(new { id = "vertical" })
          .Panes(panes =>
          {
              panes.Add().Collapsible(true).HtmlAttributes(new { id = "vertical" }).Size("440px").Content(
                @<div>
                ... content
                </div>);
              panes.Add().Content(
                @<div>
                ... content
                </div>);
          })
Dimitar
Telerik team
 answered on 08 Apr 2019
19 answers
1.5K+ views

Hi, 

I am trying to find a suitable example of using a Kendo UI Grid to display data from a

Microsoft.AspNetCore.Mvc.RazorPages.PageModel

 (v 2.0.1.0)

I can already successfully render to a native html <table> without problem so I know I have no errors in fetching and displaying data without Kendo Grid.

I have tried so far - without success :

1) http://demos.telerik.com/aspnet-core/grid/local-data-binding

2) http://demos.telerik.com/aspnet-core/grid/remote-data-binding

When the page loads I see no client-side js errors.  The grid is simply no rendered.

The IndexModel class serves as the Model for the Razor Page.

It has a simple 

public async Task OnGetAsync(int? id)

 

This sets a Public Property to expose a collection/list of a type.

So for example if I use Kendo grid with a local datasource like so:

 

@(Html.Kendo().Grid(Model.Practice.Practices)
              .Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(c => c.Id).Width(140);
                  columns.Bound(c => c.Name).Width(190);
                  columns.Bound(c => c.PracticeAddresses[0].Address1);
                  columns.Bound(c => c.PracticeAddresses[0].Address2);
                  columns.Bound(c => c.PracticeAddresses[0].PostCode);
              })
              .HtmlAttributes(new { style = "height: 380px;" })
              .Scrollable()
              .Groupable()
              .Sortable()
          .Pageable()
          .Sortable()
          .Scrollable(scr=>scr.Height(430))
          .Filterable()
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(20)
              .ServerOperation(true)
          )
    )

The page shows no grid.

 

Thanks in advance for any suggestions...

 

[using 

Microsoft Visual Studio Enterprise 2017 
Version 15.5.1
VisualStudio.15.Release/15.5.1+27130.2003
Microsoft .NET Framework
Version 4.7.02053

]

 

 

Konstantin Dikov
Telerik team
 answered on 08 Apr 2019
1 answer
1.5K+ views

I am new to kendo and I am in a situation where I have a kendo grid bound to a data source and I need to add a custom filter to it. 

The filter should have a dropdownlist that has distinct values from the column "Issuer".  How can I achieve this without making another server call to get distinct Issuer values. I want to bind the dropdownlist to the existing data source which already has all the data. Please suggest.

Here's my code:

$("#DivGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "/DataView/GetData",
                            dataType: "json"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                            else if (options) {
                                var kendoString = kendo.stringify(options);
                                return { models: kendoString };
                            }
                        }
                    },
                    pageSize: 10,
                    schema: {
                        model: {
                            tranId: "id",
                            fields: {
                                tranId: { editable: false, nullable: false },
                                issuer: { editable: false },

                                dateAdded: { editable: false, type: "date" }                            

                            }
                        }
                    }
                },
                filterable: true,
                columns: [              
                    {

                        field: "tranId",
                        title: "TranId",
                        width: "30px",
                    },
                    {
                        field: "issuer",
                        title: "Issuer",
                        width: "50px",
                    },
                    {
                        field: "dateAdded",
                        title: "Created Date",
                        format: "{0:MM-dd-yyyy hh:mm:ss}",
                        width: "40px",
                    },
                ],
                dataBound: function (e) {
                    //something
                },
                pageable: {
                    alwaysVisible: false,
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 3
                },              
            });

Veselin Tsvetanov
Telerik team
 answered on 08 Apr 2019
3 answers
1.3K+ views

I have a problem trying to handle server message error on client side after a read event on grid component

my grid is setting up:

 @(Html.Kendo().Grid<myModel>().GetPageableGrid(gridName)
        .Name(gridName)
        .AutoBind(true)
        .DataSource(dataSource => dataSource
            .Custom()
            .Type("aspnetmvc-ajax")
            .PageSize(10)
            .ServerPaging(true)
            .ServerSorting(true)
            .ServerFiltering(true)
            .Transport(transport => transport
                    .Read(read => read.Action("search", "test"))
                    .Destroy(e => e.Action("delete", "test"))
            )
            .Schema(schema => schema
                .Errors("Errors")
                .Model(model =>
                {
                    model.Id(p => p.modelID);
                })
            )
            .Events(events =>
            {
                events.Error("OnRequestError");
                events.RequestEnd("OnRequestEnd");
            })
        ) ....

the javascript function:

function OnRequestError(e) {
        alert(e.errors); // show 'undefined'
}

in the controller:

DataSourceResult result = new DataSourceResult
{
    Errors = new { message }
};
return new JsonResult(result);

json response look like:

{"Data":null,"Total":0,"AggregateResults":null,"Errors":{"message":"The method or operation is not implemented."}}

I cant reach errors property on OnRequestError, I tryed differents aproacches but not results yet it is alway 'undefined'

I apreciate any help.

Georgi
Telerik team
 answered on 08 Apr 2019
1 answer
344 views

Hey,

 

so what i would like to achieve is to simply add a column to the grid, which has a button in it acting as a link. However the link needs 3 parameters to be passed to the url, which i need to take from the data source. How can i achieve that?

Used to do it like this within a table:

 

<a class="btn btn-light border" role="button" asp-controller="X" asp-action="Create" asp-route-id="@j.Name" asp-route-jId="@j.JId" asp-route-mId="j.MId">Open</a>

 

Thank you!

 

Regards,

Peter

Viktor Tachev
Telerik team
 answered on 08 Apr 2019
1 answer
1.2K+ views

Hello !

I'm testing the latest version of the Grid (2019.1.220, VS 2017, asp.net core 2.2, razor pages).

I'm using the Ajax Binding, and everything is working fine when using IISExpress. When I switch to using a local instance of IIS (version 10 on a windows 10-1803), I get a 404 error in the chrome console with the following message:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/Index?handler=Read

I've tried the [Web Resources Troubleshooting] page, specifically the section discussing 404, and added the telerik webresource handler to my web.config as follows:

<add name="Telerik.Web.UI.WebResource" path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource"/>

the full web.config is as follow:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
        <add name="Telerik.Web.UI.WebResource" path="Telerik.Web.UI.WebResource.axd" verb="*"    type="Telerik.Web.UI.WebResource"/>
      </handlers>
      <aspNetCore processPath="bin\IISSupport\VSIISExeLauncher.exe" arguments="-argFile IISExeLauncherArgs.txt" stdoutLogEnabled="false">
        <environmentVariables />
      </aspNetCore>
    </system.webServer>
  </location>
</configuration>

Any ideas on why I'm still getting the same error ?

Thanks !

Georgi
Telerik team
 answered on 05 Apr 2019
3 answers
89 views

I have a multi-step View.  In the first Partial I want to capture the id of a Patient from a Kendo Grid.  I need to retain that value into the @Model then move to the second Partial.  In this second Partial I then capture scheduling information.  No record is persisted until I have data from both Partial Views. 

Questions:

  • I am able to successfully capture the data in the function (pictured) but I need that value to be persisted back to the Model.  How do I do that?
  • Help me understand the script hierarchy.  
    •  

 

Joel
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 04 Apr 2019
9 answers
702 views

hi

i noticed the Checkbox is not working in the .net core Grid (inline edit) mode. i can see that in your demo itself https://demos.telerik.com/aspnet-core/grid/editing-inline

is this a known issue are there any work arounds

 

Regards,

Rubesh

 

 

Viktor Tachev
Telerik team
 answered on 04 Apr 2019
3 answers
394 views

Hi, 

In everything I've read in both the docs and the demos you use a separate controller for the Read and ValueMapper functions associated with the virtualized combobox. The code below is taken from teh virtualizationcontroller.cs in your demo. I am trying to use Razor exclusively and … in theory … I shouldn't need a separate controller class. However, the page I am trying to use the combobox on is the index.cshtml  under areas\identity\pages\account\Manage.

The markup, taken from you demo, for the combo is as follows:

 @(Html.Kendo().ComboBox()
          .Name("orders")
          .DataTextField("ShipName")
          .DataValueField("OrderID")
          .HtmlAttributes(new { style = "width:100%" })
          .Template("#= OrderID # | For: #= ShipName #, #= ShipCountry #")
          .Height(290)
          .DataSource(source => {
              source.Ajax()
                  .PageSize(80)
                  .Read("Virtualization_Read", "ComboBox");
          })
          .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
    )


Please notice the .Read("Virtualization_Read", "ComboBox"). It's my understanding that "ComboBox" is the controller. How would I point/route that to the razor cshtml.cs file? Right now, if I put the "controller" functions in the .cshtml.cs file they never get called and the combo remains empty. I assume this is because it's not in a controller.

Any guidance or samples would be great!

Thanks … Ed

 

        public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetOrders().ToDataSourceResult(request));
        }
        public ActionResult Orders_ValueMapper(int[] values)
        {
            var indices = new List<int>();
            if (values != null && values.Any())
            {
                var index = 0;
                foreach (var order in GetOrders())
                {
                    if (values.Contains(order.OrderID))
                    {
                        indices.Add(index);
                    }
                    index += 1;
                }
            }
            return Json(indices);
        }
        private IEnumerable<OrderViewModel> GetOrders()
        {
            using (var northwind = GetContext())
            {
                return northwind.Orders.Select(order => new OrderViewModel
                {
                    ContactName = order.Customer.ContactName,
                    Freight = order.Freight,
                    OrderDate = order.OrderDate,
                    ShippedDate = order.ShippedDate,
                    OrderID = order.OrderID,
                    ShipAddress = order.ShipAddress,
                    ShipCountry = order.ShipCountry,
                    ShipName = order.ShipName,
                    ShipCity = order.ShipCity,
                    EmployeeID = order.EmployeeID,
                    CustomerID = order.CustomerID
                }).ToList();
            }
        }
    }

Dimitar
Telerik team
 answered on 04 Apr 2019
3 answers
129 views
I have an inCell Edit grid that has a bound field and a bound checkbox.   When in edit mode, if a change is made to the textbox I want to test the value.   If length(textbox) > 0, set checkbox true, if length(textbox)=0, set checkbox false.    Is this possible?
Tsvetomir
Telerik team
 answered on 04 Apr 2019
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?