Telerik Forums
UI for ASP.NET MVC Forum
3 answers
252 views
What CSS property am I missing or do I need to add so that my child menu will show up when I hover over the parent item in IE?

Currently, when I hover over the parent item that has a child menu, you can see the border around the child menu, but the menu itself is transparent in IE. Only after I hover over an item in the child menu does the background-color and text show up using IE.  Firefox and chrome both work as expected. I did use the theme builder based on the silver theme, but only changed the gradient of the widget and the gradient of the widget states. In order to get the gradients to show up correctly in IE, I had to add these lines of code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3695b3, endColorstr=#00536e, GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3695b3, endColorstr=#00536e, GradientType=0);


Is there a better way to get the gradient working in IE and is this related to the child menu not showing?

An image is attached to show what I see.  Any ideas?

Iliana Dyankova
Telerik team
 answered on 31 Oct 2013
1 answer
186 views
I'm trying to find the Examples that according to multiple posts should be at C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q2 2013\wrappers\aspnetmvc\Examples.  

My version was recently updated by the Telerik Control Panel and I don't have the Examples folder. (I do have Binaries, EditorTemplates, LegacyThemes.)

Have they been moved or removed?  Hard to follow the demos without the Example model code.

Thanks,
Jeff Trotman
Missing User
 answered on 31 Oct 2013
2 answers
109 views
Hi all

I'm running into an annoying problem with the grid colum template.

I have a ASP.NET MVC 4 app that use a kendo grid to render a set of dynamic column.

The razor code of the view is something like this

<div>
    @(Html.Kendo().Grid(Model.Items)
    .Name("GridReportCommerciale")
    .Columns(columns =>
    {
        columns.Bound(p => p.Workcentre)
            .Template(@<div onclick="openVincoli('@item.Workcentre')" class="contentCell" style="font-weight:bold;font-size:11px" >@item.Workcentre</div>)
            .Title("WC").Width(60);
 
        foreach (var sett in Model.SettimaneVisibili)
        {
            columns.Template(@<text>
                    @if (item[sett.Clone()] != null && item[sett.Clone()].Diametro > 0)
                    {
                        if (item[sett].Stato == "R")
                        {
                            <div onclick="openCampaign('@item[sett.Clone()].RiferimentoCampagna')" class="contentCell" style="background-color:#FF8C00;">
                                <div>@string.Format("{0:0.00}", item[sett.Clone()].Diametro)</div>
                                <div>@string.Format("({0:#,##0})", item[sett.Clone()].Quantita)</div>
                            </div>
                        }
                        else
                        {
                            <div onclick="openCampaign('@item[sett.Clone()].RiferimentoCampagna')" class="contentCell" style="background-color:#FFFFE0;">
                                <div>@string.Format("{0:0.00}", item[sett.Clone()].Diametro)</div>
                                <div>@string.Format("({0:#,##0})", item[sett.Clone()].Quantita)</div>
                            </div>
                        }
                    }
                    else
                    {
                        <div class="contentCell" >
                            <div> </div>
                            <div> </div>
                        </div>
                    }
                </text>)
                .HeaderTemplate(
                    @<div>
                        <div>@string.Format("{0:00}-{1:0000}", sett.Clone().NumeroSettimana, sett.Clone().Anno)</div>
                        <div>@string.Format("{0}", sett.Clone().GetDayRange())</div>
                    </div>)
                .Width(70);
        }
    })
    .Scrollable()
    .ToolBar(t=>{
        t.Template(@<div class="k-toolbar k-grid-toolbar k-grid-top">
            <a class="k-button k-button-icontext " href="/ReportCommerciali?pos=-1">
                <span></span>
                Indietro
            </a>
            <a class="k-button k-button-icontext " href="/ReportCommerciali?pos=1">
                <span></span>
                Avanti</a>
            <span>@Model.VisibleRangeDescription</span>
        </div>);
    })
    //.Resizable(resize => resize.Columns(true))
    //.Reorderable(reorder => reorder.Columns(false))
    .HtmlAttributes(new { style = "height: 700px;" })
                                )
 
