Telerik Forums
UI for ASP.NET MVC Forum
9 answers
500 views

Hi there,

I have a page with a grid, and on data bound, a specific item in the grid is set to selected via adding the k-state-selected class. Is there a way to determine on what page of the grid this item is? After ​adding the selected class, I'd like to set the grid to that page.

Thanks,
Stefan.

Kiril Nikolov
Telerik team
 answered on 29 Oct 2015
1 answer
121 views

When I have a kendo editor inside a tabstrip it throws 

 Uncaught TypeError: Cannot use 'in' operator to search for 'getSelection' in undefine

Here is a sample

http://dojo.telerik.com/AGavE

Nencho
Telerik team
 answered on 27 Oct 2015
2 answers
538 views

I am trying to export to excel a grid that has detail grids. I want to be able to export all pages of the detail grids as well.

I have followed the example provided here: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/excel/detail-grid-export

I get the master grid export fine, I end up with empty rows where the detail data should be.

 Here is my View code:  The export scripts start at line 85.

001.<div class="row">
002.    <div class="col-lg-12">
003.        <p>
004.            @(Html.Kendo().Grid<User_Tracking.Models.SystemTypesModel>()
005.                  .Name("grid")
006.                  .Columns(columns =>
007.                  {
008.                      columns.Bound(c => c.TypeName).Title("System Name");
009.                      columns.Bound(c => c.Enabled);
010.                      columns.Bound(c => c.AccessCount).Title("Users with system access");
011.                  })
012.                  .ToolBar(toolbar =>
013.                  {
014.                      toolbar.Excel();
015.                  })
016.                  .Excel(e => e.AllPages(true))
017.                  .ClientDetailTemplateId("template")
018.                  .HtmlAttributes(new { style = "height:500px;" })
019.                  .ColumnMenu()
020.                  .Pageable()
021.                  .Events(e => e.ExcelExport("systems_excelExport"))
022.                  .Selectable(selectable =>
023.                  {
024.                      selectable.Mode(GridSelectionMode.Multiple);
025.                      selectable.Type(GridSelectionType.Cell);
026.                  })
027.                  .Sortable(sortable =>
028.                  {
029.                      sortable.SortMode(GridSortMode.MultipleColumn);
030.                  })
031.                  .Filterable()
032.                  .Scrollable()
033.                  .DataSource(dataSource => dataSource
034.                      .Ajax()
035.                      //.ServerOperation(false)
036.                      .Read(read => read.Action("SystemAccess_Read", "SystemAccess"))
037.                  )
038.                  .Events(e => e.DataBound("dataBound"))                 
039.            )
040.        </p>
041.    </div>
042.</div>
043. 
044. 
045.<script id="template" type="text/kendo-tmpl">
046.    @(Html.Kendo().Grid<User_Tracking.Models.UserViewModel>()
047.        .Name("grid_#=SystemId#")
048.        .Columns(r =>
049.        {
050.            r.Bound(c => c.UserName);
051.            r.Bound(c => c.FirstName);
052.            r.Bound(c => c.LastName);
053.            r.Bound(c => c.EmailAddress);
054.            r.Bound(c => c.Dept.DeptName);
055.            r.Bound(c => c.Loc.Name);
056.            r.Bound(c => c.Con.Name);
057.            r.Bound(c => c.Comments);
058.            r.Bound(c => c.DateEntered).Format("{0:MM-dd-yyyy}");
059.            r.Bound(c => c.Terminated);
060.            r.Bound(c => c.DateTerminated).Format("{0:MM-dd-yyyy}");
061.        })
062.        .DataSource(ds => ds
063.            .Ajax()
064.            .Read(r => r.Action("HBUsers_Read", "SystemAccess", new { SysId = "#=SystemId#" }))
065.            .PageSize(10)
066.        )
067.        .Events(e => e.ExcelExport("users_excelExport"))
068.        .Pageable()
069.        .Selectable(selectable =>
070.        {
071.            selectable.Mode(GridSelectionMode.Multiple);
072.            selectable.Type(GridSelectionType.Cell);
073.        })
074.      .Sortable(sortable =>
075.      {
076.          sortable.SortMode(GridSortMode.MultipleColumn);
077.      })
078.        //.Filterable()
079.        .Scrollable()
080.        //.ColumnMenu()
081.        .ToClientTemplate()
082.    )
083.</script>
084. 
085.<script>
086.    var detailExportPromises = [];
087. 
088.    var dataSource = new kendo.data.DataSource({
089.        type: "aspnetmvc-ajax",
090.        transport: {
091.            read: "@Url.Action("HBCUsers_Read", "SystemAccess")",
092.            type: "POST"
093.        },
094.        schema: {
095.            data: "Data",
096.            total: "Total",
097.            error: "Errors"
098.        }
099.    });
100. 
101.    dataSource.read();   
102. 
103.    function dataBound() {
104.        detailExportPromises = [];       
105.    }
106. 
107.    function users_excelExport(e) {
108.        e.preventDefault();
109.    }
110. 
111.    function systems_excelExport(e) {
112.        e.preventDefault();
113. 
114.        var workbook = e.workbook;
115. 
116.        detailExportPromises = [];
117. 
118.        var masterData = e.data;
119. 
120.        for (var rowIndex = 0; rowIndex < masterData.length; rowIndex++) {
121.            exportChildData(masterData[rowIndex].SystemId, rowIndex);
122.        }
123. 
124.        // wait for all detail grids to finish exporting
125.        $.when.apply(null, detailExportPromises)
126.        .then(function () {
127.            // get the export results
128.            var detailExports = $.makeArray(arguments);
129. 
130.            // sort by masterRowIndex
131.            detailExports.sort(function (a, b) {
132.                return a.masterRowIndex - b.masterRowIndex;
133.            });
134. 
135.            // add an empty column
136.            workbook.sheets[0].columns.unshift({ width: 30 });
137. 
138.            // prepend an empty cell to each row
139.            for (var i = 0; i < workbook.sheets[0].rows.length; i++) {
140.                workbook.sheets[0].rows[i].cells.unshift({});
141.            }
142. 
143.            // merge the detail export sheet rows with the master sheet rows
144.            // loop backwards so the masterRowIndex doesn't need to be updated
145.            for (var i = detailExports.length - 1; i >= 0; i--) {
146.                var masterRowIndex = detailExports[i].masterRowIndex + 1;
147. 
148.                var sheet = detailExports[i].sheet;
149. 
150.                // prepend an empty cell to each row
151.                for (var ci = 0; ci < sheet.rows.length; ci++) {
152.     //Error occurs here, the cells[0].value is undefined. So I put a check for length
153.                    if (sheet.rows[ci].cells.length > 0) {
154.                        if (sheet.rows[ci].cells[0].value) {
155.                            sheet.rows[ci].cells.unshift({});
156.                        }
157.                    }
158.                }
159. 
160.       // insert the detail sheet rows after the master row
161.       [].splice.apply(workbook.sheets[0].rows, [masterRowIndex + 1, 0].concat(sheet.rows));
162.            }
163. 
164.            // save the workbook
165.            kendo.saveAs({
166.                dataURI: new kendo.ooxml.Workbook(workbook).toDataURL(),
167.                fileName: "Users by System Export.xlsx"
168.            });
169.        });
170.    }
171. 
172.    function exportChildData(SystemID, rowIndex) {
173.        var deferred = $.Deferred();
174. 
175.        detailExportPromises.push(deferred);
176. 
177.        var rows = [{
178.            cells: [
179.                { value: "UserName" },
180.                { value: "FirstName" },
181.                { value: "LastName" },
182.                { value: "EmailAddress" },
183.                { value: "Dept.DeptName" },
184.                { value: "Loc.Name" },
185.                { value: "Con.Name" },
186.                { value: "Comments" },
187.                { value: "DateEntered)" },
188.                { value: "Terminated" },
189.                { value: "DateTerminated" }
190.            ]
191.        }];
192. 
193.        dataSource.filter({ field: "SystemId", operator: "eq", value: SystemID });
194.        dataSource.fetch(function () {
195.            var view = dataSource.view();           
196.            if (view.length > 0) {
197.                console.log(view.length);
198.                console.log(view[0].FirstName);
199.                console.log(view[0].Loc.Name)
200.            }
201.        });
202. 
203. 
204.        var exporter = new kendo.ExcelExporter({
205.            columns: [
206.                { value: "UserName" },
207.                { value: "FirstName" },
208.                { value: "LastName" },
209.                { value: "EmailAddress" },
210.                { value: "Dept.DeptName" },
211.                { value: "Loc.Name" },
212.                { value: "Con.Name" },
213.                { value: "Comments" },
214.                { value: "DateEntered)" },
215.                { value: "Terminated" },
216.                { value: "DateTerminated" }
217.            ],
218.            dataSource: dataSource
219.        });
220. 
221.        exporter.workbook().then(function (book, data) {
222.            deferred.resolve({
223.                masterRowIndex: rowIndex,
224.                sheet: book.sheets[0]
225.            });
226.        });
227.    }
228.</script>

