Telerik Forums
UI for ASP.NET MVC Forum
7 answers
581 views

We've built an MVC app using Kendo MVC tools. It runs perfectly in a Windows desktop environment under all major browsers. However, on iOS devices none of our grids appear using Chrome. Using Safari, our grids appear but no scroll bars appear. I've attached images of each. This was captured using BrowserStack which emulates most major devices and browsers.

Please advise on why are grids are not appearing under Chrome and why we're missing scroll bars under Safari. Also, no JavaScript errors are being generated.

Thanks very much.

Denitsa
Telerik team
 answered on 14 Dec 2020
2 answers
803 views

Have a field of a grid with a client template like this.  Includes a "check all " box in the header.

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='gridCheckbox'  onclick='handleClick(this);' value='#= LineItemId #'  #= Selected ? 'checked':'' # class='chkbx' />")
           .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(50);

 

I have a button that when clicked needs to grab the value of any checkbox (its value is a number) that is checked in this field,  and put into a list or array. This list should not include the checkbox in the header.  I seen this example but its not quite what im trying to do, but similar idea.  I need a jquery selector to get a list of those checkboxes that are checked and the value attribute put into an array.

BitShift
Top achievements
Rank 1
Veteran
 answered on 11 Dec 2020
1 answer
658 views

Hi

Our inclusion of the ~/Scripts/kendo/2017.2.504/angular.min.js file in our web application has been reported as a vulnerability by our customer as it is v1.4.6 and any version prior to v1.8.0 has security issues.

I read on the https://docs.telerik.com/kendo-ui/framework/AngularJS/angular-support page that, "Unlike their dependency on jQuery, the Kendo UI distributions can function correctly without AngularJS". Is it possible therefore to simply remove the angular.min.js file from our web application without any issue? Are there any dependencies on this file we would need to consider? The file has been included as part of the Telerik UI for ASP.NET MVC R2 2017 package in or web application.

Thanks for any help you can give.

Alan

Petar
Telerik team
 answered on 11 Dec 2020
3 answers
2.0K+ views
Hi Team,



I have two kendo grids in two partial views.  This is being called in my
Index.chtml . I have set the ServerOperation(false) however when i
click the sort column, the partial view is opening in new window. 



I would need the grid to be sorted in client side and the partial view should display inside the main view itself



Please find the below code for one partial view

Partial View

=========

@using Resources.Home

@model IEnumerable<PackageModel>

@(Html.Kendo().Grid(Model)

                  .Name("Grid")             

                  .Columns(columns =>

                  {

                      columns.Bound(c => c.ClientName);                    

                      columns.Bound(c => c.Status).Template(

                        @<text>

                            <div style="width: 98%; background-color:
#fff; height: 5px; border: 1px solid #808080; float:
left;margin-bottom:10px;">

                                <div style="width: @( item.Status)%;
height: 5px; background-color: @(
item.StatusColor);">                                    

                                </div>                              

                                <div style="float: left;">@( item.StatusValue)</div>

                            </div>

                        </text>);                  

                      columns.Bound(c =>
c.Vacancies).Template(@<text><img src='~/Assets/images/@(
item.VacancyColor).png' /></text>).HtmlAttributes(new { style =
"text-align:-webkit-center;" });

                      columns.Command(command => command.Custom("
Edit").Click("showDetails").HtmlAttributes(new { @class = "fa
fa-pencil-square-o" })).Title(@HomeResources.Edit_Properties);

                      columns.Command(command =>
command.Custom(string.Empty).Click("showDetails").HtmlAttributes(new {
@class = "fa fa-pencil-square-o" })).Title(@HomeResources.Planning);

                  })

                         .Sortable()

                              .DataSource(source => source

                                  .Ajax()

                                  .ServerOperation(false)))





Part of Index.cshtml

==========

      <div id="ActiveWorkPackage">

            @{ Html.RenderAction("ViewActiveWorkPackages", "Home"); }  // Action and controller for the partial view grid data

        </div>



Controller

========

 public ActionResult ViewActiveWorkPackages()

        {

            IEnumerable<WorkPackageModel> packages = _workPackageService.GetWorkPackageDetails();

            return this.PartialView(

               "_ActiveWorkPackageView", packages);

        }
Anton Mironov
Telerik team
 answered on 10 Dec 2020
3 answers
399 views

Hello,
I have a form with different text fields and dropdown lists.

