Telerik Forums
UI for ASP.NET MVC Forum
2 answers
277 views

Hi,

I  have a treeview template  for rendering kendo drop down next to kendo treeviewItem. Below is the code. But I am getting javascript error from Kendo.all.min.js file saying "Invalid template". If I use Html.Dropdownlistfor instead kendo it works but with kendo drop down I am getting an error. Can you please help on this?

 <script id="treeview-template" type="text/kendo-ui-template">
                    #: item.text #
                    # if (item.text=="Allow Subclient") { #
                       @*@(Html.DropDownListFor(m => Model.FieldConfigurationModel.ReocrdValue, selList, new { Style = "width: 200px;"}))*@
                         @(Html.Kendo().DropDownListFor(x => x.FieldConfigurationModel.ReocrdValue)
                           .BindTo(new SelectList(Model.FieldConfigurationModel.SelectDataSource.Select(p => new SelectListItem() { Value = p.id, Text = p.value }), "Value", "Text", selectedId))
                           .AutoBind(true)
                           .Name("RecordValue")
                           .DataTextField("Text")
                           .DataValueField("Value")
                           .HtmlAttributes(new { Style = "width: 100px !important;"})
                           .Value(selectedId))
                  # } #
            </script>

  Below is the  javascript error i get

Uncaught Error: Invalid template:'
                    #: item.text #
                    # if (item.text=="Allow Subclient") { #
                       
                         <input Style="width: 100px !important;" id="RecordValue" name="RecordValue" type="text" value="abc12" /><script>
    jQuery(function(){jQuery("#RecordValue").kendoDropDownList({"dataSource":[{"Text":"abc12","Value":"969a5ff4-e0fc-426d-be02-a48b0104e342"},{"Text":"ABC2","Value":"4ff38eb7-813a-493f-b25c-a48b01049ee4"}],"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n                    '+$kendoHtmlEncode( item.text )+'\n                    '; if (item.text=="Allow Subclient") { ;$kendoOutput+='\n                       \n                         <input Style="width: 100px !important;" id="RecordValue" name="RecordValue" type="text" value="abc12" /><script>\n\tjQuery(function(){jQuery("';RecordValue").kendoDropDownList({"dataSource":[{"Text":"abc12","Value":"969a5ff4-e0fc-426d-be02-a48b0104e342"},{"Text":"ABC2","Value":"4ff38eb7-813a-493f-b25c-a48b01049ee4"}],"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});
;$kendoOutput+=;}return $kendoOutput;'

 

Alex Gyoshev
Telerik team
 answered on 07 May 2015
1 answer
69 views

My Goal:

Put text on a command button in a grid row, and pop up a "details" window when clicked. 

Problem:

1) I can create a command button that works, but I am unsure the syntax to put my data custom text on the button.

2) I can create a templated button that contains my text, but will not seem to execute my popup!

I believe it's a problem with my syntax as I have just begun using this object. Here is a snippet of what I have:

1) { command: { text: "!", name: "ShowAllDetails", click: showAdminDetails, title: "View Contact Details..." }, title: " ", width: "80px" } 

2) { template: '<input type="button" id="ShowAdminDetail" onclick="showAdminDetails(dataItem);" class="k-button k-grid-CustomCommand" title="Show Admin Contact Info..." value="#= getButtonText(data) #" />' }

 

Thanks in advance, I would like to get them BOTH working the same way so that I can better understand how these items function.

 

Dimiter Madjarov
Telerik team
 answered on 07 May 2015
7 answers
257 views
Hi,

I have a problem figuring out how to filter data for pivot grid dynamically. E.G. I want to preview data in specific date range but dynamically not by user clicks. Is it possible to done this from javascript by filtering datasource or using configurator. When I choose in pivot configurator date range it query OLAP normally so the question is how to do this dynamically.
In attachment is example of initial and wanted state.
Georgi Krustev
Telerik team
 answered on 07 May 2015
4 answers
201 views

We are using an editable grid with InCell editing in Batch mode. 

We have a bool column with a checkbox using a client template:

columns.Template(c => c.Active)
                .ClientTemplate("<input type=\"checkbox\" name=\"chkActive\" id=\"chkActive\" value=\"#= Active #\" #= Active?'checked':'' # />")
                .Title("Select")
                .HeaderHtmlAttributes(new { style = "text-align:center" })
                .Width(40).HtmlAttributes(new { style = "text-align:center" });

 

