Telerik Forums
UI for ASP.NET MVC Forum
5 answers
452 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
561 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
484 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
310 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
319 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
5 answers
73 views
I get an error on all my Kendo controls, the error does not stop them from running, but stops the use of intellisence
Thanks

Error 4 'Kendo' is not a member of 'System.Web.Mvc.HtmlHelper(Of EF.OutOfNetwork)'. D:\HomelyTFS\Homely\Homely.co\Homely.Web\Areas\Admin\Views\Shared\_CsvGrid.vbhtml 

Dim CsvGrid As Kendo.Mvc.UI.Grid(Of BO.Models.OutOfNetwork) = Html.Kendo.Grid(Of BO.Models.OutOfNetwork).Name("CsvGrid") _
.Columns(Sub(columns)
.....

Alan Mosley
Top achievements
Rank 1
 answered on 30 Oct 2013
1 answer
220 views
Attached the screenshot with error messages found in Chrome console. Please kindly check.

Especially for the Themebuilder, I would like to review if we could use it for customizing the widgets stylesheet to fit our UI design
Dimo
Telerik team
 answered on 30 Oct 2013
1 answer
888 views
Hi,

Is there any limit on file size that we upload. I want to know how to upload more than 200MB files?

Thank you,
Srini
Dimiter Madjarov
Telerik team
 answered on 29 Oct 2013
1 answer
237 views
I'm getting a 404 not found when I click either the Edit, Create, or Delete buttons.  Read works.  I thought this would be pretty straight forward but.....?  Here's my code:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CategoryResultsUpdate([DataSourceRequest] DataSourceRequest request, ProjectCategoryResults pcr)
{
    if (pcr != null && ModelState.IsValid)
    {
        this.m_restWrapper.EditProjectCategoryResults(pcr);
    }
 
    return Json(new[] { pcr }.ToDataSourceResult(request, ModelState));
}
 
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CategoryResultsDestroy([DataSourceRequest] DataSourceRequest request, ProjectCategoryResults pcr)
{
    //if (pcr != null && ModelState.IsValid)
    //{
    //    this.m_restWrapper.EditProjectCategoryResults(pcr);
    //}
 
    return Json(new[] { pcr }.ToDataSourceResult(request, ModelState));
}
 
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CategoryResultsCreate([DataSourceRequest] DataSourceRequest request, ProjectCategoryResults pcr)
{
    if (pcr != null && ModelState.IsValid)
    {
        pcr.CreateDate = DateTime.Now;
        this.m_restWrapper.CreateProjectCategoryResults(pcr);
    }
 
    return Json(new[] { pcr }.ToDataSourceResult(request, ModelState));
}
@model GIS.Portal.Models.ProjectContentViewModel
 
 
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
 
@(Html.Kendo().Grid<ivision>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(d => d.Name).Title("Divisions");
        })
        .ClientDetailTemplateId("templateSub")
        .HtmlAttributes(new { style = "height:800px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Divisions", "Division", new { projectID = Model.ProjectID }))
        )
)
 
<script id="templateSub" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<SubDivision>()
            .Name("grid_#=DivisionID#")
            .Columns(columns =>
            {
                columns.Bound(s => s.Name).Title("SubDivisions");
 
            })
            .ClientDetailTemplateId("templateCat")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("SubDivisions", "SubDivision", new { projectID = Model.ProjectID, divisionID = "#=DivisionID#" }))
            )
            .Sortable()
            .ToClientTemplate()
    )
</script>
 
<script id="templateCat" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ProjectCategoryResults>()
            .Name("grid_#=SubDivisionID#")
            .Columns(columns =>
            {
                columns.Bound(pcr => pcr.CategoryName);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
            })
            .ToolBar(toolBar => toolBar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InLine)) 
            .DataSource(
                dataSource => dataSource.Ajax()       
                .PageSize(20)       
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(pcr => pcr.ProjectsCategoryResultsID))
                .Read(read => read.Action("CategoryResultsRead", "Category", new { projectID = Model.ProjectID, subDivisionID = "#=SubDivisionID#" }))
                .Create(create => create.Action("CategoryResultsCreate", "Category"))
                .Update(update => update.Action("CategoryResultsUpdate", "Category"))
                .Destroy(destroy => destroy.Action("CategoryResultsDestroy", "Category"))
            )
            .Sortable()
            .Scrollable()
            .ToClientTemplate()
    )
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
Matt
Top achievements
Rank 1
 answered on 29 Oct 2013
3 answers
78 views
We have a combobox declared using the ASP.NET MVC wrapper (2013.2.716).
On IE (10 and earlier), giving it a value upon declaration causes the page to focus on the control and scroll down to it (if the combobox is past the current display area). So we end up with cases where a user would end up seeing the page scrolled down to the middle/bottom. We have confirmed that having ".Suggest(true)" triggers this behavior. Taking it off stops it from happening but we would prefer keeping it as it is helpful to aid users with its auto-completion.

Additionally, we have tested other browsers and they don't exhibit this behavior at all. Is this a known bug?

The declaration is quite simple and looks similar to this:

1.@Html.Kendo().ComboBox()
2.   .Suggest(true)
3.   .HighlightFirst(true)
4.   .BindTo(dataSource)
5.   .Value("someValue")
Georgi Krustev
Telerik team
 answered on 29 Oct 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
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
Iron
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?