Telerik Forums
UI for ASP.NET MVC Forum
0 answers
248 views
Hi,

I use the version 2012.2.913 of Kendo UI for ASP.NET MVC. This is the code to build the menu, inspired by the Kendo UI Demo:
@{ 
    var MainMenu = Html.Kendo().Menu().Name("MainMenu").Orientation(MenuOrientation.Horizontal); 
    
    foreach (var NavigationItem in Model.NavigationTree.OrderBy(Item => Item.DisplayOrder)) 
    
        var Item = NavigationItem; 
    
        if (Item.SubNavigationItems.Any()) 
        
            MainMenu.Items(Items => Items.Add().Text(Item.Name).Content(@<text>@Html.Partial(MVC.Shared.Views.SubNavigation, Item.SubNavigationItems)</text>)); 
        
        else
        
            MainMenu.Items(Menu => Menu.Add().Text(Item.Name).Content(@<text>@Html.Raw(File.ReadAllText(Server.MapPath(@"~/HtmlContent/Menu." + Item.Name + ".html")))</text>)); 
        
    
@MainMenu

And this is the output:
<div id="mainmenu"
  <ul class="k-widget k-reset k-header k-menu k-menu-horizontal" id="MainMenu" data-role="menu"
    <li class="k-item k-state-default k-first"
      <a class="k-link" href="#MainMenu-1"
        Service Management 
        <span class="k-icon k-i-arrow-s"></span
      </a
      <ul class="k-group"
        <li class="k-item k-state-default k-first k-last"
          <div class="k-content" id="MainMenu-1"
               ........ 
          </div
        </li
      </ul
    </li
    ........ 
  </ul
  <script
    jQuery(function(){jQuery("#MainMenu").kendoMenu({});}); 
</script
</div>

My problem is the "#MainMenu-1" anchor link. If I click on the link, the page jumps to the target of course! The output of the Kendo UI Demo has no anchor link in this area.

How I can suppress or remove the anchor link?

What I'm doing wrong?
Sebastian
Top achievements
Rank 1
 asked on 10 Oct 2012
0 answers
127 views
Grid's ClientDetailTemplate is not expanding after using  
window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {});

IE 9 dev tools highlights this part:
c.table[0].replaceChild(i,c.tbody[0])

SCRIPT5022: DOM Exception: NOT_FOUND_ERR (8) 
kendo.all.min.js, line 9 character 234951

edit: also (only on first run) this part:
return this._data[this.tbody.find("> tr:not(.k-grouping-row,.k-detail-row,.k-group-footer)").index(a(b))]
SCRIPT5007: Unable to get value of the property '-1': object is null or undefined 
kendo.all.min.js, line 9 character 227628

Is this a know bug? Is there a shortifx?
Simon
Top achievements
Rank 1
 asked on 10 Oct 2012
2 answers
319 views
I have an existing MVC 4 app and am adding Kendo UI for ASP.NET MVC to it. When I convert the project, then the list on AutoComplete and ComboBox controls displays on top of the textbox, so the user can't see what she's typing in the textbox. For comparison, if I create a new Kendo UI for MVC Application selecting MVC 4 [0], see "Success Path" below, then the list displays below the textbox as expected.

Here are steps to reproduce both the failing and successful path. I've stared at and compare the two, and can't figure out how to make a converted MVC 4 app work correctly. Maybe I am overlooking something obvious. We're far enough into the web app that we need to convert it to use Kendo UI: starting over with a new project to get this to work is not attractive at all.

Failure path
In Visual Studio 2012, select File | New | Project | ASP.NET MVC 4 Web Application, enter a Name, select OK.
In the New ASP.NET MVC 4 Project window, for the project template select Internet Application, for the view engine select Razor, and uncheck the Create unit test project checkbox. Select OK.
In the Solution Explorer, right-click on the project and select Kendo UI for ASP.NET MVC | Convert to Kendo UI for ASP.NET MVC Application.
In the Project Configuration Wizard, select Next | Finish.
In Views | Home | Index.cshtml, add the following:

<p>
   @( Html.Kendo().AutoComplete().Name( "AutoComplete1" ).BindTo( new string [] { "aardvark", "absolute", "abstract" } ) )
</p>

