Telerik Forums
UI for ASP.NET MVC Forum
1 answer
203 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
310 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
744 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
2 answers
77 views
I'm having a strange issue. I have a series of charts in being loaded as partial views in content in tab strips.

One series of charts suddenly (I believe after updating to 2015.1.408) has an issue where sometimes the labels will be off of the side of the chart. This is making it overlap the axis title.

So, if I try to compensate for this by setting the Margin of the labels in the partial view definition, it fixes it (though applies some extra spacing), but *only for the first chart in the series*. All the charts after the first revert to having the same problem.

What's going on? It seems like some style got messed up and is being set custom for the first one but then is getting reset in between each chart drawing.
Nate
Top achievements
Rank 1
 answered on 05 May 2015
2 answers
793 views

Simple use case; a pretty common one I would assume:

I have more than one kendo button displayed within an MVC view.  When one of the buttons fires the "submit" event, I want to be able to grab a handle on which button fired the submit from within my controller.  I had assumed that you could assign "button" to the name attribute and then determine through the button's "value" property which button fired the event.

The controller signature would look like this: 

[HttpPost]

public ActionResult(string button) { determine course of action based on button's value property...}

I'm actually taken back at the fact that one of the most fundamental uses of the input button type is simply not given any means to do this simply. Of course, I could be blind and missing something, but I've searched forums and Telerik documentation and found little if anything on performing this basic task.

 

Thanks!

 


    

Warner
Top achievements
Rank 2
 answered on 05 May 2015
4 answers
378 views

Hi

i have add an grid and set some styles to it like row color from databound event and command button styles and it works fine, but when i cancel popup edit i found that row loss the style of if and when i try to fire edit event throw js i got err:

Uncaught TypeError: Cannot read property 'find' of undefined

my js code is:

@section scripts{
    <script type="text/javascript">
        function getAdditionalData() {
            return {
                Clinic_Code_ID: $('#Clinic_Code_ID').val(),
                Doctor_ID: $('#Doctor_ID').val(),
                Visit_Date: $('#Visit_Date').val(),
            };
        }
 
        $(document).ready(function () {
            $('#showGrid').click(function () {
                if ((!$('#Clinic_Code_ID').val()) && (!$('#Doctor_ID').val()) && (!$('#Visit_Date').val())) {
                    $("#SHPTData").data("kendoGrid").dataSource.data([]);
                    alert("من فضلك ادخل القيمة المراد البحث عنها");
                    return;
                }
                else {
                    $('#SHPTData').data('kendoGrid').dataSource.fetch();
                }
            });
        });
 
        function dataBound() {
            var grid = this;
            grid.tbody.find("tr[role='row']").each(function () {
                var model = grid.dataItem(this);
                if (model.Clinic_Code_ID == 1) {
                    $(this).css("color", "blue");
                }
                else {
                    $(this).css("color", "green");
                }
                $(".btn-success").removeClass("k-button");
                $(".btn-danger").removeClass("k-button");
            });
        }
 
        function onEdit(e) {
            //Triggered when the window is closed (always)
            e.container.data("kendoWindow").bind("deactivate", function () {
 
                dataBound();
            })
        }
 
        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>
}
 

i try on function onEdit replace dataBound() with:

$(".my_Editbtn").removeClass("k-button");
$(".my_Delbtn").removeClass("k-button");

Full Grid Code:

    @(Html.Kendo().Grid<MhafezClinic.Models.DBContext.VisitData>()
            .Name("SHPTData")
            .HtmlAttributes(new { style = "font-weight:bold; vertical-align:middle; font-size:medium;" })
            .AutoBind(false)
            .Columns(columns =>
{
    columns.Bound(e => e.ClinicCode)
        .ClientTemplate("#=ClinicCode.Clinic_Code_Name#")
        .Sortable(false).HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Title("العيادة").Width(65);
 
    columns.Bound(e => e.PT_Clinic_ID)
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Title("رقم الملف الطبى").Width(130);
 
    columns.Bound(e => e.PT_Name)
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Title("إسم المريض").Width(200);
 
    columns.Bound(e => e.Nots)
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
        .Sortable(false).Title("ملاحظات").Width(180);
 
    columns.Bound(e => e.PT_Phone_No)
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Sortable(false).Title("رقم التليفون").Width(130);
    //columns.Bound(e => e.Visit_Date)
    //    .HtmlAttributes(new { @style = "text-align:center;" })
    //    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(105)
    //    .Filterable(false).Sortable(false);
    columns.Bound(e => e.VisitTime)
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Sortable(false).Title("وقت الكشف").Width(100);
    columns.Bound(e => e.Kashf)
        .ClientTemplate("#=Kashf.Kashf_Name#")
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Sortable(false).Title("نوع الكشف").Width(150);
 
    columns.Command(command =>
    {
        command.Edit().HtmlAttributes(new { @class = "my_Editbtn", @style = "margin-left:10px; font-weight:bold;" }).Text("تعديل");
        command.Destroy().HtmlAttributes(new { @class = "my_Delbtn", @style = "font-weight:bold;" }).Text("حذف");
    }).HtmlAttributes(new { @style = "text-align:center;" });
})
       .Pageable()
       .Sortable()
               .Editable(editable => editable.Mode(GridEditMode.PopUp))
       .DataSource(source => source.Ajax()
                    .Model(model =>
                        {
                            model.Id(e => e.ID);
                            model.Field(e => e.ID).Editable(false);
                        })
                  .Events(events => events.Error("error_handler"))
                  .Read(read => read.Action("GetData", "VisitDatas").Data("getAdditionalData"))
                  .Update(update => update.Action("GetData", "VisitDatas").Data("getAdditionalData"))
                  .Destroy(destroy => destroy.Action("GetData", "VisitDatas").Data("getAdditionalData"))
                )
      .Events(e => e.DataBound("dataBound").Edit("onEdit"))
    )
 

and command buttons style is back, but i need rows style "color" back again

so how can i do that please?

Dimo
Telerik team
 answered on 05 May 2015
2 answers
404 views

I have a couple of TreeViews on a razor page, one of which has at least 10 levels.
I need to be able to expand, collapse, and search each of the trees.
I found the following on the forums that supposedly expands the TreeView and it does work - kind of:
http://www.telerik.com/forums/is-there-a-way-to-expand-all-nodes-in-multiple-level-for-treeview#Of6kvLQLNE-YgOdLSPjUlA
It says, "Create a button for it and add event onclick like below (b is counter of not expand node):"

$("#expandAllNodes").click(function (e) {
        e.preventDefault();
        expandNextLevel();
    });
    function expandNextLevel() {
        setTimeout(function () {
            var treeview = $("#treeview").data("kendoTreeView");
            var b = $('.k-item .k-plus').length;
            treeview.expand(".k-item");
            treeview.trigger('dataBound');
            if (b > 0) {
                expandNextLevel();
            }
         }, 200);
    }

Is always hit, because, at least in my case, the value of b is never less than 4.
So I need some comparison that will tell me that the tree has been completely examined and then it will stop.
Does anyone know how I can do that?

TIA,

Bob Mathis

Bob
Top achievements
Rank 2
 answered on 05 May 2015
1 answer
90 views

I'd like to load the first item in my MobileTabStrip (a remote partial view) by default. How can I accomplish this?  Right now, the application works but I have to click on a tab strip item to load content.

 

My mobile layout is like the following:

@{ Html.Kendo().MobileLayout()
.Name("Test")
.Footer(() =>
{
Html.Kendo().MobileTabStrip()
.Items(items =>
{
items.Add().Icon("globe").Text("Stuff").Url(@Url.RouteUrl(new { Controller = "Controller1", Action = "Index" }));
items.Add().Icon("contacts").Text("Some other stuff").Url(@Url.RouteUrl(new { Controller = "Controller2", Action = "Index" }));
})
.Render();
})
.Render();
}

 

Alexander Popov
Telerik team
 answered on 05 May 2015
1 answer
237 views

I'm trying to populate a keno grid with columns from two different objects.

 Subscriber, and Subscription.

 Both these objects are different entities.

Right now I can only bind one of them to my grid at a time and create columns for it. Is there any way I can bind both of these objects to my grid without having to merge the two entities together?

Alexander Popov
Telerik team
 answered on 05 May 2015
2 answers
208 views

So, ASP.NET MVC project, using Telerik UI for ASP.NET MVC v Q3 2014.

 In a view I have this Scheduler widget nicely configured and running well. The view being used is timeline view.

I am wondering how I can make all "time"-columns (not the group column(s)) narrower? I am required to just fit stuf in a much larger timespan that the current styling can accommodate on the page on the screen.

I thought I could via CSS by changing widths for classes like k-today or k-slotcell and the like, but that only made the scheduler display things wrongly.

Thanks! 

 

 

Cristian
Top achievements
Rank 1
 answered on 05 May 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
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
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
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
Bronze
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?