Hi All,
I am implementing a project based on one of the Telerik
examples as part of learning KendoUI and MVC. It is not going well.
By reviewing the browser console on Firefox 37.0.1 and IE 11
I have resolved all JavaScript errors. All libraries appear to be loading.
The grid populates fine when using server binding but with
Ajax I have the following problem:
If I use this return statement:
return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
I get a nicely formatted but empty grid.
If I use this return statement:
return Json(result, JsonRequestBehavior.AllowGet);
I get my expected data dumped to the screen but no grid.
The data being returned by the controller looks like this:
{"Data":[{"EmployeeID":"FITS-0001","FirstName":"John","LastName":"Doe","EmailAddress":"jdoe@acme.com","TelephoneNumber":null,"UserID":"johndoe","JobTitle":null,"EmployeeStatus":null}, {"EmployeeID":"FITS-0002","FirstName":"Jane","LastName":"Doe","EmailAddress":"janedoe@acme.com","TelephoneNumber":null,"UserID":"janedoe","JobTitle":null,"EmployeeStatus":null}],"Total":2,"AggregateResults":null,"Errors":null}
My code is below. Any pointers would be greatly appreciated.
Controller -- EmployeeController
using System.Linq;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using TestBagWeb.Models;
using TestBagWeb.DAL;
namespace TestBagWeb.Controllers
{
public class EmployeeController : Controller
{
public ActionResult Employees_JsonRead([DataSourceRequest]DataSourceRequest request)
{
using (TestBagContext employeeData = new TestBagContext())
{
IQueryable<
Employee
> employees = employeeData.Employees;
DataSourceResult result = employees.ToDataSourceResult(request);
return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
//return Json(result, JsonRequestBehavior.AllowGet);
}
}
}
}
View -- Employee/Index
@{
ViewBag.Title = "Test Bag";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().Grid<
TestBagWeb.Models.Employee
>()
.Name("employeeGrid")
.Columns(columns =>
{
columns.Bound(c => c.EmployeeID);
columns.Bound(c => c.FirstName);
columns.Bound(c => c.LastName);
columns.Bound(c => c.EmailAddress);
columns.Bound(c => c.TelephoneNumber);
columns.Bound(c => c.UserID);
columns.Bound(c => c.JobTitle);
columns.Bound(c => c.EmployeeStatus);
columns.Bound(c => c.FullName);
columns.Bound(c => c.EmployeeName);
})
.Scrollable()
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Employees_JsonRead", "Employee"))
)
)
Regards
Hi, I need help to set a default value (the value is a filter for my grid) on DropDownList after the databound runs a function.
@(Html.Kendo().DropDownList()
.Name("gridOptionsDDL")
.OptionLabel(@SharedLocalizer[ResourceKeys.NoFilterSelected].Value)
.DataTextField("OptionsName")
.DataValueField("Id")
.AutoBind(false)
.Events(e => e.DataBound("loadStandardFilter").Change("onGridOptionsChange").Open("onGridOptionsDDLOpen"))
.HtmlAttributes(new { @class = "filter-dropdown" })
.DataSource(ds =>
{
ds.Read(read => read.Action("GetGridOptions", "InventoryData").Data("GetGridOptionsGridName"));
})
.ToClientTemplate()
my js-file:
function loadStandardFilter(e) {Hello, I am using Telerik UI for ASP.NET MVC. A server I publish to has no internet connection. How can I have the dropdowns/grid/gantt show up correcting without internet? I have the dlls referenced in the project from the folder, but they do not show up on the offline server.
Here is the error I receive when loading the page on the web:
And here is how I have my Layout view set up.
Thank you for any help.
I'm new to the Telerik/Progressive framework, so please excuse me if I am asking something too obvious.
I have created a RadPivotGrid (code excerpt below and image attached). Whilst this works really well to display an aggregate COUNT and also shows the Row Sub Totals, I am at a loss on how to make the percentages show for the items based on the row sub total.
To give context; this is to display Survey Data. The rows are populated by Question and Answer, and the Columns provides a count on the number of people who answered. e.g.,
What is your favourite colour
Red 10
Blue 20
Total People in RowSubTotal 30
What is your favourite shape
Square 20
Triangle 15
Total People in RowSubTotal 35
What I want to be able to do, is view this by percent based on the row subtotal
What is your favourite colour
Red 33%
Blue 66%
Total People in RowSubTotal 100%
Below is the snippet from RadPivotGrid. I have tried to use TotalFormat-TotalFunction="PercentOfRowTotal" in the PivotGridAggregateField, but this provides a percentage of the whole Grid, not the individual question (RowSubTotal).
Appreciate any help!
<telerik:RadPivotGrid runat="server" ID="RadPivotGridCrossTab" DataSourceID="SqlCrossTab" Skin="Bootstrap" Height="100%"
AllowFiltering="False" ShowColumnHeaderZone="False" ShowDataHeaderZone="False" ShowRowHeaderZone="False" ShowFilterHeaderZone="false" ColumnHeaderTableLayout="Fixed" RowHeaderTableLayout="Fixed" AllowNaturalSort="true">
<SortExpressions>
<telerik:PivotGridSortExpression FieldName="Filters" SortOrder="None" />
</SortExpressions>
<PagerStyle Mode="Slider" ChangePageSizeButtonToolTip="Change Page Size" AlwaysVisible="True" PageSizeControlType="RadComboBox"></PagerStyle>
<ClientSettings EnableFieldsDragDrop="true">
<Scrolling AllowVerticalScroll="true"></Scrolling>
</ClientSettings>
<ConfigurationPanelSettings EnableDragDrop="False" EnableFieldsContextMenu="False"></ConfigurationPanelSettings>
<RowHeaderCellStyle Font-Names="Rubik" BackColor="#3D1A6F" ForeColor="White"></RowHeaderCellStyle>
<ColumnHeaderCellStyle Font-Bold="True" Font-Names="Rubik" BackColor="#3D1A6F" ForeColor="White"></ColumnHeaderCellStyle>
<DataCellStyle Width="250px" Font-Names="Rubik" CssClass="text-center" />
<TotalsSettings RowsSubTotalsPosition="First" RowGrandTotalsPosition="None" ColumnsSubTotalsPosition="None" ColumnGrandTotalsPosition="None"></TotalsSettings>
<Fields>
<telerik:PivotGridColumnField UniqueName="Filters" DataField="Filters"></telerik:PivotGridColumnField>
<telerik:PivotGridRowField UniqueName="Question" DataField="Question" CellStyle-Width="350px"></telerik:PivotGridRowField>
<telerik:PivotGridRowField UniqueName="Answer" DataField="Answer" CellStyle-Width="350px"></telerik:PivotGridRowField>
<telerik:PivotGridAggregateField DataField="Respondent" Aggregate="Count" ></telerik:PivotGridAggregateField>
</Fields>
</telerik:RadPivotGrid>
I have a grid doing edit in a popup. When the popup shows it binds from my model to the fields and all the fields bind and return their data back to the controller for Add/Update except for the RadioGroup it always returns null. It binds fine, just not returns any value to the Controller.
I tried the below:
@(Html.Kendo().RadioGroupFor(model => model.Sex)
.Name("Sex1")
.HtmlAttributes(new { style = "width:200px;", @class = "RequiredField" })
.Layout(RadioGroupLayout.Horizontal)
.Items(m =>
{
m.Add().Label("Male").Value("Male");
m.Add().Label("Female").Value("Female");
m.Add().Label("N.A.").Value("N.A.");
})
)
I also tried using javascript to force it to update like below.
@(Html.Kendo().RadioGroupFor(model => model.Sex)
.Name("Sex1")
.HtmlAttributes(new { style = "width:200px;", @class = "RequiredField" })
.Layout(RadioGroupLayout.Horizontal)
.Items(m =>
{
m.Add().Label("Male").Value("Male");
m.Add().Label("Female").Value("Female");
m.Add().Label("N.A.").Value("N.A.");
})
.Events(e =>
{
e.Change("Sex_onChange");
})
)
<script type="text/javascript">
function Sex_onChange(e) {</script>
No matter what I tried my model always returns null for the sex when it hits the controller.
Below is the model.
public class ContactViewModelI am inserting a kendo dropdown control inside an upload template so that the user can select a document type for each file uploaded. The upload control allows multiple files, it is not async. It works the first time but subsequent files do not render the dropdown, only a text box instead of a dropdown list.
Here's my razor code:
<div>
@(Html.Kendo().Upload().Name("upload")
.Multiple(true)
.TemplateId("UploadTemplate"))
</div>
Here's my template:
<script id="UploadTemplate" type="text/x-kendo-template">
<span class='k-progress'></span>
<div><label>Name:</label>#=name#</div>
<div><label for='NewDoc_Type_DocumentTypeId'>Document Type:</label>
@(Html.Kendo().DropDownList()
.Name("NewDoc.Type.DocumentTypeId")
.HtmlAttributes(new { name = "NewDoc.Type.DocumentTypeId", style = "width: 260px;" })
.BindTo(DocumentTypes())
.DataTextField("DocumentTypeText")
.DataValueField("DocumentTypeId")
.Events(e => e.Select("TypeSelected")).ToClientTemplate()
)
</div>
<div style='display: none;' id='divTypeOther'>
<label for='NewDoc_TypeOther'>Document Type - Other: </label>
<input type='text' name='NewDoc.TypeOther' id='NewDoc_TypeOther' />
</div>
</script>
Also, I want to show a text box of "Other" when the user selects "OTHER" from the dropdown. Again, it works on the first one but the ids are the same starting with the second one so it wouldn't work.
m facing this challenge, when i made some upgrades to Kendo UI controls.
kendo.multiselect.min.js:25
Uncaught TypeError: Cannot read properties of undefined (reading 'renderChipList')
at init._tagList (kendo.multiselect.min.js:25:20983)
at new init (kendo.multiselect.min.js:25:1453)
at HTMLSelectElement.<anonymous> (kendo.core.min.js:25:40814)
at Function.each (jquery-1.12.4.min.js:2:2881)
at n.fn.init.each (jquery-1.12.4.min.js:2:846)
at n.fn.init.g.fn.<computed> [as kendoMultiSelect] (kendo.core.min.js:25:40791)
at HTMLDocument.<anonymous> (TrackingTicketInquiry:3590:71)
at i (jquery-1.12.4.min.js:2:27449)
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2:28213)
at Function.ready (jquery-1.12.4.min.js:2:30006)
Hi,
I am unable to find ASP.NET Core scaffolding in VS2022. Then I install into VS2019 and result is same. Unable to view Telerik scaffolding. If any one have the idea how to fix it please help me.
Hi
I have a kendo grid and have turned on the column menu and the filtering. However, when the user opens the column menu, they then have to click again to open up the filtering. Is there a way to have this expanded by default? I have found some documentation that seems to show that functionality for the Angular side of kendo, but can't find anything for the MVC helpers, or the Jquery.
My grid currently looks like this.
@(Html.Kendo().Grid<HomeGridViewModel>().Name("WorkRequestGrid").Columns(x =>
{
x.Bound(c => c.Priority).ClientTemplate("#=Priority#").Title("").Filterable(false).HtmlAttributes(new { @class = "crm_grid_priority" }).Width(20).Sticky();
x.Bound(c => c.ActivityRef).ClientTemplate("<span>#=ActivityRef#</span>").Title("Activity Ref").HtmlAttributes(new { @class = "crm_grid_activity wordWrap" }).Width(135).Sticky();
x.Bound(c => c.CustomerName).Title("Customer").HtmlAttributes(new { @class = "crm_customerName" }).Width(200);
x.Bound(c => c.ProposerName).Title("Proposer Name").HtmlAttributes(new { @class = "crm_proposerName" }).Width(200);
x.Bound(c => c.PostCode).Title("Postcode").HtmlAttributes(new { @class = "crm_postCode" }).Width(80);
x.Bound(c => c.RequestDueDate).Format("{0:d}").Title("Client Due Date").HtmlAttributes(new { @class = "crm_dueDate" }).Visible(true).Width(100);
x.Bound(c => c.SurveyType).Title("Survey Name").HtmlAttributes(new { @class = "crm_activityType" }).Width(200);
x.Bound(c => c.SurveyorName).Title("Surveyor Name").HtmlAttributes(new { @class = "crm_surveyor" }).Width(200);
x.Bound(c => c.ScheduledDate).Title("Booked date").Format("{0:d}").Visible(true).HtmlAttributes(new { @class = "crm_bookedDate" }).Width(100);
x.Bound(c => c.ItemStatus).Title("Status").HtmlAttributes(new { @class = "crm_status" }).Encoded(false).Sortable(false).Filterable(false).Width(200).Sticky();
})
.HtmlAttributes(new { @class = "crm_grid" })
.Sortable()
.Filterable(f=>f.Enabled(true).Extra(false).Operators(Model.GridOperators))
.ColumnMenu(m=> {
m.ComponentType("modern");
m.Columns(c =>
{
c.Sort("asc")
.Groups(g =>
{
g.Add().Title("Survey Details").Columns(new List<string> { "ActivityRef", "SurveyType", "RequestDueDate", "SurveyorDueDate", "SurveyorName", "ScheduledDate"});
g.Add().Title("Property Details").Columns(new List<string> { "CustomerName", "ProposerName", "PostCode" });
g.Add().Title("Survey Status").Columns(new List<string> { "SurveyStatus" });
});
});
})
.Resizable(r=>r.Columns(true))
.ColumnResizeHandleWidth(3)
.Mobile(MobileMode.Auto)
.Scrollable(s=>s.Height("400px"))
.Pageable(p => p.Enabled(true).PageSizes(new int[] { 20, 50, 100,250 }))
.DataSource(d => d
.Ajax()
.Read(read => read.Action("Grid_HomePage", "Home"))
.PageSize(50)
.ServerOperation(true)
)
)