Telerik Forums
UI for ASP.NET Core Forum
1 answer
105 views

Hello again Team Telerik,

 

As I continue my project, a Pivot Grind with AngularJS at APS.Net Core, I have new difficulties. At the beginning, I was saving the strings of rows, columns and measures in a database as three different columns. But in this way, I couldn't save the "state", meaning the "expand", "filter", "sort" etc values. So I looked around for a persist state and I found that getOptions() and setOptions() are working for Kendo Grid, so I thought that it would work on Pivot Grid also. But after many tries with different methods, I think that it doesn't work, or I'm doing something clearly wrong. My goal is to save the state as one column in a database per user. So I need a "save" button and a "load" button. There is no need to give you my code for this. I just like to see a working example in the sample code, because I can't make it work even in this. Please, give me an example of saving and loading to/from a local var for the code below, so I can find out what I'm doing wrong...

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
  <div ng-app="KendoDemo" ng-controller="MyCtrl">
    <div kendo-pivot-configurator k-height="580" k-data-source="dataSource" id="configurator" class="hidden-on-narrow"></div>
    <div kendo-pivot-grid="pivot" k-options="options" id="pivotgrid" class="hidden-on-narrow"></div>
     
    <div class="responsive-message"></div>
  </div>
</div>
 
<script>
  angular.module("KendoDemo", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.dataSource = new kendo.data.PivotDataSource({
              type: "xmla",
              columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ],
              rows: [{ name: "[Geography].[City]" }],
              measures: ["[Measures].[Reseller Freight Cost]"],
              transport: {
                  connection: {
                      catalog: "Adventure Works DW 2008R2",
                      cube: "Adventure Works"
                  },
                  read: "//demos.telerik.com/olap/msmdpump.dll"
              },
              schema: {
                  type: "xmla"
              },
              error: function (e) {
                  alert("error: " + kendo.stringify(e.errors[0]));
              }
          });
          $scope.options = {
              groupable: true,
              sortable: true,
              reorderable: true,
              filterable: true,
              columnWidth: 200,
              height: 580,
              dataSource: $scope.dataSource
          };
      })
</script>
 
<style>
    #pivotgrid {
        width: 70%;
    }
 
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>
 
 
</body>
</html>

 

 

Thanks in advance for your time and help,

 

Regards,

Stelios

Vasil
Telerik team
 answered on 16 Dec 2016
7 answers
738 views

Yeah...  This is almost similar to a previous post that was answered, so now I have gone to the next level.

I have a RadGrid that when I add a record, or edit an existing record, I want a GridBoundColumn automatically updated.

This in the scenario, I select Add A Record, the grid opens.  I have a dropdownlist inside of an EditItemTemplate.  I can select an item from the drop down list.  Now based on the item selected from the drop down list I want a GridBoundColumn that is available for editing to be progammatically populated.

So my question is how do I get ahold of the control so when the item in the drop down list is selected it fires off a code behind routine that automatically populates the box for the GridBoundColumn.  After the box is populated I either select Insert or Update(if applicable) and it goes into my database.

Regardless of what I have tried I cannot get to the controls on the RadGrid(s) in the FormTemplate.

The structure is:

1. RadGrid

2. MasterTableView

3. EditFormSettings

4. Form Template

5. RadGrid(s) (actually 5 on a tabstrip - this applies to all when it finally working)

6. MasterTableView

7. GridTemplateColumn

8. EditItemTemplate

9. asp:DropDownlist  (what I want to get the selected value from.)

 

So now we are 9 levels down.

I can access the controls in the FormTemplate( tables/rows/cells containing labels, textboxes, etc.)

But how do I access the controls in the RadGrid(s) within the Form Template.

The Insert and Update on the RadGrids function correctly.

 

Thank you for your time.  Dale

Dale
Top achievements
Rank 1
 answered on 13 Dec 2016
1 answer
99 views

 Hi ,

In my application we have two radgrids and a radlistview. We are going to fetch details on single input id and show this details radgrid and radlist.

Now my problem is that, when I edit one of the grid and change the input id and search for another details, the data details changes according to the input id prrovided, but the grid that earlier remained in edit mode, still in edit mode with new fetched data details.

 

I just wanted all the grid should close when the data details changes on that grid.

 

