Hi ,

I am using a Html form inside the Kendo window .But the model values are not binding to the textbox and dropdown controls when I am submitting the form.

Here is my code.

Html.Kendo().Window()
.Name("addressPopup")
.Visible(false).Title(false)
.Scrollable(false)
.Draggable(false)
.Modal(true)
.Content(@<text>
<div id="AddressVerificationModal" style="padding:2% !important">
<h1 class="header-lbl-md-2" style="line-height:1px">Verify information</h1>
<div class="divider-headpopup " style="width:445px">
<span class="divider-headpopup" />
</div>
<br />
<br />
<div class="searchformfld padright" style="width:49%!important">
@Html.TextBoxFor(m => m.FirstName, new { placeholder = " ", autocomplete = "off", onBlur = "ValidateField(event)" })

</div>

<div class="searchformfld " style="width:30%;padding-top:11px">
            @Html.DropDownListFor(m => m.StateCode, new SelectList(States, "StateCode", "StateCode"), new { placeholder = " ", autocomplete = "off" })
            <label for="StateCode" id="lblStateCode">State*</label>
 </div>

 </div></text>).Render();

If I remove the Kendow Window code it is binding the values as expected.

I'm seeing an issue where if there are multiple grids on a page they do not load at the same time. One seems to load and then the other, while the other shows the ajax spinner. Here is the code in question:

 <div style="clear: both; padding-top: 10px; ">
        @(Html.Kendo().Grid<SalesSummary>()
                      .Name("totalsGrid")
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.TotalInvoicedSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" });
                          columns.Bound(c => c.TotalCalculatedSales).Title("Total Sale").Format("{0:c}").HtmlAttributes(new { @class = "money" });
                          columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                          columns.Bound(c => c.NumberOfDistinctItems).Title("# Of Unique Items Sold").Format("{0:0}");
                          columns.Bound(c => c.TotalQtyOrdered).Title("Qty Ordered").Format("{0:0}");
                          columns.Bound(c => c.TotalQtyShipped).Title("Qty Shipped").Format("{0:0}");
                      })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesReps", action = "Sales_GetSalesTotalsData" })).Data("getFilterValuesForTotalsGridRead")))
        )
    </div>

    <div style="width: 100%;">
        <div style="float: left; width: 900px; margin-top: 10px; font-weight: bold; font-size: .9em;">
            Sales Reps:
        </div>
    </div>
    <div style="clear: both; padding-top: 10px; ">
        @(Html.Kendo().Grid<SalesRepSummaryItem>()
                      .Name("grid")
                      .NoRecords()
                      .Sortable()
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.SalesRepFullName).Title("Sales Rep");
                          columns.Bound(c => c.TotalSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                          columns.Bound(c => c.CalculatedTotalSales).Title("Total Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                          columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                          columns.Bound(c => c.NumberOfItems).Title("# Of Items").Format("{0:0}");
                          columns.Bound(c => c.TotalOrdered).Title("Qty Ordered").Format("{0:0}");
                          columns.Bound(c => c.TotalShipped).Title("Qty Shipped").Format("{0:0}");
                      })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesReps", action = "Sales_GetSalesData" })).Data("getFilterValuesForGridRead")))
        )
    </div>
I'm seeing this on the main load as well as when I attempt to force a rebind:
  function rebindGrids() {
        var grid = $("#totalsGrid").data("kendoGrid");
        grid.dataSource.read();

        grid = $("#grid").data("kendoGrid");
        grid.dataSource.read();
    }

It's not a speed issue, I can see that the second grid does not load until the first finishes. Commenting out the first grid makes the second grid render instantly. With the first grid showing the second does not render until the first grid shows data.

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.

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

 

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.

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

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

        }

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 

 

 

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

 

My form looks like - form.cshtml

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>

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" });
      
    }