after entering the information, I have a button that allows me to validate the creation of this new element.
this button must call an action of my controller which is used to generate an excel file where I must call the template of this file from my local files and display the information entered in the fields that correspond in the excel file
I am using npoi library (c #) in back and telerik ui for asp.net mvc 

It would be much appreciated if you can help me on this.

Thanks for replying 

 

 

Aleksandar
Telerik team
 answered on 10 Dec 2020
7 answers
920 views

Hi,

I am new to Telerik at. I have a scenario where I click on the grid record I am taken to a form with the values populated. With the help of some online resources I was able to populate when the form and grid was kept in the same view. However, when I have a separate view I don't get my values populated.Where am I going wrong? Any help is greatly appreciated. Thanks in advance

My grid looks like - Index.cshtml

@(Html.Kendo().Grid<TabGrid.Models.ORM_MT_STATUS>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.STATUS_ID);
          columns.Bound(c => c.STATUS_DESCRIPTION);
          columns.Bound(c => c.CreatedBy);
          columns.Bound(c => c.CreatedDate);
          columns.Bound(c => c.CreatedIP);
          columns.Bound(c => c.UpdatedBy);
          columns.Bound(c => c.UpdatedDate);
          columns.Bound(c => c.UpdatedIP);
         ;
 
      })
      .ToolBar(toolbar => {
          toolbar.Excel();
      })
 
      .ColumnMenu()
      .Pageable()
      .Navigatable()
      .Selectable(selectable => {
          selectable.Mode(GridSelectionMode.Single);
          selectable.Type(GridSelectionType.Row);
      })
      .Sortable(sortable => {
          sortable.SortMode(GridSortMode.SingleColumn);
      })
      .Filterable()
      .Scrollable()
      .Events(events => {
          events.Change("onChange");
 
      })
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("ORM_MT_STATUS_Read", "Status"))
      )
)
 
 
<script>
  
   function fillForm(dataItem) {
        var columns = $("#grid").data("kendoGrid").options.columns;
        var id = dataItem.STATUS_ID;
        var form = $("form");
 
        for (var i = 0; i < columns.length; i++) {
            var field = columns[i].field;
            form.find("#" + field).val(dataItem[field]);
 
        }
       // window.location.href = "@Url.Action( "form", "Status")" + "?STATUS_ID" + id;
    }
 
    function onChange(e) {
        //var grid = $("#grid").data("kendoGrid");
        var dataItem = this.dataItem(this.select());
        fillForm(dataItem);
    }
 
</script>

 

My form looks like - form.cshtml

@{
    ViewBag.Title = "form";
}
 
<h2>form</h2>
<div class="demo-section k-content capitalize">
 
    <div id="validation-success"></div>
    @(Html.Kendo().Form<TabGrid.Models.ORM_MT_STATUS>
    ()
    .Name("form")
    .HtmlAttributes(new { action = "form", method = "POST" })
    .Validatable(v =>
    {
        v.ValidateOnBlur(true);
        v.ValidationSummary(vs => vs.Enable(true));
    })
    .Items(items =>
    {
    items.AddGroup()
    .Label("Status Management Form")
    .Items(i =>
    {
    i.Add()
    .Field(f => f.STATUS_ID).InputHtmlAttributes(new{ @readonly ="readonly"})
    .Label(l => l.Text("ID:"));
 
    i.Add()
    .Field(f => f.STATUS_DESCRIPTION)
    //.InputHtmlAttributes(class="capitaize")
    .InputHtmlAttributes(new { onkeyup = "this.value = this.value.initcaps();" })
    .Label(l => l.Text("Status:"));
 
    });
 
    })
    .Events(ev => ev.ValidateField("onFormValidateField").Submit("onFormSubmit").Clear("onFormClear"))
 
    )
</div>
@*<div>@Html.Action("Add")</div>*@
<script>
    function disablefield() {
        document.getElementById("id").disabled = true;
    }
    function onFormValidateField(e) {
        $("#validation-success").html("");
    }
 
    function onFormSubmit(e) {
        e.preventDefault();
        $("#validation-success").html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
    }
 
    function onFormClear(e) {
        $("#validation-success").html("");
    }
 
</script>
Eyup
Telerik team
 answered on 10 Dec 2020
1 answer
537 views

I have Json in below format (array of arrays) and defined in cshtml as an observableObject. I want to bind it using Kendo Template MVVM.

1. Can some one help how to define the kendo template to display a table using below JSON structure?

2. What should be passed as source in place of ??? So that the template displays accordingly.

3. how can we access the current item in kendo template?

