Telerik Forums
UI for ASP.NET MVC Forum
2 answers
67 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
761 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
362 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
391 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
86 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
220 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
195 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
1 answer
582 views

Hi,

First, I hope this is the right place to post this, since it is my first post.

I am working with 2 TreeViews and I need to be able to expand and collapse each of them and search one of them.

I have found code on the web that works great, on the web, but I cannot get it to work in my app.

So, I am trying to troubleshoot why and it is really difficult because I do not know what ".k-" things are. I have search all through Telerik and StackOverflow and Googled till my eyes have bled, but cannot find any information on them.

Some, I can guess at, but others, I can't, as below:

  • .k-treeview          Obviously the TreeView
  • .k-item                I'm guessing the node on the TreeView
  • .k-plus                A non-expanded node?
  • .k-minus             An expanded node?
  • .k-first                The first node of a tree level?
  • .k-last, .k-bot     These seem to be the same - the last or bottom node of a tree level?
  • .k-group            A level in a tree?
  • .k-mid               A middle node in a tree level?
  • .k-top               The top node of a tree level?
  • .k-item .k-plus   I have no clue, since it seems to be 2 others combined, so what does it do?
  • span.k-in          I have no clue

 So can someone tell me:

A)  Am I correct on the ones I have guessed at.

B)  For the ones that I have wrong or have no clue - what are they?

C)  Is there somewhere to find out what any other ".k-" things are? As you all know, the documentation for kendo is horrendous.

TIA,

Bob Mathis

Dimo
Telerik team
 answered on 04 May 2015
2 answers
109 views

Hello,

it's been some hours that i have been trying to display a dropdownlist in my grid instead of the numeric textfield that appears for a specific column ( which is a foreign key).

When i click on the edit button, this column displays a textfield with the possibility to select the ID only. I want the name instead.

This is my code:

 PS: the rows displayed in my grid are NoteForm objects and the foreign key i'm talking about is languageId ( the table is language)

[Table("note")]
  public class NoteForm
  {
      [Required]
      [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
      [Display(Name = "Title")]
      public string Title { get; set; }
 
      [Required]
      [Display(Name = "Text")]
      public string Text { get; set; }
 
      [Required]
      [Display(Name = "Language")] 
      public int languageId { get; set; }
      [ForeignKey("languageId")]
      [UIHint("LangDropDown")]<!--- I TRIED TO ADD THIS ATTRIBUTE -->
      public virtual Language language { get; set; }
 
 
      [Key]
      public int id { get; set; }
 
      public int userId { get; set; }
   
  }
 
  [Table("Language")]
  public class Language
  {
      public string lang { get; set; }
 
      [Key]
      public int id { get; set; }
  }

My View:

 

@using Kendo.Mvc.UI
@model DevelopmentNotesProject.Models.NoteForm
 
@{
    ViewBag.Title = "Index";
}
 
 
<script type="text/javascript">
    function formatter(value) {
        return value.substring(0, 50);
    }
</script>
 
 
<section id="listing">
    <h2>My Notes</h2>
 
        @(Html.Kendo().Grid<DevelopmentNotesProject.Models.NoteForm>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Title).Width(160).ClientTemplate(string.Format("{0}...", "#= formatter(Title) #"));
            columns.Bound(c => c.Text).Width(450).ClientTemplate(string.Format("{0}...", "#= formatter(Text) #"));
            columns.ForeignKey(p => p.languageId, (System.Collections.IEnumerable)ViewData["lang"], "Id", "Name").Title("Language").Width(140).EditorTemplateName("LangDropDown"); <!--LangDropDown is the name of my partial view i have created in the Shared/Partial folder-->
            columns.Command(command => { command.Edit(); command.Destroy(); });
       
        })
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
         .DataSource(dataSource => dataSource // Configure the grid data source
                  .Ajax() // Specify that ajax binding is used
                  .Read(read => read.Action("Notes_Read", "MyNotes")) // Set the action method which will return the data in JSON format
                  .Destroy(update => update.Action("Notes_Destroy", "MyNotes"))
                  .Update(update => update.Action("Notes_Update", "MyNotes"))
                  .Model(model =>
                      {
                          model.Id(p => p.id);
                      })
               )
         .Selectable()
        )
 
 
 
  </section>
 
@Html.ActionLink("Add a new note", "Add", "MyNotes")
 
 @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }

My partial View:

@using Kendo.Mvc.UI
 
@(Html.Kendo().DropDownList()
    .Name("Alllanguages")
    .DataValueField("Id")
    .DataTextField("Name")
    .BindTo((System.Collections.IEnumerable)ViewData["lang"])
)

Controller:

 

public ActionResult Index()
{
    var dbo = new UsersContext();
    ViewData["lang"] = dbo.Language.Select(b => new { Id = b.id, Name = b.lang });
    return View();
}

Thanks a lot for your help

Fiery
Top achievements
Rank 1
 answered on 04 May 2015
1 answer
115 views

I have in my View the following:

 

columns.Bound(o => o.line.ApprovalBy.UserDisplayName)
columns.Bound(o => o.line.ItemNumber)

 

Using JQuery,I am able to edit the Item Number line with the following:

 

('#grid').data('kendoGrid').dataSource.at(0).line.ItemNumber = 155

 

However, when I try to edit Approval By which is by default set to null with the following:

 

('#grid').data('kendoGrid').dataSource.at(0).line.ApprovalBy = {UserID: 50}

 

 It returns an "undefined" in the grid for some reason.

When I try to edit an object that has been initialized previously, it would be able to work:

 

columns.Bound(o => o.line.Vehicle.Color);

('#grid').data('kendoGrid').dataSource.at(0).line.Vehicle.Color = "red";

 

What am I missing?

Vladimir Iliev
Telerik team
 answered on 04 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?