Questions on UI for ASP.NET MVC Forum

8 answers

876 views

Trouble populating Grid from Web API JSON

Hi

I'm having trouble binding my grid to my Web API, the grid is always empty. Is there something I may have missed.

My Web API returns the following JSON:

{"Contacts":[{"Id":1,"Salutation":"Mr","FirstName":"David","LastName":"","Address1":"10 High Street","City":"Birmingham","Postcode":"B76 1FP"},{"Id":2,"Salutation":"Mr","FirstName":"Fred","LastName":"Bloggs","Address1":"5 Birmingham Road","City":"Solihull","Postcode":"B26 1EW"}]}

I have a Kendo Grid setup like this:

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

dataType: "json",

url: "http://localhost:54604/api/Contacts"

}

},

pageSize: 20,

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number"},

Salutation: { type: "string"},

FirstName: { type: "string" },

LastName: { type: "string" },

Address1: { type: "string" },

City: { type: "string" },

Postcode: { type: "string" }

}

},

data: "Contacts"

}

},

height: 550,

filterable: true,

sortable: true,

pageable: true,

columns: [

{

field: "Salutation"

},

{

field: "FirstName",

title: "First Name"

},

{

field: "LastName",

title: "Last Name"

},

{

field: "Address1",

title: "Address 1"

},

{

field: "City"

},

{

field: "Postcode"

}

]

});

Grid

answered on 03 Apr 2020

8 answers

1.6K+ views

Kendo UI Grid rendering from JSON data not working

Hello,

I have a problem with my kendo UI Grid visualize the JSON content.

Here is my code from the view:

@(Html.Kendo().Grid<Models.SellerModel>()
.Name("Sales")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetSales", "Beheer"))
.Model(model => model.Id(p => p.Id))
)
.Columns(columns =>
{
columns.Bound(o => o.Id).Width(60);
columns.Bound(o => o.Firstname).Width(90);
columns.Bound(o => o.Surename).Width(220);
columns.Bound(o => o.Emailaddress).Width(280);
columns.Bound(o => o.Mobile).Width(110);
columns.Bound(o => o.RegionId).Width(110);
columns.Bound(o => o.Deleted).Width(110);
})
)

This is the JSON:
[{"Id":1,"Surname":"blablabla","Firstname":"Kris","Mobile":"545645644654","Emailaddress":"test@hotmail.com","RegionId":3,"Deleted":false}]

But i searched on the forum and i changed to this
{data:[{'Id':1,'Surname':'blablabla','Firstname':'Kris','Mobile':'545645644654','Emailaddress':'test@hotmail.com','RegionId':3,'Deleted':false}]}