{ "Type": 1, "Data": [{ "Category": "Sample Rows", "Result": [ [{"Name": "Column1", "Value": "Value1"}, {"Name": "Column2","Value": "Value2"}], [{"Name": "Column1","Value": "1"}, {"Name": "Column2", "Value": "2"}] ] } ] }

 

<script id="table-data-template" type="text/x-kendo-template"> <table> <thead data-template="header-template" data-bind="source: Result[0]" /> <tbody data-template="row-template" class="row-item" data-bind="source: ???"></tbody> </table> </script>

<script id="header-template" type="text/x-kendo-template"> <th data-bind="text: Name"></th> </script>

<script id="row-template" type="text/x-kendo-template"> <tr data-template="column-template" data-bind="source: ???"></tr> </script>

<script id="column-template" type="text/x-kendo-template"> <td data-bind="text: Value"></td> </script>

Plamen
Telerik team
 answered on 09 Dec 2020
1 answer
109 views

Hi,

here first am displaying kendo chart with data using read option.

here am applied group and sort to my chart with stack option.

upto here its working fine.

by using kendo multiselect am filtering chart data. so when i apply filtering the stack data is not displaying correctly.

here is my code.

<div class="demo-section k-content wide">
    @(Html.Kendo().Chart<TimeControlReportEnhancements.Models.ResourceByProject>()
                    .Name("chHoursByResource")
                    .Title("Hours By Resource")
                    .Legend(false)
                    //.DataSource("dataSource2")
                    .DataSource(dataSource => dataSource
                            .Read(read => read.Action("LoadHoursByResourceWithDetails", "Home"))
                            .Group(group => group.Add(model => model.Hours))
                            .Sort(sort => sort.Add(model => model.EmpName).Ascending())
                        )
                    .Series(series =>
                    {
                        series.Column(model => model.Hours).Name("Hours").CategoryField("EmpName");

                    })
                    .SeriesDefaults(s=>s.Column().Stack(true))
                    .CategoryAxis(axis => axis
                        //.Name("label-axis")
                        //.Categories(model => model.EmpName)
                        .Labels(lbl => lbl.Rotation(-90))
                        )                  
                    .Tooltip(tooltip => tooltip
                        .Visible(true)
                        .Template("<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Employee Name:</span> #= dataItem.EmpName #</p>" +
                        "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Project Name:</span> #= dataItem.ProjectName #</p>" +
                        "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Hours:</span> #= value #")
                    )
    )

</div>

 

 function onSelect(e) {
        var chart = $("#chHoursByResource").data("kendoChart");
        var dataSource = chart.dataSource;
        var dataItem = e.dataItem;
        var multiselect = $("#ddlEmpNames").data("kendoMultiSelect");
        var selectedData = [];
        var items = multiselect.value();
        $.each(items, function (i, v) {
            selectedData.push(v);
        });
        selectedData.push(dataItem.EmpName);
        var _fltMain = [];
        var _flt = { logic: "or", filters: [] };
        $.each(selectedData, function (i, x) {
            _flt.filters.push({ field: "EmpName", operator: "contains", value: x });
        })
        _fltMain.push(_flt);
        dataSource.query({ filter: _fltMain });

        //dataSource.filter({ field: "EmpName", operator: "contains", value: selectedData[0] });
        ////dataSource.filter({
        ////    logic: "or",
        ////    filters: [
        ////        //{ field: "EmpName", operator: "contains", value: selectedData[0] }
        ////    ]
        ////});
        var Grid = $("#Grid").data("kendoGrid");
        var GriddataSource = Grid.dataSource;
        GriddataSource.query({ filter: _fltMain });
        $('#Grid').data('kendoGrid').dataSource.group({ field: "EmpName" });

        //$('#chHoursByResource').data('kendoChart').setDataSource(GriddataSource);
        //$('#chHoursByResource').data('kendoChart').dataSource.group({ field: "EmpName" });
      
    }

 

Alex Hajigeorgieva
Telerik team
 answered on 09 Dec 2020
1 answer
173 views

Hi,

i want to apply kendo datasource to grid. and i want to apply group by and aggrigate functions inside grid.

 

Tsvetomir
Telerik team
 answered on 09 Dec 2020
1 answer
152 views

Hello,

 

I am currently evaluating the Telerik control Tree View to display the hiearchy data as shown in the attached screen shot.

I have a requirement where we will be building a treeview in our ASP.NET MVC controller code  passing to the view.  

I need to display the Kendo Tree View  with all nodes expanded when the application loads initially  How do I do that ?




Aleksandar
Telerik team
 answered on 08 Dec 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
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
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
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
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
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?