Telerik Forums
UI for ASP.NET MVC Forum
2 answers
598 views

I am showing multiple instances of the same grid in the same view. And everything works fine except if you try to edit a record on two grids at the same time.

The problem seems to be that the EditorFor elements created when switching to in-line edit mode all end up named the same, so the second set of editors don't work as expected (as-in, the DatePicker doesn't render, I just end-up with a non-formatted date in a regular textbox).

 

I tried adding an HtmlFieldPrefix to each partial (the helper to create the view is held within a PartialView that's called for each team).

That makes the actual editors render appropriately, but they don't get properly bound to the underlying model (as-in, I can see the datepicker, but it doesn't have the existing value, nor posts back to the model as expected).

 

As far as the model, the key portion would be with the Date fields, where I have the model decorated so that it shows the appropriate date picker.

The way I'm creating multiple grids is that I loop through a collection of teams and call a helper to create each grid with a separate Id.

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[UIHint("Date")]
public DateTime DateStart { getset; }
 
@helper TeamGrid(int id)
{
    @(Html.Kendo().Grid<KTeam>()
          .Name("gridTeam" + id)
          .DataSource
          (
              d => d
                  .Ajax()
                  .ServerOperation(false)
                  .PageSize(20)
                  .Model(model =>                   {
                      model.Id(u => u.Id);
                   })
                  .Events(events => events.Error("onError"))
                  .Read(r => r.Action("ReadTeam""Report").Data("dataTeamId(" + id + ")"))
                  .Update(u => u.Action("EditTeam""Report"))
                  .Sort(sort => sort.Add(s => s.Member).Ascending())
          )
          .Columns(columns =>           {
              columns.Bound(u => u.Id).Hidden();
              columns.Bound(u => u.Member).Width(200);
              columns.Bound(u => u.DateStart).Width(120);
              columns.Bound(u => u.DateEnd).Width(120);
              columns.Command(command => command.Edit()).Width(177);
          })
          .Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains"))))
          .Sortable(s => s.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))
    ) }

 

Matus
Top achievements
Rank 1
Iron
 updated answer on 21 Apr 2022
1 answer
899 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
140 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
180 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
162 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
197 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
728 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
Iron
 answered on 12 Apr 2022
0 answers
203 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
252 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
305 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
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?