In Views | Shared | _Layout.cshtml, comment out the following lines near the bottom of the file:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Compile and run. Type 'a' in AutoComplete and list displays on top of the textbox, completely hiding the user input in the textbox.


Successful path
In Visual Studio 2012, select File | New | Project | Kendo UI for MVC Web Application, enter a Name, select OK.
In the Project Configuration Wizard, select Target = ASP.NET MVC 4, View Engine = Razor, and default everything else.
Select Next | Finish.
In Views | Home | Index.cshtml, add the following:

<p>
    @( Html.Kendo().AutoComplete().Name( "AutoComplete1" ).BindTo( new string [] { "aardvark", "absolute", "abstract" } ) )
</p>

Compile and run. Type 'a' in AutoComplete and list correctly displays below the textbox.


----
[0] As an aside, I really wish the Kendo UI for MVC Application project template using MVC 4 were based on the ASP.NET MVC 4 templates that shipped with VS2012. They look like slightly updated ASP.NET MVC 3 templates.
Lukasz
Top achievements
Rank 1
 answered on 10 Oct 2012
1 answer
227 views
Hello !
I use Editor in my project but I can not do same with demo.
Help me!

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.css")"/>
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.css")" />
 
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.all.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.js")"></script>
 
 
 
// Create Editor
@(Html.Kendo().Editor()
                  .Name("AboutHotel")
                  .HtmlAttributes(new { style = "width:100%; height:200px" })
                  )
Jack
Top achievements
Rank 1
 answered on 10 Oct 2012
2 answers
411 views
When using the MVC helpers and want to update a filter on the client (without using the built-in column filters), the filter (and whole request) that gets sent to the server is different than the filter format that the MVC extensions produce so it is impossible to modify client filters when using the MVC extensions.

For example if I had a grid declaration like this:

@(Html.Kendo.Grid<Model>()
  .DataSource(dataSource => dataSource
    .Read("JsonAction", "Controller")
    .Filter(filter =>
    {
       filter.Add(f => f.ID)
            .IsEqualTo(ViewBag.ID));
 
       filter.Add(f => f.StartDate)
            .IsGreaterThan(ViewBag.StartDate)
            .And()
            .IsLessThan(ViewBag.EndDate)
    })
  )
)

The above filter would look something like this:

ID~eq~1~and~(StartDate~gte~datetme'2012-10-01'~and~StartDate~lte~datetime'2012-10-02')

Then after the user selects a different date range, I try to update the filter using JavaScript like so:

var filterExpression = {
   logic: 'and',
   field: 'PublisherID',
   operator: 'eq',
   value: @Session["PublisherID"],
   filters: [
      { field: 'StartDate', operator: 'gte', value: startDate, logic: 'and' },
      { field: 'StartDate', operator: 'lte', value: endDate }
   ]
 };
 
grid.dataSource.filter(filterExpression);
grid.dataSource.read();

This filter expression looks like the filterExpression variable when it gets sent to the server.

Is there a way to implement custom client side filtering compatible with MVC extensions (and not having to re-invent the wheel on all our own filtering and sorting that we already do) or is this another limitation of the MVC extensions?

What is the point of sending completely different filter and other expressions using the MVC extensions than the standalone Kendo UI Web package? Do you have any examples of how to manipulate the filter, sort, group and aggregate expressions defined using MVC helpers using custom client side JavaScript or is that another thing that's not currently possible with the MVC extension?
Vesselin Obreshkov
Top achievements
Rank 2
 answered on 09 Oct 2012
1 answer
254 views
Hi,

I am attempting to generate a hierarchical grid. I want the child rows to be rendered in html e.g. as links, buttons etc. But when i do this, the values rendered for each row are those of its parent record. Is this a bug? have i done something wrong?

Any help would be greatly appreciated. The code i am using on my razor view is below:

@(Html.Kendo()
    .Grid(Model.Items)
    .Name("Grid")
    .Pageable(pager => pager.Input(false).Numeric(true).Info(true).PreviousNext(true).Refresh(false))
    .HtmlAttributes(new { @class = "datatable" })
    .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(250).Events(events => events.Error("paging_OnError")).Model(model => { model.Id(p => p.Id); }))
    .Filterable(filter => filter.Enabled(false))
    .Navigatable()
    .Scrollable(resize => resize.Enabled(false))
    .Resizable(resize => resize.Columns(false))
    .Reorderable(reorder => reorder.Columns(false))
    .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
    .ColumnMenu(menu => menu.Enabled(true))
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).ClientTemplate("<input id='checkedRecords' type='checkbox' value='#=Id#' />").Title("").Width(10).HtmlAttributes(new { style = "text-align:center", @class = "checkBox" }).HeaderTemplate(@<text><input type="checkbox" title="check all rows" id="checkAllRows" style = "text-align:center;"/></text>).HeaderHtmlAttributes(new { style = "text-align:center;" }).Filterable(false).Sortable(false).IncludeInMenu(false);
        columns.Bound(m => m.PublicationDate).Title("Publication date").Width(130).Filterable(true).Sortable(true);
        columns.Bound(m => m.Title).Title("Title").ClientTemplate("<a href='Article/Detail/#=Id#' alt='' target='_blank'>#=Title#</a>").Filterable(true).Sortable(true);
    })
        .ClientDetailTemplateId("customTemplate")
)
 
<script id="customTemplate" type="text/kendo-tmpl">
    @(Html.Kendo()
        .Grid<Model.ResultModel>()
        .Name("#=Id#")
        .Sortable(sort => sort.Enabled(false))
        .Columns(columns =>
        {
            columns.Bound(m => m.Id).ClientTemplate("<input id='checkedRecords' type='checkbox' value='#=Id#' />").Title("").Width(10).HtmlAttributes(new { style = "text-align:center", @class = "checkBox" });
            columns.Bound(m => m.PublicationDate).Title("Publication date").Width(130);
            columns.Bound(m => m.Title).Title("Title").ClientTemplate("<a href='/Article/Detail/#=Id#' alt='' target='_blank'>#=Title#</a>");
        })
        .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("GetChildren", "Grid", new { Count = "#=Count#" }))
                        .Model(model => { model.Id(m => m.Id); })
                    )
        .ToClientTemplate()
    )
</script>
Simon
Top achievements
Rank 1
 answered on 09 Oct 2012
0 answers
246 views
Hi,

My problem is as follows , I have a grid inside a tab which I am setting it height via the on select event of the tab.
function onSelect() {
//var reviewCategoryGrid = $("#ReviewCategoryGrid").data("kendoGrid");
//reviewCategoryGrid.dataSource.read();
var gridItem = $("#ReviewItemGrid");
var gridItemGrid = $("#ReviewItemGrid").data("kendoGrid");
var gridCategory = $("#ReviewCategoryGrid");
var gridCategoryGrid = $("#ReviewCategoryGrid").data("kendoGrid");
var dataAreaCategory = gridCategory.find(".k-grid-content");
var dataArea = gridItem.find(".k-grid-content");
var newGridHeight = 600;
var newDataAreaHeight = newGridHeight - 100;
dataArea.height(newDataAreaHeight);
gridItem.height(newGridHeight);
// gridItemGrid.refresh();
dataAreaCategory.height(newDataAreaHeight);
gridCategory.height(newGridHeight);
// gridCategoryGrid.refresh();
}
This works well when I am clicking directly on the tabs.

However when I want to make it a little more advanced by clicking a button i tab 1, it should load some new data in a grid in tab 2 and tab 2 should be displayed. Here is the code I use for that

function selectReviewCategory(reviewCategoryID, category) {
        reviewCategoryId = reviewCategoryID;
        //reviewCategoryTitle = Title;
        var reviewItemGrid = $("#ReviewItemGrid").data("kendoGrid");
        reviewItemGrid.dataSource.read();
        var tabstrip = $("#tabstrip").data("kendoTabStrip");
        //var tabContent = $("#tabStrip").data("kendoTabStrip").contentElements(0);
        var tabReview = $("#reviewCategoriesTab");
        tabReview.children(".k-link").text(category);
        
         
        tabstrip.select("#reviewItemsTab");
}

This will then trigger the onSelect function.  But the rendering is not working. I have noticed that removing the

reviewItemGrid.dataSource.read(); line the rendering is ok (but of course with no data).

I have tried to move the tabstrip.select statement to the change event of the datasource of the grid. But that did not have an effect. What shall I do ?

