Telerik Forums
UI for ASP.NET MVC Forum
1 answer
629 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
125 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
133 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
3 answers
336 views

How can we bind autocomplete's selected values to model so I can use those values on the server? The examples I have seen so far only selects the values on client side and diaplay them as tags. I want to populate the values into control using Ajax call, but after items are selelted i want selected values to be passed to model using model binding. How that can be done?

Alexander Popov
Telerik team
 answered on 04 May 2015
2 answers
159 views

In my project, I use the fluent notation.

Situation:
A grid with filterable mode on "row" and with a detailtemplate, bound to a list of objects.

Problem:
In the head of the grid, there are 2 rows (column titles + filters). The filter row contains only 1 <th> element, instead of 2. 

-------------------------------------------
|                     | [ControleId_Title] |
-------------------------------------------
| [ControleId_Filter] |   -->  ???          
-------------------------------------------
| [k-hierarchy-cell]  |         11         |
| [k-hierarchy-cell]  |         12         |
-------------------------------------------

In the JS variant of the grid, it works (see http://jsfiddle.net/Sbb5Z/1715/), but in the fluent notation, it doesn't work.
My attachment contains a standard VS 2013 MVC Solution, with the Kendo scripts added. You just have to download the packages AND paste your Kendo.Mvc.dll in the bin folder of the project.

Alexander Popov
Telerik team
 answered on 01 May 2015
2 answers
129 views

Hi,

 I am using Multi select filter in the grid. The requirement for me is to sort the items in the filter list by alphabetical order. Can some one tell me how can i sort that list

I am using this following code and it is working fine as expected, but i want to sort the list

                 columns.Bound(p => p.Name).Width(300).Filterable(x => x.Multi(true)).Lockable(false);

Daniel
Telerik team
 answered on 30 Apr 2015
4 answers
209 views
Hi, i'm using a kendo grid with a column and custom editor who show a combobox with some values.
my kendo ui version is v2014.2.1008

Grid initialization:

private initKeyPropertiesGrid(): void
    {
        var isDictionaryLoaded = this.translateService.isPartAvailable(this.dictionaryNamespace);
        var colPropertyTitle = ' ';
        var colValueTitle = ' ';
        if (isDictionaryLoaded)
        {
            colPropertyTitle = this.translateService.translate(this.dictionaryNamespace, 'KeyPropertyColumn');
            colValueTitle = this.translateService.translate(this.dictionaryNamespace, 'KeyPropertyValueColumn');
        }

        var thisObject = this;
        var columns = [];
        columns[columns.length] = { field: 'Name', hidden: true };
        columns[columns.length] = { field: 'Description', title: colPropertyTitle };
        columns[columns.length] = { field: 'Value', title: colValueTitle, template: $('#grdKeyPropertyValueTemplate').html(), editor: function (container, options) { thisObject.getKeyPropertyValueColumnEditor(container, options); } };

        var dataSource = new kendo.data.DataSource({
            data: null,
            schema: {
                model: {
                    id: 'Name',
                    fields: {
                        Name: { type: 'string', editable: false },
                        Description: { type: 'string', editable: false },
                        Value: { type: 'string', editable: true }
                    }
                }
            },
            change: function (e: kendo.data.DataSourceChangeEvent)
            {
                var propertyRow = thisObject.$scope.grdKeyProperties.select();
                var propertyItem: any = thisObject.$scope.grdKeyProperties.dataItem(propertyRow);
                if (propertyItem === null)
                    return;

                var propertyName = propertyItem.Name;
                if (e.action === undefined || e.action !== 'itemchange' && propertyName !== 'RegistryFields')
                    return;

                var newValue = null;
                if (propertyName !== 'RegistryFields')
                {
                    var item: any = e.items[0];
                    //newValue = item[e.field];
                    newValue = item["txtValueEditor_input"];
                }
                else
                    newValue = propertyItem.Value;

                //Aggiornamento chiave con la proprietà impostata
                thisObject.updateKeyProperty(propertyName, newValue);
            },
            error: function (e)
            {
                debugger;
            }
        });

        this.grdKeyPropertiesOptions = {
            columns: columns,
            editable: true,
            navigatable: true,
            resizable: false,
            selectable: true,
            autoBind: false,
            dataSource: dataSource,
            dataBound: function (e)
            {
                var grid: kendo.ui.Grid = e.sender;
                var dataItem: kendo.data.Model;
                var row: JQuery;
                
                //Se si sta modificando una proprietà non si effettua nessuna selezione
                if (thisObject.isUpdatingKeyProperties)
                    return;

                //Si seleziona la prima riga
                var items = grid.dataSource.data();
                if (items.length > 0)
                {
                    dataItem = items[0];
                    row = Utils.getKendoGridRowFromDataItem(grid, dataItem);
                    grid.select(row);
                }
            }
        };

        //Aggiornamento griglia
        this.grdKeyPropertiesRefreshId = Utils.generateGUID();
    }

the editor is declared as follow:

private getKeyNamePropertyValueColumnEditor(container: any, field: string): void
    {
        var thisObject = this;
        //dataSource della comboBox
        var pageSize = 20;
        var dataSource = new kendo.data.DataSource({
            page: 1,
            pageSize: pageSize,
            serverPaging: true,
            serverFiltering: true,
            type: "aspnetmvc-ajax",
            dataType: "json",
            transport: {
                read: {
                    url: "/Home/GetModelKeysFromName",
                    type: "POST",
                    dataType: "json",
                    data: function ()
                    {
                        var grdKeys = thisObject.$scope.grdKeys;
                        var items = grdKeys.dataSource.data();
                        var item = grdKeys.dataItem(grdKeys.select());

                        var namesToExclude = [];
                        for (var i = 0; i < items.length; i++)
                        {
                            if (items[i] === item)
                                continue;

                            namesToExclude[namesToExclude.length] = items[i].Name;
                        }

                        return { namesToExclude: namesToExclude }
                    }
                }
            },
            schema: {
                data: function (data)
                {
                    return data.Data;
                },
                total: function (data)
                {
                    return data.Total;
                },
            },
        });

        //Messaggio di paginazione sull'header per numero di elementi della dimensione della pagina
        var headerTemplate = '';
        //Creazione comboBox
        var name = 'txt' + field + 'Editor';
        var obj = $('<input id="' + name + '" name="' + name + '" data-bind="value:' + field + '" />');
        obj.appendTo(container).kendoComboBox({
            dataTextField: "Name",
            dataValueField: "Name",
            dataSource: dataSource,
            filter: "contains",
            headerTemplate: headerTemplate
        });
    }

- if i select a value from combobox list the binding work well and the grid dataSource.change event is fired as shown in attachment 1.png
- if i write a value in the combobox who is not included in the combobox items list, sometimes the grid dataSource.change event is not fired (why?) and the binding fail, sometimes the grid dataSource.change event is fired with the field property set to 'txtValueEditor_input' (txtValueEditor is the id and name of the comboBox) as shown in attachment 2.png, instead of the datamodel item property Value (as aspected and done in attachment 1.png).

how to solve the problem? why the grid dataSource.change event sometimes is not fired?

Thanks








Alexander Popov
Telerik team
 answered on 30 Apr 2015
1 answer
155 views

Hi

I am trying to add a custom connector to a rectangle in MVC, but am struggling top work out how to do it. This is the code I am using;

       .ShapeDefaults(sd => sd.Connectors(o =>
      {
        o.Add().Name("top");
        o.Add().Name("right");
        o.Add().Name("bottom");
        o.Add().Name("left");
        o.Add().Name("auto");
        o.Add().Name("bottomRight");
        o.Add().Name("topRight");
        o.Add().Name("bottomLeft");
        o.Add().Name("topLeft");
        o.Add().Name("topRightMiddle").Position("function(shape) { var p = shape.bounds().top(); return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x + 15, p.y)); }");
      })

When I run this, none of the connectors are added. When I run it without the 'topRightMiddle' connector, it works fine and all the named connectors are added. How should the 'Position' method parameter be constructed?

Thanks

Jared

Daniel
Telerik team
 answered on 30 Apr 2015
1 answer
144 views

Hi,

I'm missing some files and functions from the kendo.mvc.examples project you supply with kendo mvc:

examples.js

examples.min.js

console.min.js

 

there several more scripts that are missing.

 

is it ok?

 

thanks

Sebastian
Telerik team
 answered on 30 Apr 2015
1 answer
323 views

I have a Parent/Child grid.  For the rows selected I need to get the Parent and child rows data.

 

I don't see any examples.  Can someone point me to one?

 

Thanks

 

Greg

Dimiter Madjarov
Telerik team
 answered on 30 Apr 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
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
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?