</div>

The problem is that in debug mode this snippet work properly and produce the expected result.
Once deployed (on a Windows Server 2008 R2, IIS 7.5) the snippet render the right number of column but in all of them show data of the last item
of the collection Model.SettimaneVisibili on which i'm iterating.

I've attached two images that show the good (expected) result, and the wrong one.

Any Idea?

Matteo
Top achievements
Rank 2
 answered on 31 Oct 2013
11 answers
188 views
Hi!

Could you please see if you can reproduce this behavior:

1) I create a recurring event, e.g. repeat daily for the next five days (Mon-Fri this week).
2) I edit the Wednesday event, e.g. make it shorter.
3) I then go back to the first event (Mon) and double-click it to edit the title.
4) Now I have TWO events on Wednesday; the one I shortened in no. 2 and the recurring event w/edited title.

Is this the expected behavior?

Best regards,
  Gunnar

gunnisen
Top achievements
Rank 1
 answered on 31 Oct 2013
2 answers
121 views
In the previous Telerik MVC (pre Kendo), if you had editing (insert/edit) enabled and had a defined the following:

<other trid stuff>
.Editable( editing => editing
   .Enabled((bool)true)
   .Mode(GridEditMode.InLine)
   .TemplateName("MyEditTemplate")
)
<rest of grid stuff here>

upon insert or edit, it would open up the MyEditTemplate below the grid row (like a detail template) and allow you to edit inline (not in the grid cells).

I'm trying to make this happen with Kendo for MVC - and it doesn't seem to work - it adds that blank row and puts the edit controls right in the grid cells.

Am I missing something or is this out of the box anymore in Kendo UI?

Thanks In Advance,

Rene.
Vladimir Iliev
Telerik team
 answered on 31 Oct 2013
5 answers
432 views
Hi! 

I have been trying out the Kendo UI Grid using the MVC wrappers and I must say that so far Kendo UI Grid is a great product!

But I have stumbled upon a java script error: "Uncaught TypeError: Cannot call method 'set' of undefined" in the kendo.web.min.js file, it is a bit hard to debug considering I only have access to the minified version of the file.  

The error occurs when I'm applying more than 2 filters on a column using the CompositeFilterDescriptor, the filtering still works fine but the java script error is preventing all java script on the page to execute.

Code example:
var filters = new List<IFilterDescriptor>();

var cfd = new CompositeFilterDescriptor();
cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;

//The error occurs if filtersToAdd contains more than 2 filters to be added to that column
foreach (var filter in filtersToAdd)
{
          cfd.FilterDescriptors.Add(new FilterDescriptor(Member, FilterOperator.IsEqualTo, FilterValue));
}

filters.Add(cfd);

return builder.DataSource(s => s.Server().PageSize(pageSize).Filter(f => f.AddRange(filters)));

Regards,
Joakim Thun

Rosen
Telerik team
 answered on 31 Oct 2013
3 answers
552 views
It seems that every different attempt I try to get one dropdownlist to populate based on a different dropdownlist fails miserably.  Here's my latest attempt.

Instead of doing GridEditMode.InLine I'm doing GridEditMode.PopUp with this:
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditTemplate"))
When I click the edit button I get:

Uncaught ReferenceError: drop is not defined
(anonymous function)
dt.extend.get
x.extend.get
D.widget.value.v.extend.init
_.extend.applyBinding
_.extend.bind
a
a
a
a
a
a
s
d.extend.refresh
d.extend.init
(anonymous function)
e.extend.each
e.fn.e.each
e.fn.(anonymous function)
T.extend._createPopupEditor
T.extend.editRow
(anonymous function)
f.event.dispatch
h.handle.i

Here is the code to EditTemplate:
@using GIS.Services.HTRAM.Types
@using HResource = ResourceHelper;
 
@model GIS.Services.HTRAM.Types.HtramProjectCategoryResults
 
<input name="DropDownSelected" type="Hidden" id="DropDownSelected" value="0" />
 
