Telerik Forums
UI for ASP.NET MVC Forum
5 answers
172 views

In the attached image, we are having issues with the menu bar and spacing between the sub menu's.  We are currently running Kendo.UI 2013.2.918.  Do the newer versions of Kendo fix this "bug" or is there an fix that we can do with our current version?  The screen print is from Chrome version 42.0.2311.135

 

Code:

 

@(Html.Kendo().Menu()
                  .Name("Menu")
                  .HtmlAttributes(new { @style = "width:99%;border: 0px;"})
                  .Direction(MenuDirection.Bottom)
                  .Items(items =>
                  {
                      items.Add().Text("home").Action("Index", "Home").ImageUrl(Url.Content("~/Images/B-home%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
                      items.Add().Text("search").Action("Index", "Search").ImageUrl(Url.Content("~/Images/B-search%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
                      items.Add().Text("activities & alerts").ImageUrl(Url.Content("~/Images/B-Activity%2048.png")).HtmlAttributes(new { style = "width:175px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
                      {
                          children.Add().Text("bins").Items(binNode =>
                              {
                                  binNode.Add().Text("central processing unit").Action("Index", "ActivityPage", new { BinID = "1" });
                                  binNode.Add().Text("charge off").Action("Index", "ActivityPage", new { BinID = "7" });
                                  binNode.Add().Text("collateral cashier").Action("Index", "ActivityPage", new { BinID = "9" });
                                  binNode.Add().Text("defensive action").Action("Index", "ActivityPage", new { BinID = "4" });
                                  binNode.Add().Text("delinquency").Action("Index", "ActivityPage", new { BinID = "2" });
                                  binNode.Add().Text("foreclosure / reo").Action("Index", "ActivityPage", new { BinID = "6" });
                                  binNode.Add().Text("legal / bankruptcy").Action("Index", "ActivityPage", new { BinID = "3" });
                                  binNode.Add().Text("office automation assistant").Action("Index", "ActivityPage", new { BinID = "8" });
                                  binNode.Add().Text("settlement").Action("Index", "ActivityPage", new { BinID = "5" });
                              }).HtmlAttributes(new { style = "width:175px" });
                          children.Add().Text("my").Items(my =>
                              {
                                  my.Add().Text("activities").Action("Index", "ActivityMyPage").HtmlAttributes(new { style = "width:175px" });
                                  my.Add().Text("alerts").Action("Index", "Alerts", new { Mine = true });
                              }).HtmlAttributes(new { style = "width:175px" });
                          
                          children.Add().Text("office").Items(office =>
                              {
                                  office.Add().Text("actities").Action("Index", "ActivityPage", new { BinID = "0" }).HtmlAttributes(new { style = "width:175px" });
                                  office.Add().Text("alerts").Action("Index", "Alerts");
                              }).HtmlAttributes(new { style = "width:175px" });
                      });
                      items.Add().Text("reports & portfolios").ImageUrl(Url.Content("~/Images/B-reports%2048.png")).HtmlAttributes(new { style = "width:190px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children => 
                          {
                                children.Add().Text("reports").Items(sibling1 =>
                                {
                                    sibling1.Add().Text("my activity report").Action("Index", "StaffMetrics");
                                    sibling1.Add().Text("office activity report").Action("Index", "OfficeMetrics");
                                }).HtmlAttributes(new { style = "width:190px" });
                                children.Add().Text("portfolios").Items(sibling2 =>
                                  {
                                      sibling2.Add().Text("office portfolio").Action("Index", "Reports_OfficeLoan");
                                      sibling2.Add().Text("litigation portfolio").Action("Index", "Reports_Litigation", new { status = "true" });
                                  });
                                children.Add().Text("statisitics").Visible(@Convert.ToBoolean(Session["isManagement"].ToString())).Items(sibling3 =>
                                {
                                    sibling3.Add().Text("staff report").Action("Index", "ManagerStaffReport");
                                    sibling3.Add().Text("role process report").Action("Index", "RoleMetrics");
                                });
                          });
                      items.Add().Text("admin").ImageUrl(Url.Content("~/Images/B-admin%2048.png")).HtmlAttributes(new { style = "width:100px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
                          {
                              children.Add().Text("staff").Action("Index", "AdminStaff").HtmlAttributes(new { style = "width:100px" });
                              children.Add().Text("database").Action("Index", "AdminDatabase").Visible(@Convert.ToBoolean(Session["AdminDatabase"]));
                              children.Add().Text("website").Action("Index", "AdminWebsite").Visible(@Convert.ToBoolean(Session["AdminWebsite"]));
                          });
                  })
                )

David
Top achievements
Rank 1
 answered on 14 May 2015
3 answers
264 views

Hi,

 I'm trying to use a MobileListView in my project with this code:

 

<div class="row">
    <div class="col-xs-12">
        @(Html.Kendo().MobileView()
       .Title("Chiamate")
       .Header(obj =>
            Html.Kendo().MobileNavBar()
                .Name("ChiamateNavbar")
                .Content(navbar =>
                    @<text>
                        @navbar.ViewTitle("Chiamate")
                    </text>)
        )
       .Content(
    @<text>
        @(Html.Kendo().MobileListView<Telesan.CloudLift.WebApplication.Models.Chiamate.ChiamataListViewModel>()
                    .Name("ChiamateListView")
                    .TemplateId("ChiamateTemplate")
                    .PullToRefresh(true)
                    .EndlessScroll(true)
                    .DataSource(dataSource =>
                        dataSource
                            .Read(r => r.Action("ChiamateAjaxList", "Chiamate").Data("onData").Type(HttpVerbs.Post))
                            .ServerOperation(true)
                            .Filter(t =>
                        {
                            t.Add(m => m.DataOra).IsGreaterThanOrEqualTo(DateTime.Today.AddDays(-3));
                            t.Add(m => m.IDStato).IsNotEqualTo((Guid)ViewBag.StatoChiuso).And().IsNotEqualTo((Guid)ViewBag.StatoElaborato);
                        })
                        .Sort(s => s.Add(m => m.DataOra).Descending())
                            .PageSize(50)
                    )
        )
 
    </text>)
        )
    </div>
</div>

But it doesn't render to my page so after a search I've found a possible solution by adding this in _L:

@(Html.Kendo().MobileApplication()
        .ServerNavigation(true)
    )
I can see some differences now, the page style has changed but the listview is not yet appeared.

Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.
But I didn't find a solution for this problem with ASP.NET MVC Wrappers.

This is the _Layout block where @RenderBody is:

<div class="cloudlift-container">
        <div class="row">
            <div class="col-xs-12 main-content">
                @RenderBody()
            </div>
        </div>
    </div>
 
    @(Html.Kendo().MobileApplication()
        .ServerNavigation(true)
    )
I don't know how to tell to MobileApplication helper to find the div inside my structure as seen in examples found about KendoUI Professional.

Can somebody help?

Kiril Nikolov
Telerik team
 answered on 14 May 2015
10 answers
708 views
The documentation doesn't show that there are events for the ImageBrowser, such as Change, Upload, etc.  Are there any?

If not, it would be nice in a future version, this way I can wrap my images in an HTML snippet for styling when I click Insert Image.

Just a thought.
Dekel
Top achievements
Rank 1
 answered on 14 May 2015
1 answer
59 views

I have a grid that has joined tables from a doamin method entity.

I want to edit the grid columns. for some reason, I keep getting a null value for some of the grid colunms.

public ActionResult EditSubscriber([DataSourceRequest] DataSourceRequest gridRequest, Sub editSub, Subs editSubs)
        {
            if (ModelState.IsValid) 
            {

               // Passin values
                Sub subToUpdate = db.Subss.FirstOrDefault(s => s.Sub_ID == editSub.Sub_ID);                
               subToUpdate .SFirstName = editSub.SFirstName;
               subToUpdate .SLastName = editSub.SLastName;
               subToUpdate .SEmail = editSub.SEmail;

               // Null values. Values are not being passed. Why?

                Subs subsToUpdate = db.Subsss.FirstOrDefault(s => s.Subs_ID == editSubs.Subs_ID);
               subsToUpdate .SubsStartDate = editSubs.SubsStartDate;
               subsToUpdate .SubsEndDate = editSubs.SubsEndDate;
               subsToUpdate .SubsStatus = editSubs.SubsStatus;
               subsToUpdate .SubsType_ID = editSubs.SubsType_ID;
                
                db.SaveChanges();
            }

            return Json(new[] { editSub}.ToDataSourceResult(gridRequest, ModelState));
        }

 

Any idea?

Kiril Nikolov
Telerik team
 answered on 14 May 2015
3 answers
285 views

 I would like to know how to retail the page size that is selected in the pager?

Suppose I select 20 as pagesize on a list page.

I do editing of a row by opening a new page.

Then I come back after completing editing on the list page. Here the count again becomes default (i.e 10)  and not 20. How do I preserve this or make this work? I have items more than 10...

 I tried both the options give below but nothing seems to be working... Please provide solution.

 .Pageable(pager => pager.PageSizes(new int[] { 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 100, 200, 500 }))

 
                                      .Pageable(pageable => pageable
                                          .Refresh(true)    //false also tried..
                                      .PageSizes(new int[] { 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 100, 200, 500 })
                                      ////.Input(true)

                                         )

Vladimir Iliev
Telerik team
 answered on 14 May 2015
1 answer
83 views

I have a grid with data on it. When I want to edit the data, I need to press the edit button and a new edit form will open with the current data from the row.

For the textboxes I use: 

@Html.EditorFor(model => model.SubStatus)

Now the issue is the dropDownList. Here is my code. the initial value is always blank?

CSHTML code:

@(Html.Kendo().DropDownListFor(m => m.SubType)
                .Name("SubsType") 
                .DataTextField("SubType1")
                .DataValueField("SubType_ID") 
                .DataSource(source =>
                {
                    source.Custom()
                          .ServerFiltering(true)
                          .Type("aspnetmvc-ajax")
                          .Transport(transport =>
                          {
                              transport.Read("GetType", "Welcome");
                          })
                          .Schema(schema =>
                          {
                              schema.Data("Data")
                                    .Total("Total"); 
                          });
                })
            )

 

Razor code:

 public JsonResult GetSubType([DataSourceRequest] DataSourceRequest dropDownRequest)
        {
            IList<SubType> myViewModels = new List<SubType>();

            foreach (SubType subType in db.ExecuteStoredProcedure<SubType>("proc_getType", null))
            {
                SubType subtype = new SubType()
                {
                    SubType_ID = subType.SubType_ID,
                    SubType1 = subType.SubType1
                };
                myViewModels.Add(subtype);
            }
            return Json(myViewModels.ToDataSourceResult(dropDownRequest), JsonRequestBehavior.AllowGet);
        }

Right now I get the list from the database. when the dropdownlist is pressed. but I want to set the initial value of the list to be the current value. How to do it?

Georgi Krustev
Telerik team
 answered on 14 May 2015
1 answer
263 views

From an example in another thread, I was able to enable dragging from a grid onto a TreeView control.

However, the example just fired an alert with the ID of the object that was dragged. What I need to do is insert the dragged row into the TreeView . I can use the append method to add to the TreeView , but can't work out how to identify the node that the grid record was dragged onto.

 

My current client code is:-

<div class="pull-left" style="margin-right:20px;">
 
    @(Html.Kendo().TreeView()
                    .Name("Treeview")
                    .ExpandAll(true)
                    .HtmlAttributes(new { style = "display: inline-block;" })
                    .DataTextField("Text")
 
                    .DataSource(ds=>ds
                        .Model(m=>m
                            .Id("Id")
                            .HasChildren("HasChildren")
                            .Children("Items")
                             
                            )
                        
                    .Read(r => r.Action("GetMenuTreeItems", "Menu")
                              
                            )
                            )
    )
 
</div>
 
<div class="pull-left" style="width:500px;">
    @(Html.Kendo().Grid<BI_II.Models.SSRS_Report>()
.Name("Grid")
.Columns(col =>
    {
        col.Bound(o => o.Name).Title("Name");
        //col.Bound(o => o.ItemID).Title("ItemID");
    })
 
  .DataSource(ds => ds
    .Ajax()
    .Model(m => m.Id(p => p.ItemID))
    .PageSize(15)
        .Read(rd => rd.Action("RD_ReportList", "Menu")
    )
)
.Pageable()
.Sortable()
.Filterable()
 
    )
</div>
<script>
 
    $(document).ready(function () {
 
        var grid = $("#Grid").data("kendoGrid"),
             treeview = $("#Treeview").data("kendoTreeView"),
            itemUID;
 
        grid.table.kendoDraggable({
            cursorOffset: {
                top: 5,
                left: 5
            },
            filter: "tbody > tr",
            group: "Grid",
            hint: function (e) {
                itemUID = e.attr(kendo.attr("uid"));
                return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
            }
        });
         
        treeview.element.kendoDropTarget({
            group: "Grid",
            drop: function (e) {
 
                var model = grid.dataSource.getByUid(itemUID);
 
                 treeview.append({ Text: model.Name, Id: model.ItemID });
 
       
 
                itemUID = null;
            }
        });
 
    });
</script>

 This currently just appends into the TreeView root node.

 Thanks

Daniel
Telerik team
 answered on 14 May 2015
2 answers
198 views

Is it possible to add a kendo context menu to a TreeView node?  I can't seem to find any examples or posts about this.

 

Thanks

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 14 May 2015
8 answers
268 views
i'm migrated my project to Kendo UI v2014.3.1316 (previously kendo v2014.2.1008) and the mobile popover widget doesn't instantiate anymore. With previous version it work fine..
My sample code:< div id="popUser" kendo-mobile-pop-over="popUser" k-popup='{}'>
< /div >error:
TypeError: Cannot read property 'element' of undefined
at new D.extend.init (http://localhost:25586/Scripts/kendo/kendo.all.min.js:27:19741)
at new a.extend.init (http://localhost:25586/Scripts/kendo/kendo.all.min.js:27:25449)
at new u.extend.init (http://localhost:25586/Scripts/kendo/kendo.all.min.js:27:31527)
at HTMLDivElement. (http://localhost:25586/Scripts/kendo/kendo.all.min.js:10:2045)
at Function.jQuery.extend.each (http://localhost:25586/Scripts/jquery/jquery-1.11.1.js:383:23)
at jQuery.fn.jQuery.each (http://localhost:25586/Scripts/jquery/jquery-1.11.1.js:136:17)
at mt.plugin.e.fn.(anonymous function) as kendoMobilePopOver
at m (http://localhost:25586/Scripts/kendo/kendo.angular.min.js:9:1274)
at o (http://localhost:25586/Scripts/kendo/kendo.angular.min.js:9:1737)
at w.directive.directive.directive.directive.directive.directive.directive.directive.directive.link.pre (http://localhost:25586/Scripts/kendo/kendo.angular.min.js:9:13712)error screenshot from chrome:
http://i60.tinypic.com/2vtozf6.pngany suggestion?
thanks
Petyo
Telerik team
 answered on 14 May 2015
0 answers
175 views
I am using Method 2 for binding my data to a flat file as shown here:
Binding to flat data
<div id="tree"></div>
<script>
var flatData = [
  { id: 1, parent: null, text: "Item 1" },
  { id: 2, parent: null, text: "Item 2" },
  { id: 3, parent: null, text: "Item 3" },
  { id: 4, parent: null, text: "Item 4" },
  { id: 5, parent: 1, text: "Item 1.1" },
  { id: 6, parent: 1, text: "Item 1.2" },
  { id: 7, parent: 1, text: "Item 1.3" },
  { id: 8, parent: 3, text: "Item 3.1" },
  { id: 9, parent: 3, text: "Item 3.2" },
  { id: 10, parent: 5, text: "Item 1.1.1" },
  { id: 11, parent: 5, text: "Item 1.1.2" },
  { id: 12, parent: 5, text: "Item 1.1.3" }
];
 
// tree for visualizing data
$("#tree").kendoTreeView({
  dataSource: {
    transport: {
      read: function(options) {
        var id = options.data.id || null;
 
        options.success($.grep(flatData, function(x) {
          return x.parent == id;
        }));
      }
    },
    schema: {
      model: {
        id: "id",
        hasChildren: function(x) {
          var id = x.id;
 
          for (var i = 0; i < flatData.length; i++) {
            if (flatData[i].parent == id) {
              return true;
            }
          }
          return false;
        }
      }
    }
  }
})
</script>
Now, however, I need to add some icons to differentiate the kind of file (Folder, excel, PDF, etc)
I have found a series of icons that I think would work would work at:
jQuery icons styling example
I just am not sure how to add the desired icons (or their references) into the JSON or set the TreeView up to show them.
All of the examples that I have found show both the data and the icon hard coded and I need to know how to have the icons in the JSON and for the tree to then generate them.
I have tried adding a JSON field called "image" and at a different time one called "icon" - neither seemed to work.
So, how would I set the icons up and show them?

TIA,
Bob Mathis
Bob
Top achievements
Rank 2
 asked on 13 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?