Thanks

Ole


 
Ole
Top achievements
Rank 1
 asked on 09 Oct 2012
8 answers
279 views
Hello I have a grid with inline editing set. The problem is when you click add new it adds a row but everything is invisible in that row until you click in one of the cells.

The demos I see online here don't work that way at all. You click add and it shows up like it should. Can anyone help me out on this one. I feel like it's right in front of me but don't see it and first thing customer said was hey how come I can't see the line when clicking new...

Any help is appreciated

Thanks

Paul
Vladimir Iliev
Telerik team
 answered on 09 Oct 2012
1 answer
194 views
Hello,

When I am binding the dynamic dataset (columns can be 25-30 based on request) to Kendo Grid, I am getting this error at the runtime. Could anyone tell me how to solve this error. I dont have any null column header.

Error :

Microsoft JScript runtime error: Invalid template:'<tr data-uid="#=uid#"><td >${Category}</td><td >${ProductID}</td><td >${CurrencyCode}</td><td >${ISIN}</td><td >${CUSIP}</td><td >${IDC Price}</td><td >${IDC Date}</td><td >${JPM Price}</td><td >${JPM Date}</td><td >${BARC Price}</td><td >${BARC Date}</td><td >${GoldSachs Price}</td><td >${GoldSachs Date}</td><td >${BofA Price}</td><td >${BofA Date}</td><td >${MorStan Price}</td><td >${MorStan Date}</td><td >${CITI Price}</td><td >${CITI Date}</td><td >${Add. Broker Price}</td><td >${Add. Broker Date}</td><td >${Add. Broker Source}</td><td >${Gifford Price}</td><td >${Gifford Date}</td><td >${Purchase Price}</td><td >${Purchase Date}</td><td >${AmortCost Price}</td><td >${AmortCost Date}</td><td >${Master OW Price}</td><td >${Master OW Date}</td><td >${Determined Price}</td><td >${Determined Date}</td><td >${Determined Remarks}</td><td >${ModelID}</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td >'+(e(Category))+'</td><td >'+(e(ProductID))+'</td><td >'+(e(CurrencyCode))+'</td><td >'+(e(ISIN))+'</td><td >'+(e(CUSIP))+'</td><td >'+(e(IDC Price))+'</td><td >'+(e(IDC Date))+'</td><td >'+(e(JPM Price))+'</td><td >'+(e(JPM Date))+'</td><td >'+(e(BARC Price))+'</td><td >'+(e(BARC Date))+'</td><td >'+(e(GoldSachs Price))+'</td><td >'+(e(GoldSachs Date))+'</td><td >'+(e(BofA Price))+'</td><td >'+(e(BofA Date))+'</td><td >'+(e(MorStan Price))+'</td><td >'+(e(MorStan Date))+'</td><td >'+(e(CITI Price))+'</td><td >'+(e(CITI Date))+'</td><td >'+(e(Add. Broker Price))+'</td><td >'+(e(Add. Broker Date))+'</td><td >'+(e(Add. Broker Source))+'</td><td >'+(e(Gifford Price))+'</td><td >'+(e(Gifford Date))+'</td><td >'+(e(Purchase Price))+'</td><td >'+(e(Purchase Date))+'</td><td >'+(e(AmortCost Price))+'</td><td >'+(e(AmortCost Date))+'</td><td >'+(e(Master OW Price))+'</td><td >'+(e(Master OW Date))+'</td><td >'+(e(Determined Price))+'</td><td >'+(e(Determined Date))+'</td><td >'+(e(Determined Remarks))+'</td><td >'+(e(ModelID))+'</td></tr>';}return o;'


Regards,
Ravi
Dimo
Telerik team
 answered on 09 Oct 2012
0 answers
141 views
I am not getting intellisense when I tried to type the kendo command within <script> section. As shown below I am not getting intellisense when I type ".kendoAutoComplete(...". However the code is working fine. Thanks!
@section javascript
{
    <script type="text/javascript" language="javascript">
        var countries = ["Austrialia", "Canada", "United States"];
        $(function () {
            $("#countriesAutoComplete").kendoAutoComplete(countries);
        });
    </script>
}
Roy
Top achievements
Rank 1
 asked on 08 Oct 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?