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

 

Hi,

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

 

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 ?

Hello, I am currently evaluating the Telerik control Tree View to display the hierarchy 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  create a sample project which I got from the forums and modified it  which I have attached 

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


I see that when I expand the nodes, the node with "Program Structure" expands correctly.
The node with "Program Metrics" does not expand correctly. The expanded icon does not show correctly as shown in program structure.

Hi,

I am trying to persist my MVC Kendo Grid using getOptions() and setOptions(). I am successfully able to save and get.

Now I am facing problem with Kendo grid columns tooptip and data tooltip while setOptions() loading to my page.

I need to get tooptip on Account Code after loading my user preferences by using setOptions(). Please help me.

Here my code

 @(Html.Kendo()
.Grid<Models.TransactionSummary>()
.Name("TransactionDetailGrid")
.Columns(c =>
{ 

     c.Bound(p => p.Account.Code).Width(60);
    c.Bound(p => p.VendorInvoiceNumber).Width(80);

}

function SaveUserPrererences() {
        var grid = $("#" + SearchResultGridId()).data().kendoGrid;
        var resources = kendo.stringify(grid.getOptions());
        $.ajax(
            {
                url: "@Url.Action("SaveUserPreferences", "Review", new { area = "Transaction" })",
                type: 'POST',
                async: false,
                contentType: "application/json; charset:utf",
                dataType: 'json',
                data: JSON.stringify({ gridResources: resources, isActive: isActive }),
                success: function (data) { }

       }

 

 $("#load").click(function (e) {
        var grid = $("#" + SearchResultGridId()).data().kendoGrid;
        e.preventDefault(); 

         $.ajax(
             {
                 url: "@Url.Action("GetUserPreferences", "Review", new { area = "Transaction" })",
                 async: false,
                 type: "POST",
                 dataType: 'json',
                 success: function (data){
                     if (data) {
                         var parsedOptions = JSON.parse(data);
                         parsedOptions.toolbar = [
                             { template: $("#toolbarTemplate").html() }
                         ];
                         parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();                        
                         grid.setOptions(parsedOptions);                        
                     }
                 }                    

Hello,
I have a form with different text fields ,dropdown lists and a gridview with some data.
after entering the information in text fields, 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