Telerik Forums
UI for ASP.NET MVC Forum
1 answer
207 views

 I've created an ASP .NET 5.0 MVC project in Visual Studio 2015 and have attempted to import the Kendo.Mvc dependency using the following configuration:

 project.json

"dependencies": {
  "Kendo.Mvc": "2015.3.930",
  ...
},
 
"frameworks": {
  "dnx451": { }
},​

However, unlike my ASP .NET 4.x MVC projects, TextBoxFor and AutoComplete (among others) are not available.  This works for my 4.x projects...

@Html.Kendo().TextBoxFor(...
@Html.Kendo().AutoComplete(...

But, in my 5.0 projects, TextBoxFor and AutoComplete are not found.  Inspecting the Kendo library, I ​saw that they no longer exist in the widget factory.  And, the DLL in the package that is retrieved by Visual Studio is significantly smaller than the DLL that comes with my ASP .NET 4.x projects.

Is this intended?  And, if so, what alternative would you suggest? 

Thanks.
Alex Gyoshev
Telerik team
 answered on 30 Oct 2015
1 answer
635 views

I have a nested Grid with a ClientTemplate in a bounded column:

@(Html.Kendo().Grid<RepViewModel>().Name("RepCodes_#=UserId#").Columns(column =>
{
  column.Bound(model => model.RepCode);
  column.Bound(model => model.IsPrimary).Title("Primary").ClientTemplate("\\#=setPrimaryTemplate(data, 'RepCodes_#=UserId#')\\#");
}

The ClientTemplate displays a "Set" or "Unset" button in the external template:

<script type="text/x-kendo-template" id="setPrimaryTemplate">
  # if (IsPrimary){#
  <a href="javascript:void(0);" id="ix_unsetPrimary#=RepCode#">Unset</a>
  #}else{#
  <a href="javascript:void(0);" id="ix_setPrimary#=RepCode#">Set</a>
  #}#
</script>

In the function, I want to get the dataItem of the current row so I can set IsPrimary to true or false. How can I do that?

<script type="text/javascript">
  function setPrimaryTemplate(data, gridName) {
    var grid = $('#'+ gridName).data('kendoGrid');
    var dataItem = grid.dataItem($(this).closest("tr")); <- this is currently displaying as null
    var data = {IsPrimary: IsPrimary};
  
    var setPrimaryTemplate = kendo.template($('#setPrimaryTemplate').html());
  }
</script>

Kiril Nikolov
Telerik team
 answered on 29 Oct 2015
9 answers
507 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
122 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
541 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
314 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
248 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
668 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
160 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
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
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?