Thanks in advance.

Eyup
Telerik team
 answered on 13 Dec 2016
1 answer
96 views

Hi Support:

 

We need to develop a Asp.NET core website with a scheduler.  But we need to create custom template.    

Does the UI for ASP.NET Core is enough for us or we need to buy another component to be able to create custom templates.

Could you provide me a document that explains how to create a custom template.  For example how to customize the Appointment dialog.  I saw in the trial that the default definition is in javascript, but I dont know if I need to create new javascripts or modify the existing ones.

 

Appreciate any guidelines.

 

Thanks

 

 

 

Veselin Tsvetanov
Telerik team
 answered on 13 Dec 2016
2 answers
160 views

Hello team Telerik,

As I mentioned in another thread, I'm not sure how to load an MSOLAP inside a project, to the PivotGrid. I've tried with ADOMD but I've got some difficulties, because there are compatibility issues with ASP.NET Core.

I would be really grateful for some guidance or tips on how to achieve it. 

 

Thanks in advance,

Stelios.

Στέλιος
Top achievements
Rank 1
 answered on 09 Dec 2016
2 answers
514 views

Is there an option to allow a user to reorder grid rows using the Grid for ASP.NET Core?

Preferably I would like to allow rows to be reordered by drag and drop and by using up/down arrows in a toolbar. 

Konstantin Dikov
Telerik team
 answered on 07 Dec 2016
0 answers
335 views

Hi..All

After I convert my metronic themes using import bootstrap themes, I got many css file (ex :  Button.Metronic.css Calendar.Metronic.css, ComboBox.Metronic.css etc etc...)

But how I load those css file to change the default css and how to use it ?, let say i am want to change the default themes for button into my metronic themes.

Thanks

Jigu

 

 

 

 

Jigu
Top achievements
Rank 1
 asked on 07 Dec 2016
3 answers
265 views

Hello,

 

I'm working on a project at ASP.NET Core, using Kendo UI Pivot Grid with AngularJS. I have a Pivot Grid table and I'm saving/loading data on an SQL Server as reports for it successfully. I have a "details" page, where the data are loading and the table appears, but it's not editable. Up till now everything is ok. Now I'm trying to export the data as Excel and PDF formats and after I've tried every method that I have found, I had no results... Please, tell me what I'm doing wrong, or what I forget!

 

My code follows: 

HTML

@*Below I initialize my data via ng-init. I had to convert them from SQL first. Below there are the 2 buttons for export. Then the table appears*@
<div id="Details" class="form-group">
        <div ng-app="PivotGrid" ng-controller="PivotGridShow" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))" >
                <div class="pull-right">
                    <button id="exportexcel" class="k-button k-button-icontext hidden-on-narrow"><span class="k-icon k-i-excel"></span>Export to Excel</button>
                    <button id="exportpdf" class="k-button k-button-icontext hidden-on-narrow"><span class="k-icon k-i-pdf"></span>Export to PDF</button>
                </div>
        <div kendo-pivot-grid k-options="options" k-data-source="dataSource" id="pivotgrid" class="hidden-on-narrow" style="width:100%; height:100%;"></div>
        <div class="responsive-message"></div>
    </div>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>

 

JS (script for the PivotGrid)