Dimiter Madjarov
Telerik team
 answered on 27 Oct 2015
1 answer
310 views

Hello.

 I have been googling this today and I haven't come up with a decent example.  I have grid with a popup editor.  I can set the size of the grid, but the controls are all left justified which makes for a very large form that is not very responsive.  Are there any examples of a multi-column popup editor?  I know a large vertical form won't cut it for the boss.  I might be able to convince him popups are not bad if I can do a multi column layout.  I tried multiple things...fieldsets...rows...spans all using the bootstrap grid to no avail.  Any suggestions?  I guess I could use a bootstrap modal instead.

Dimiter Madjarov
Telerik team
 answered on 27 Oct 2015
1 answer
44 views

This does not appear possible with the MVC/Kendo Grid.  I am wondering why this was removed.

I would like to see this replaced if at all possible.  It was really handy.

Thanks.

Pavlina
Telerik team
 answered on 26 Oct 2015
1 answer
242 views
How would I go about printing the header of my grid on every page? 
Maria Ilieva
Telerik team
 answered on 26 Oct 2015
3 answers
661 views

I have a model with an enum as a data type on a property.  In the grid I want to show an image representation for this enum.  Whats the best way to do this?

I've tried using the ClientTemplate to do this.  I'm not sure what I need.  I have tried the following without success:

@(Html.Kendo().Grid<BatchEditModel>()
        .Name("mygrid")
        .Columns(columns =>
        {
            columns.Bound(bem => bem.MyInfo.Number).ClientTemplate(
                    "# if (MyStatus == " + MyStatusConstants.Complete + ") { #
                    <span class="icon-oo-my-img-32" style="font-size: 1.2em; color: green"></span>
                    "# } #"
                    "# else if (MyStatus == " + MyStatusConstants.PWHTRequired + ") { #"
                    <span class="icon-oo-my-img-32" style="font-size: 1.2em; color: darkcyan"></span>
                    "# } #"
                    "# else if (MyStatus == " + MyStatusConstants.Myed + ") { #"
                    <span class="icon-oo-my-img-32" style="font-size: 1.2em; color: blue"></span>
                    "# } #"
                )

This has errors in the razor page.  I had the all the text wrapped in quotes and used + to concatenate them. 

The question is, I have an enum as a value, but I want to display an image - which is a custom glyph icon on the span.  What is the best way to implement this?

Thanks

Andez

Dimiter Madjarov
Telerik team
 answered on 23 Oct 2015
4 answers
159 views

Hi.  I have 2 screen with a Telerik MVC grid.  First one is for Orders and second one for OrderDetails.  I use server binding.

The first one works fine.  It shows Orders data in the grid.  Each row has a Details button and when I click on the button, the second screen shows up with the OrderDetails data of the Order data you selected  in the grid.  Here each row has a Edit button that is supposed to perform inline editing.

At this point, the URL is http://myweb.com/Order/Details/123.  123 is the OrderId in the Orders table.

The problem happens when I click on Edit button for the row data.  It does a GET request with OrderDetailId automatically.  The page expects OrderId not OrderDetailId.

So, at this point, the page expects http://myweb.com/Order/Details/##OrderId## but the grid does http://myweb.com/Order/Details/##OrderDetailId##.

How should I handle this case?  Could I manage what URL format the grid uses for the Edit button?

Rosen
Telerik team
 answered on 23 Oct 2015
1 answer
387 views

Hi,

 I am trying to create a grid with one column to return a result similar to your example here: http://demos.telerik.com/kendo-ui/grid/rowtemplate.  I am using the server-side RowTemplate code such as...

            @(Html.Kendo().Grid(Model.Results)
                .Name("Components")
                .RowTemplate(grid =>
                    @<text>
                    <tr>
                        <td>
                            ID: @item.ComponentID<br>

                            Name: @item.Name

                            ... etc
                        </td>
                    </tr>
                    </text>
                )

            .DataSource(d => d.Ajax().ServerOperation(false))
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            )

 I am basing my code on this example:

@model IEnumerable<Product>@(Html.Kendo().Grid(Model).Name("grid")

    .RowTemplate(grid => @<text><div>Product Name: @product.ProductName</div><div>Units In Stock: @product.UnitsInStock</div></text>))

​The output completely ignores the rowFormat and prints every field in the model object as a separate column (see attached photo).

I have tried almost everything - client templates, etc.  Nothing stops every column from being displayed.

 Any ideas would be appreciated.

Dimiter Madjarov
Telerik team
 answered on 22 Oct 2015
1 answer
411 views

I have two classes Category and Product and I want to expend products when users click a category node on the treeview.

My View is as follows:

    <h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="row">
    <div class="col-md-3">
        <label class="k-label-top">TreeView</label>
        @(Html.Kendo().TreeView().Name("treeview")
        .DataSource(datasource => datasource
                            .Read(read => read.Action("Categories", "Categories"))
            ).DataTextField("Name")
        )
    </div>
    
</div>

 

Controller

        public ActionResult Categories(int? id)
        {
            var model = db.Categories
                .Where(p => p.Id == id.Value || p.Id == null)
                .Select(p => new {
                    id = p.Id,
                    Name = p.Name,
                    hasChildren = p.Products.Any()
                });
            return this.Json(model, JsonRequestBehavior.AllowGet);
        }

Categories Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EmployeeTreeView.Models
{
    public class Category
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual ICollection<Product> Products { get; set; }
    }
}

 

Products Class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EmployeeTreeView.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual Category Category { get; set; }
        public int CategoryId { get; set; }
    }
}

 When I remove the where clause in the controller the parent node just loops over and over again, but no child nodes are displayed.

Kabelo
Top achievements
Rank 1
 answered on 22 Oct 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?