It seems that we aren't getting two way biding though. We check some check boxes, then scroll down so a read occurs to get the next page of records, but when we scroll up the check boxes are no longer checked.

Is this not the correct way to bind a checkbox to a bool column in the editable grid?

Kiril Nikolov
Telerik team
 answered on 07 May 2015
3 answers
223 views

Hi,
What is the best way to group by a field in a ListView?
I'd like to have something along the lines of this

Species: Human
1: Toby
2: Rob
Species: Dog
3: Harry
4: Rover
Species: Cat
5: Tickles

The model schema is as below
ID  Name  Species
1  Toby  Human
2  Rob  Human
3  Harry  Dog
4  Rover  Dog
5  Tickles  Cat

<script type="text/x-kendo-tmpl" id="template">
    <div class="person">
        <div class="id">#:ID#</div>
        <div class="name">#:Name#</div>
    </div>
</script>
 
<div id="persons">
    
    @(Html.Kendo().ListView<Person>()
    .Name("persons")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(ds => ds
        .Model(m => m.Id(p => p.ID))
        .Read(r => r.Action("PersonsRead", "Home"))
        .Group(g => g.Add(p => p.Species))
        )
)

I managed to get as far as the above, but this throws an error as it is passing the Species field and value to the client template from the Group method.
Any ideas?

Nikolay Rusev
Telerik team
 answered on 07 May 2015
1 answer
104 views

I have to install kendo mvc in vs 2012 (just moved from 2010 to 2012) however I cannot see where I can get the msi installer for the latest version.

 Please advise.

p.s the notes indicate that one should copy the css and js and that should do it - however - this does not help when you want to have the Telerik menu item in Visual studio installed or the matter of the Kendo MVC dlls being installed et al.

 As well - I do need the Telerik menu options installed in Visual Studio to allow for future updates as well.

 Please advise.

Rene
Top achievements
Rank 1
 answered on 06 May 2015
1 answer
68 views

I have a form with a drop down list inside of it.  When the form is posted I want the data in the drop down list to be written into Class B, which is an attribute of Class A on the MVC side.

Can this be done?  Is there any way to format or pull the data from the Drop down list directly into Class B, which is inside of Class A?  Is there some way to map the input from the drop down list to this element?

 

Alexander Popov
Telerik team
 answered on 06 May 2015
1 answer
192 views
Hi,

 

We try to use
Kendo cascading drop down list inside MVC editor template that will be used as
editable template for Kendo list view and we get invalid template error.

 

1.     
MenuLineViewModel use Kendo list view which will go to
MenuLineNestedViewModel.cshtml because of the editable().

2.     
MenuLineNestedViewModel.cshtml build our edit template
with the help of TgLinkViewModel.cshtml for @Html.EditorFor(x => newModel,
"TgLinkViewModel").

3.     
TgLinkViewModel.cshtml use Kendo cascading drop down
list.

 

At the end we
are getting the following error:

Uncaught Error: Invalid template:'<div
id="nested-view" class="k-widget">   
<input type="hidden" name="ParentId"
class="parentId" value="#:ParentId#"
/>    <input type="hidden"
name="SortOrder" class="sortOrder"
value="#:SortOrder#" />   
<span>        <label
for="Text">Text</label>       
<input class="k-textbox" data-val="true"
data-val-maxlength="Name cannot be longer than 30 characters."
data-val-maxlength-max="30" data-val-required="*"
id="Text" name="Text" type="text"
value="" />        <span
class="field-validation-valid" data-valmsg-for="Text"
data-valmsg-replace="true"></span>   
</span>   
<span>        <label
for="IsHighlight">Highlight</label>       
<input data-val="true" data-val-required="The Highlight field
is required." id="IsHighlight" name="IsHighlight"
type="checkbox" value="true" /><input
name="IsHighlight" type="hidden" value="false"
/>    </span>    <label for="EntityTypeId">Link</label>   
<span>tttt</span>   
<span>        <input
data-val="true" data-val-number="The field ComponentId must be a
number." data-val-required="The ComponentId field is required."
id="newModel_ComponentId" name="newModel.ComponentId" type="hidden"
value="0" /><label
for="newModel_EntityTypeId">Link</label><input
data-val="true" data-val-required="The Link field is
required." id="newModel_EntityTypeId" name="newModel.EntityTypeId"
type="text"
/><script>               
jQuery(function(){jQuery("\#newModel_EntityTypeId").kendoDropDownList({"dataSource":[{"Text":"Spacing","Value":"1"},{"Text":"Article","Value":"2"},{"Text":"Product","Value":"3"},{"Text":"Categories","Value":"4"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Select"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityTypeId"
data-valmsg-replace="true"></span><input
data-val="true" data-val-number="The field EntityId must be a
number." disabled="disabled" id="newModel_EntityId" name="newModel.EntityId"
type="text"
/><script>               
jQuery(function(){jQuery("\#newModel_EntityId").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/AjaxGlobal/GetEntitiesForDropDownAsync","data":function()
{  return {entityTypeId: $('#newModel_EntityTypeId').val(), entityId:
''};}},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select...","cascadeFrom":"newModel_EntityTypeId"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityId"
data-valmsg-replace="true"></span>   
</span>        <span
class="edit-buttons">       
<a class="k-button k-update-button"
href="\\#"><span class="k-icon k-update"></span></a>       
<a class="k-button k-cancel-button"
href="\\#"><span class="k-icon
k-cancel"></span></a>   
</span></div>' Generated code:'var $kendoOutput, $kendoHtmlEncode =
kendo.htmlEncode;with(data){$kendoOutput='<div id="nested-view"
class="k-widget">    <input
type="hidden" name="ParentId" class="parentId"
value="'+$kendoHtmlEncode(ParentId)+'" />   
<input type="hidden" name="SortOrder" class="sortOrder"
value="'+$kendoHtmlEncode(SortOrder)+'" />   
<span>        <label
for="Text">Text</label>       
<input class="k-textbox" data-val="true"
data-val-maxlength="Name cannot be longer than 30 characters."
data-val-maxlength-max="30" data-val-required="*"
id="Text" name="Text" type="text"
value="" />        <span
class="field-validation-valid" data-valmsg-for="Text"
data-valmsg-replace="true"></span>   
</span>   
<span>        <label
for="IsHighlight">Highlight</label>       
<input data-val="true" data-val-required="The Highlight field
is required." id="IsHighlight" name="IsHighlight"
type="checkbox" value="true" /><input
name="IsHighlight" type="hidden" value="false"
/>    </span>    <label
for="EntityTypeId">Link</label>    <span>tttt</span>   
<span>        <input
data-val="true" data-val-number="The field ComponentId must be a
number." data-val-required="The ComponentId field is required."
id="newModel_ComponentId" name="newModel.ComponentId"
type="hidden" value="0" /><label
for="newModel_EntityTypeId">Link</label><input data-val="true"
data-val-required="The Link field is required." id="newModel_EntityTypeId"
name="newModel.EntityTypeId" type="text"
/><script>\tjQuery(function(){jQuery("#newModel_EntityTypeId").kendoDropDownList({"dataSource":[{"Text":"Spacing","Value":"1"},{"Text":"Article","Value":"2"},{"Text":"Product","Value":"3"},{"Text":"Categories","Value":"4"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Select"});});</script><span
class="field-validation-valid" data-valmsg-for="newModel.EntityTypeId"
data-valmsg-replace="true"></span><input
data-val="true" data-val-number="The field EntityId must be a
number." disabled="disabled" id="newModel_EntityId"
name="newModel.EntityId" type="text"
/><script>\tjQuery(function(){jQuery("#newModel_EntityId").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/AjaxGlobal/GetEntitiesForDropDownAsync","data":function()
{  return {entityTypeId: $(\'';newModel_EntityTypeId').val(), entityId:
''};}},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select...","cascadeFrom":"newModel_EntityTypeId"});});</script><span
class="field-validation-valid"
data-valmsg-for="newModel.EntityId" data-valmsg-replace="true"></span>   
</span>        <span
class="edit-buttons">       
<a class="k-button k-update-button"
href="\#"><span class="k-icon
k-update"></span></a>       
<a class="k-button k-cancel-button"
href="\#"><span class="k-icon
k-cancel"></span></a>   
</span></div>;$kendoOutput+=;}return $kendoOutput;'E.compile @
kendo.all.min.js:9b.isFunction.i @
jquery.min.js:3n.ui.DataBoundWidget.extend._templates @
kendo.all.min.js:32n.ui.DataBoundWidget.extend.init @
kendo.all.min.js:32(anonymous function) @ kendo.all.min.js:10b.extend.each @
jquery.min.js:3b.fn.b.each @ jquery.min.js:3e.fn.(anonymous function) @
kendo.all.min.js:10(anonymous function) @ VM37854:2c @ jquery.min.js:3p.add @
jquery.min.js:3b.fn.b.ready @ jquery.min.js:3b.fn.b.init @ jquery.min.js:3b @
jquery.min.js:3(anonymous function) @ VM37854:2(anonymous function) @ jquery.min.js:3b.extend.globalEval
@ jquery.min.js:3b.fn.extend.domManip @ jquery.min.js:4b.fn.extend.append @
jquery.min.js:4(anonymous function) @ jquery.min.js:4b.extend.access @
jquery.min.js:3b.fn.extend.html @ jquery.min.js:4$.ajax.success @
layout_mobile.navigation.js:25c @ jquery.min.js:3p.fireWith @ jquery.min.js:3k
@ jquery.min.js:5send.r @ jquery.min.js:5

 

 

Our thoughts
are that its related to the jQuery / javascript that Kendo MVC add when
creating Kendo controls.

You can see
that its being added inside the cascading drop down list and maybe this is what
prevent the list view use this template as editable template.

 
Rosen
Telerik team
 answered on 06 May 2015
1 answer
297 views
We have an parent child Telerik MVC grid. We placed child grid in one of the Tab ( used tab strip to display other parent row information in diffrent tabs along with child grid records). While editing/adding data in child grid, we need to update parent row values by using formulas. Is there any way to update parent row values without collapsing the parent row on OnRequestEnd event of child grid?
Atanas Korchev
Telerik team
 answered on 06 May 2015
1 answer
691 views

Seeing an odd issue trying to setup some inline editing using the Grid controller.  The Grid displays correctly and functions correctly until I try to perform an edit.  When I click the edit button, make edits and then press update, the line comes back with empty values.

 Upon inspection, the model being passed to the controller ActionResult is null (expect for ID and date).  Code below.  Took a look at some of the null threads and not seeing a common denominator.  Any thoughts:

Grid Control:

 

@(Html.Kendo().Grid(Model)
        .Name("commissionGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.CommissionId);
            columns.Bound(p => p.TenantId);
            columns.Bound(p => p.SimpleName);
            columns.Bound(p => p.StartDate);
            columns.Bound(p => p.CustomerName);
            columns.Bound(p => p.CustomerNumber);
            columns.Command(command =>
            {
                command.Edit();
            }).Title("Commands");
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Navigatable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(10)
            //.ServerOperation(false)
            .Model(model => model.Id(p => p.CommissionId))
            .Update(update => update.Action("EditingInline_Update", "Commissions"))
 
        )
        )

Controller:

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, CommissionViewModel commissionViewModel)
        {
             
              
            if (commissionViewModel != null && ModelState.IsValid)
            {
 
 
                using (var test = new CommissionContext())
                {
                    try
                    {
                        var entity = new Commission();
 
                        entity.CommissionId = commissionViewModel.CommissionId;
                        entity.CustomerName = commissionViewModel.CustomerName;
                        entity.CustomerNumber = commissionViewModel.CustomerNumber;
                        entity.SimpleName = commissionViewModel.SimpleName;
                        entity.StartDate = commissionViewModel.StartDate;
                        entity.TenantId = commissionViewModel.TenantId;
 
                        test.Commissions.Attach(entity);
                        test.Entry(entity).State = EntityState.Modified;
                        test.SaveChanges();
                    }
 
                    catch (System.Data.Entity.Validation.DbEntityValidationException v)
                    {
                        Console.WriteLine("Exception is {0}", v);
                    }
                }
            }
            return Json(new[]{commissionViewModel}.ToDataSourceResult(request, ModelState));
        }

 

Jason
Top achievements
Rank 1
 answered on 05 May 2015
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?