Telerik Forums
UI for ASP.NET MVC Forum
2 answers
124 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
445 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
557 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
474 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
298 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
316 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
69 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
216 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
883 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
233 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
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?