angular.module('app.splitter-panel', ['Kendo.directives']);
angular.module('app', ['app.splitter-panel']);
angular.module("PivotGrid", ["kendo.directives"])
 
    .controller("PivotGridShow", function ($scope) {
 
        $scope.init = function (report) {
            $scope.columns = report.ReportLayoutColumns;
            $scope.rows = report.ReportLayoutRows;
            $scope.measures = report.ReportLayoutMeasures;
            $scope.dataSource = loadDataSource();
            $scope.options = {
                excel: {
                    fileName: "Report.xlsx",
                    allPages: true,
                    filterable: true,
                    proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                },
                pdf: {
                    author:"Retail-Link",
                    date:new Date(),
                    fileName:"Report.pdf",
                    landscape:false,
                    margin:{
                        left: 10,
                        right: "10pt",
                        top: "10mm",
                        bottom: "1in"
                    },
                    paperSize: "A4",
                    proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                },
                filterable: true,
                sortable: true,
                columnWidth: 100,
                height: 800,
                dataSource: $scope.dataSource,
                dataBound: function (e) {
                    document.getElementById('measures').value = JSON.stringify(e.sender.options.dataSource._measures);
                    document.getElementById('rows').value = JSON.stringify(e.sender.options.dataSource._rows);
                    document.getElementById('columns').value = JSON.stringify(e.sender.options.dataSource._columns);
                }
            };
        };
 
        function loadDataSource() {
            var PivotGrid = new kendo.data.PivotDataSource({
                type: "xmla",
 
                columns: JSON.parse($scope.columns),
                rows: JSON.parse($scope.rows),
                measures: JSON.parse($scope.measures),
 
                transport: {
                    connection: {
                        catalog: "Adventure Works DW 2008R2",
                        cube: "Adventure Works"
                    },
                    read: {
                        url: "http://demos.telerik.com/olap/msmdpump.dll"
                    }
                },
                schema: {
                    type: "xmla"
                },
                error: function (e) {
                    alert("error: " + kendo.stringify(e.errors[0]));
                }
            });
            return PivotGrid;
 
//Below there are my last two tries for the buttons
 
            $scope.exportexcel = function () {
                PivotGrid.saveAsExcel();
            }
 
            $("#exportpdf").click(function () {
                PivotGrid.saveAsPDF();
            });
 
        }
    });

 

This is what I include

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib_bower/metisMenu/dist/metisMenu.min.js"></script>
<script src="~/lib_bower/pace/pace.min.js"></script>
<script src="~/lib_bower/slimScroll/jquery.slimscroll.min.js"></script>
<script src="~/lib_bower/angular/angular.min.js"></script>
<script src="angular-animate.min.js"></script>
Daniel
Telerik team
 answered on 06 Dec 2016
2 answers
169 views
I have a RadDatePicker inside of a Form Template.  I can access the dbselected value from code behind, though I want to take the month and day of the dbselected value and populate an asp:textbox with the month, and a RadNumericTextBox with the day.

 

The structure is

1. RadGrid

2. MasterTableView

3. EditFormSettings

4. Form Template

5. Then tables/rows/cells containing labels, textboxes, etc.

 

From code behind I can access all the asp and telerik items in the tables and retrieve any data for further use in my application by using the following code:

 

If e.CommandName = RadGrid.UpdateCommandName Then
            If TypeOf e.Item Is GridEditFormItem Then
                Dim item As GridEditFormItem = DirectCast(e.Item, GridEditFormItem)
                Dim theClient As TextBox = DirectCast(item.FindControl("txtClient"), TextBox)
                Dim theOrder As TextBox = DirectCast(item.FindControl("txtOrder"), TextBox)
              
  Dim theRadDateOrder As RadDatePicker = DirectCast(item.FindControl("RadDatePickerOrderDate"), RadDatePicker)

                etc.


I now have the value from the dbSelectedDate:

                Dim theDateOrderDate As DateTime = theRadDateOrder.DbSelectedDate
                Dim theDateOrderMonth As String = theDateOrderDate.ToString("MMMM")
                Dim theDateOrderDay As String = theDateOrderDate.Day

And I now have a month and I have a day broke out.

Now within the form template is an asp:textbox that I want to update/insert/place the month value into.  I also have  a RadNumericTextBox that I want to update/insert/place the day value into.

What I want to do is update the month and day on the form when the date is selected with the RadDatePicker.

All the above was figured out by searching the internet and putting the pieces together. 

I have not been able to find even a starting point on my question, it may be in the above code, but I do not see it yet.

My question is how do I do this from code behind as I cannot access the controls directly as they are within the Form Template?

 

Thank you for your time.  Dale

 

 

Dale
Top achievements
Rank 1
 answered on 02 Dec 2016
1 answer
161 views

Previously the Telerik Control panel would update the asp core nuget package when I upgraded via the control panel (I originally purchased the MVC suite prior to ASP Core being a separate product).  As of the last update or so the core nuget package is not installed and I have to go to the download page at Telerik to get it via the independent installer.  Am I doing something wrong or is the MVC Core package not available through the control panel?

 

 

Nikolay Mishev
Telerik team
 answered on 30 Nov 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?