Telerik Forums
UI for ASP.NET MVC Forum
1 answer
843 views

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


Ivan Danchev
Telerik team
 updated answer on 20 Apr 2022
0 answers
123 views

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) {
    var dropDownList = $("#gridOptionsDDL").data("kendoDropDownList");;

    dropDownList.select(function (dataItem) {
        return (dataItem.Standard === true);
    })
    dropDownList.trigger("change");
}
Maximilian
Top achievements
Rank 1
 asked on 19 Apr 2022
1 answer
136 views

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.

 

Ivan Danchev
Telerik team
 answered on 12 Apr 2022
1 answer
127 views

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>

Attila Antal
Telerik team
 answered on 12 Apr 2022
1 answer
151 views

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) {
        var sexList = $("#Sex").data("kendoRadioGroup");
        sexList.trigger("change");
    }

</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 ContactViewModel
{
        public Int32 ContactID { get; set; }
        [Required]
        [MaxLength(255)]
        [DisplayName("Display Name:")]
        public String DisplayName { get; set; }
        [Required]
        [MaxLength(10)]
        [DisplayName("Sex:")]
        public string Sex { get; set; }
}
Eyup
Telerik team
 answered on 12 Apr 2022
3 answers
675 views

I 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.

Rey
Top achievements
Rank 2
Iron
Iron
 answered on 12 Apr 2022
0 answers
179 views

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)

KIRANKUMAR
Top achievements
Rank 1
 asked on 11 Apr 2022
1 answer
214 views

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.

2 answers
249 views
HI

I have download the source code of UI for ASP.NET MVC R2 2017 SP1, but the file version of the bin\Debug\Kendo.Mvc.dll is 2017.2.621.440 that was different with lib\KENDOUIMVC\2017.2.621.545\Kendo.Mvc.dll 2017.2.621.545, Why?the source code too old?

Best regards.

Chris



Chris
Top achievements
Rank 1
Veteran
Iron
Iron
 answered on 06 Apr 2022
0 answers
122 views

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)
	)
)

 

If anyone has any pointers or can help with this, I'd greatly appreciate it.

 
Thanks

 

Becky
Top achievements
Rank 1
 asked on 05 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?