Still no progress here. :-(

What is wrong here ?
Because i only have headers as result. :-(

Can anyone tell me what i need to do or change ?

Grid

answered on 03 Apr 2020

4 answers

392 views

Responsive Panel, Toggle Button Click

I have two responsive panels in the page which then collapse into two "hamburger" menus. The problem that I have is when I click on one "hamburger" menu both of them expand. How do you go about expanding each "hamburger" menu separately?

For background, I have created a default website and added a page with the same code as found at this link.

https://demos.telerik.com/aspnet-mvc/responsive-panel

The first "hamburger" menu is the default menu items of a web site and the second "hamburger" menu is generated by the code used from the above link.

I have also uploaded a screenshot for reference. What am I missing?

Thank you,

Ricky

General Discussions

answered on 02 Apr 2020

7 answers

1.0K+ views

Kendo Ui Grid Serverside Paging

Hi,

I want to use server side paging for grid in my project. I was unable to achieve that. Could you provide any working sample of code. Below is my code.

@{Html.Kendo().Grid<ViewModels.GridModel>()
.Name("grdTasks")
.Columns(columns =>
{
columns.Bound(o => o.ActionItemId)
.Hidden(true);

columns.Bound(o => o.StudyNo)
.Title(@Html.GetResourceValue("DashboardWidget.TaskTracking", "AI_UI_Label_ActionItemStudy")
.ToHtmlString())
.Width(75)
.HtmlAttributes(new { @class = "gridRowLeftAligned", style = "color:black;" })
.HeaderHtmlAttributes(new { @class = "gridHeaderRow", style = "border:none; font-family:Arial text-align:left;font-size: 12px; " })
.Filterable(false)
.Sortable(true);

columns.Bound(o => o.SiteName)
.Title(@Html.GetResourceValue("DashboardWidget.TaskTracking", "AI_UI_Label_ActionItemSite")
.ToHtmlString())
.Width(95)
.HtmlAttributes(new { @class = "gridRowLeftAligned" ,style = "color:black;" })
.HeaderHtmlAttributes(new { @class = "gridHeaderRow", style = "border:none;font-family:Arial;text-align:left;font-size: 12px; " })
.Filterable(false)
.Sortable(true);

columns.Bound(o => o.AssignedToName)
.Title(@Html.GetResourceValue("DashboardWidget.TaskTracking", "AI_UI_Label_ActionItemAssignedto")
.ToHtmlString())
.Width(85)
.HtmlAttributes(new { @class = "gridRowLeftAligned", style = "color:black;" })
.HeaderHtmlAttributes(new { @class = "gridHeaderRow", style = "border:none; font-family:Arial;text-align:left;font-size: 12px; " })
.Filterable(false)
.Sortable(true);
})
.NoRecords(@<text>Loading...</text>)
.DataSource(dataSource => dataSource.Ajax()
.Read(read => read.Action("GrdActionListAjaxBindingKendo", "ActionItem", new { filterKey = (string)ViewData["filterKey"] }))
.Model(model => model.Id(site => site.StudyId))
.PageSize((int)ViewData["pageSize"])
.Total((int)ViewData["totalRecords"])
.ServerOperation(true)
)
.EnableCustomBinding(true)
.Events(events=>events.DataBound("Tasks_OnDataBound"))
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "font-size:10px; font-weight:bold; font-family:Arial; width:100%;" })
.Pageable(page => page.Enabled(true).PageSizes(new Int32[] { 20, 30, 50, 100 }))
.Render();

Here datais binding properly only for the first time. But based on Total records grid has to display paging info. It is not doing that.

Could you help me.

Grid

answered on 02 Apr 2020

1 answer

204 views

Binding TabStrip to a DataSource

Hi there,

I'm having difficulty in finding information on Binding a TabStrip to a datasource similar to the other controls and the JQuery version. Can you give me a practical example of binding it to a List<T>?

I am sure you are also still busy updating the documentation. Our architect has very colorful ways of creating his rest endpoints. Things are getting a bit sketchy when it comes to https://docs.telerik.com/aspnet-mvc/api//Kendo.Mvc.UI.Fluent/DataSourceBuilder#webapi .

Thanks for your help.

TabStrip

answered on 02 Apr 2020

1 answer

8.5K+ views

checkbox column template

Hi,
I have various columns in different Kendo grids binded to a boolean field of my Sql database (using Ajax binding).

I'd like to view and to edit each boolean field using simple checkbox .
I've read the forum and the examples (custom editor and your FAQ) but I wonder if it's possibile to write a custom editor template "Checkbox" similar to "DateTime" or to "GridForeignKey" and use it in each boolean column .
Is it possibile?

Thanks in advance,

Luca

Grid

answered on 01 Apr 2020

7 answers

1.8K+ views

Reset to first page after sort or server side filtering

Hi,

I am trying to get the grid to go back to page one on any sorting or filtering operation (ServerOperation=true) on an ajax enabled grid. I noticed even the samples dont return to page one when sorting - it leaves you right on the same page.

Right now I do this:

$("#clients-grid").data("kendoGrid").dataSource.read()

and it does a read, but leaves it on the page the user was last at. How do I get this to go back to page 1?

Thank you.
David A

Grid

answered on 31 Mar 2020

2 answers

66 views

Kendo Grid MVC displays no data

I was trying to display some report data using Kendo grid and I’m getting uncaught errors kendo.syncReady. is not a function. Is this a new function added in any recent version of KendoUI?

Regards

Grid

answered on 30 Mar 2020

3 answers

94 views

Problem with DateInput

Hi, guys,

I have a big problem.
I use the DatePicker.
When I use the DateInput parameter, or when I add it, I have the following problem.

The DatePicker shows me 2 buttons to select the date.
The first one works fine, the second one does not react but is displayed.
I have attached a picture to the thread.

Does anybody have an idea what it could be?

Thanks in advance for your help.

Date/Time Pickers

answered on 30 Mar 2020

3 answers

136 views

Use Kendo styling only on some pages

I have a large existing ASP.NET MVC project where I want to introduce Telerik gradually. I have separate layout files for pages that should use Telerik and pages that do not. Some fields that do not use the Telerik included layout page are still getting the kendo styling.

Example:

I have a login page. Password field should use bootstrap styling.

@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })

Field settings from view model:

[DisplayName("Password")]

[DataType(DataType.Password)]

public string Password { get; set; }

When I load the page the field gets kendo styling. How do I prevent this?