<script type="text/javascript">
    function filterCategoryValues() {
        return 13;
    }
</script>
 
<div class="display-label-table">
    <div class="display-label-row">
        @Html.Label(@HResource.HTRAMResource.Category, new { @class = "display-label-cell" })
        @(Html.Kendo().DropDownList()
          .Name("categories")
          .DataTextField("Name")
          .DataValueField("CategoryID")
          .DataSource(source => {
                   source.Read(read => {
                       read.Action("GetCategories", "Category");
                   });
              })
          .Value(Model.CategoryID.ToString())
        )
    
    </div>
</div>
 
@{
    if ( (ViewData["categoryValues"] as List<HtramCategoryValue>).Count > 0)
    {
    <div class="display-label-table">
        <div class="display-label-row">
            @Html.Label(@HResource.HTRAMResource.MilePostFrom, new { @class = "display-label-cell" })
            @Html.EditorFor(model => model.MilePostFrom, new { @class = "display-field-cell" })
            @Html.ValidationMessageFor(model => model.MilePostFrom)
        </div>
        <div class="display-label-row">
            @Html.Label(@HResource.HTRAMResource.MilePostTo, new { @class = "display-label-cell" })
            @Html.EditorFor(model => model.MilePostTo, new { @class = "display-field-cell" })
            @Html.ValidationMessageFor(model => model.MilePostTo)
        </div>
        <div class="display-label-row">
            @Html.Label(@HResource.HTRAMResource.Comment, new { @class = "display-label-cell" })
            @Html.EditorFor(model => model.Comment, new { @class = "display-field-cell" })
            @Html.ValidationMessageFor(model => model.Comment)
        </div>
        <div class="display-label-row">
            @Html.Label(@HResource.HTRAMResource.Reference, new { @class = "display-label-cell" })
            @Html.EditorFor(model => model.Reference, new { @class = "display-field-cell" })
            @Html.ValidationMessageFor(model => model.Reference)
        </div>
 
        @{
        if ((ViewData["categoryValues"] as List<HtramCategoryValue>)[0].Name != "")
        {
            <div class="display-label-row">
                @Html.Label(@HResource.HTRAMResource.Value, new { @class = "display-label-cell" })
                 
                @(Html.Kendo().DropDownList()
                      .Name("category-drop-val")
                      .DataTextField("Name")
                      .DataValueField("CategoryValueID")
                      .DataSource(source => {
                            source.Read(read =>
                            {
                                read.Action("GetCategoryValues", "Category")
                                    .Data("filterCategoryValues");
                            })
                                .ServerFiltering(true);
                      })
                      .Enable(false)
                      .AutoBind(false)
                      .CascadeFrom("categories")
                      .Value(Model.CategoryValueID.ToString())
                      )
            </div>
 
        }
        else
        {
            <div class="display-label-row">
                @Html.Label(@HResource.HTRAMResource.Value, new { @class = "display-label-cell" })
                @Html.EditorFor(model => model.CategoryValue, new { @class = "display-field-cell" })
                @Html.ValidationMessageFor(model => model.CategoryValue)
            </div>
        }
        }
    </div>
    }
}
@Html.HiddenFor(model => model.ProjectID)
@Html.HiddenFor(model => model.CategoryID)
@Html.HiddenFor(model => model.CategoryID)
@Html.HiddenFor(model => model.CategoryName)
@Html.HiddenFor(model => model.CategoryValueID)
@Html.HiddenFor(model => model.CategoryWeight)
@Html.HiddenFor(model => model.CreateDate)
@Html.HiddenFor(model => model.CreateUser)
@Html.HiddenFor(model => model.ProjectID)
@Html.HiddenFor(model => model.ProjectsCategoryResultsID)
@Html.HiddenFor(model => model.VulnerabilityValue)

Does anyone have an idea what is causing this?

Matt
Top achievements
Rank 1
 answered on 30 Oct 2013
1 answer
462 views
Hello,
if i have the filter-option "contains" and type my searchstring in the combobox, all is ok and my item is set correct.
but now, if i set the value by sourcecode with "value()", the item will not be selected, because the filter is active and the
item is not found in the filtered list. if i click on the dropdownarrow or erase it with delete-button, all items are there and values-elect is working.

how can i delete the last filtering or refresh the combobox? the datasource has not changed.
thanks for help :)

Edit:

here is a jsfiddle example (http://jsfiddle.net/yzBdn/3/)
just type "2" in the combobox, choose the item, then type 3 in the input and leave the input (f. ex. TAB) --> the item can not be found. the filtered list doesn't contain the item with the id "3". if you open the dropdown with the cursor, all elements were listed.

i've tested:
var $elem = e.container.find("#Combobox").data("kendoComboBox"); // the Combobox in in a Grid (inline Editing)
$elem.value("");
$elem.text("");
$elem.dataSource.read();
Alexander Valchev
Telerik team
 answered on 30 Oct 2013
2 answers
283 views
ASP.Net MVC 

I have a combo box that is bound to a controller action that sends back json data. It can have anywhere from 20k to 40k rows. 

If the box is blank and the user hits the down arrow, it locks up and crashes the browser.

If the user types 3 letters which triggers the autocomplete, it suggests the right answers. But again, if the user hits the down arrow, it crashes. If the user clears the text box and tries to search again, behavior gets very slow and eventually crashes. 

The performance of this is absolutely miserable. 

I have a constant datasource. I want it to be loaded once into the page so that no traffic needs to happen after the initial load. But, I'm unsure if I even want that because I can't seem to stop the Open() event from causing a problem. Ideally, if the box is blank, I don't want anything to show up in the drop down, which defeats the binding purpose. I've played with serverfiltering (true) and now the box locks up immediately and won't even make the call. 

The main problem: Bind to a source of 20-40k rows of below and hit the drop down arrow on the combo box: crash. How do I fix that? And, how can I set a page variable to my json result so I don't have to make the network call over and over each time someone types data into the box? 

Data looks like an array of these:
{"Id":9024,"Name":"My Data Display Text"}

Code:
<%: Html.Kendo().ComboBox().Name("myId")
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(ds => ds.Read("MyList", "App"))
                .AutoBind(false)
                .MinLength(3)
                .Suggest(true)
                .Filter("startswith")
                .HtmlAttributes(new {style = "width:200px;height:24px;font-size:12px; padding 1px;"})           
                %>

[Authorize]
        public ActionResult MyList()
        {
            if (Session["myList"] == null)
            {
                Session["myList"] = this.Db.ViewMyLists.OrderBy(d => d.Name).ToList();
            }
            return Json((List<ViewMyList>)Session["myList"], JsonRequestBehavior.AllowGet);
        }



Update #2: I've also tried binding to the OnOpen event and checking the length of the textbox based on another post on the forum. I used the following:
.Events(e => { e.Open("onOpen2"); })

        function onOpen2(e) {
            alert('hi');
        };

The browser immediately locks up, and after 60 seconds or so, the javascript alert finally pops up. Even if I could prevent the user from dropping down the combo, its only hiding the error anyway and the freeze still occurs. Looking for some serious help here!
Nani
Top achievements
Rank 2
 answered on 30 Oct 2013
2 answers
304 views
Hi,

I'm trying to use the grid hierarchy feature but I'm not able to make it work.  I'm getting "Invalid template" error no matter what I try.  I've followed the sample at http://demos.kendoui.com/web/grid/hierarchy.html but no lock.  The main grid by itself works fine.

Here's the HTML:
@(Html.Kendo().Grid(Model.Cart.Products)
    .Name("ProductGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.HCode).Title("HCode").Width(90);
        columns.Bound(p => p.VCode).Title("VCode").Width(90);
        columns.Bound(p => p.Desc).Title("Description");
        columns.Bound(p => p.Qty).Title("Qty").Width(70).ClientTemplate("#=dispTextbox(HCode, Qty)#").HeaderHtmlAttributes(new { @style = "text-align:center;" }).HtmlAttributes(new { style = "text-align:center;" });
        columns.Bound(p => p.UPrice).Width(100).Title("Unit<br />Price").Format("{0:c}").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).ClientFooterTemplate("Total:").FooterHtmlAttributes(new { style = "text-align:right;" });
        columns.Bound(p => p.XPrice).Width(100).Title("Extended<br />Price").ClientTemplate("#= kendo.format('{0:c}', Qty * UPrice) #").FooterHtmlAttributes(new { style = "text-align:right;" }).ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:center;" });
    })
    .ClientDetailTemplateId("productsOrderTemplate")
    .Resizable(resizing => resizing.Columns(true))
    .Pageable()
    .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.VCode).Count();
            aggregates.Add(p => p.UPrice).Sum();
            aggregates.Add(p => p.XPrice).Sum();
        })
        .Model(model => model.Id(p => p.HCode))
    )
    .Events(events => events.DataBound("dataBoundProds"))
)
<script id="productsOrderTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid(Model.Cart.ProductOrders)
            .Name("Orders_#=HCode#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderNo).Width(101).Title("Order Number");
                columns.Bound(o => o.Date).Width(140).Title("Date");
                columns.Bound(o => o.Qty).Width(100).Title("Quantity");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("loadProductsOrder", "OrderEntry", new { HCode = "#=HCode#" }))
            )
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBoundProds() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
Here's the error:

Error: Invalid template:'
                                    <div class="k-widget k-grid" id="Orders_#=HCode#"><table cellspacing="0"><colgroup><col style="width:101px" /><col style="width:140px" /><col style="width:100px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="OrderNo" data-title="Order Number" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=OrderNo-asc">Order Number</a></th><th class="k-header" data-field="Date" data-title="Date" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Date-asc">Date</a></th><th class="k-header" data-field="Qty" data-title="Quantity" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Qty-asc">Quantity</a></th></tr></thead><tbody><tr class="t-no-data"><td colspan="3"></td></tr></tbody></table></div><script>
    jQuery(function(){jQuery("\#Orders_#=HCode#").kendoGrid({"columns":[{"title":"Order Number","width":"101px","field":"OrderNo","encoded":true},{"title":"Date","width":"140px","field":"Date","encoded":true},{"title":"Quantity","width":"100px","field":"Qty","encoded":true}],"sortable":true,"scrollable":false,"dataSource":{"transport":{"read":{"url":"/OrderEntry/loadProductsOrder?HCode=#=HCode#"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"Date":{"type":"date","defaultValue":null},"sDate":{"type":"string"},"Qty":{"type":"number"},"OrderNo":{"type":"string"}}}}}});});
<\/script>
                                ' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n                                    <div class="k-widget&';32;k-grid" id="Orders_;o+='=HCode';"><table cellspacing="0"><colgroup><col style="width:101px" /><col style="width:140px" /><col style="width:100px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="OrderNo" data-title="Order&;o+='32;Number" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=OrderNo-asc">Order Number</a></th><th class="k-header" data-field="Date" data-title="Date" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Date-asc">Date</a></th><th class="k-header" data-field="Qty" data-title="Quantity" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Qty-asc">Quantity</a></th></tr></thead><tbody><tr class="t-no-data"><td colspan="3"></td></tr></tbody></table></div><script>\n\tjQuery(function(){jQuery("#Orders_'+(HCode)+'").kendoGrid({"columns":[{"title":"Order Number","width":"101px","field":"OrderNo","encoded":true},{"title":"Date","width":"140px","field":"Date","encoded":true},{"title":"Quantity","width":"100px","field":"Qty","encoded":true}],"sortable":true,"scrollable":false,"dataSource":{"transport":{"read":{"url":"/OrderEntry/loadProductsOrder?HCode='+(HCode)+'"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"Date":{"type":"date","defaultValue":null},"sDate":{"type":"string"},"Qty":{"type":"number"},"OrderNo":{"type":"string"}}}}}});});\n<\/script>\n                                ';}return o;'

Thanks

PT
Pauline
Top achievements
Rank 1
 answered on 30 Oct 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?