Telerik Forums
UI for ASP.NET MVC Forum
1 answer
372 views
Hi

I'm using 2014.3.1119.440 version of Kendo MVC UI.
I configured the grid to export all data and a custom filename, and a custom toolbar with export to excel button.

It works fine, when I don't restore grid options using setOptions function.
When I restore it, with my custom toolbar preserve, it looks, like the export options are ignored.
There are only records from current page exported and exported file has a standard name.

I found the settings are correct in the page source.

Do I need some extra steps to make the settings working after restoring grid options?

Here's my razor grid code:

 
@{ Html.Kendo().Grid<Vectra.CPN.CPNLibrary.ViewModel.TRANSFER_IN_V>()
        .Name("MainGrid")
        .ToolBar(toolBar => toolBar.Template(@<text>
                <input class="t-button" type="button" id="ShowCreateNewExtFormId" name="ShowCreateNewExtForm" value="@Resources.Create" onclick="location.assign('@Url.Content("~/" + ControllerName + "/New")')"/>
                <input class="t-button" type="button" id="ShowEditFormId" name="ShowEditForm" value="@Resources.Edit" />
                <input class="t-button" type="button" id="ShowDetailFormId" name="ShowDetailForm" value="@Resources.Details" />
                   
                <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Zapisz do Excela</a>
                   
                <a href="" class="k-button" id="save">Save View</a>
                <a href="" class="k-button" id="load">Restore View</a>
                </text>)
            )
        .Excel(ex => ex.AllPages(true).FileName("cpn_do_vectry_" + DateTime.Now.ToShortDateString() + ".xlsx"))
        .ColumnMenu(column => column.Columns(true))
        .Columns(columns => columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewBag.GridColumns))
        .Reorderable(reorder => reorder.Columns(true))
        .Sortable(sortable => sortable.Enabled(true).SortMode(GridSortMode.SingleColumn).AllowUnsort(true))
        .Pageable(pageable => pageable.Enabled(true).Refresh(true).ButtonCount(5).PageSizes(true).PageSizes(new int[] { 5, 10, 20, 50 }))
        .Filterable(filtering => filtering.Enabled(true))
        .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single).Type(GridSelectionType.Row))
        .Events(events => events.Change("onChange"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("TransferIn_Read", "TransferIn"))
            .Model(model => model.Id(o => o.TRANSFER_ID))
            .ServerOperation(false)
            )
            .AutoBind(false)
        .Render()
        ;
}

and here's the part of my javascript for saving and restoring grid options:

var localStorageKey = "MainTransferInOptions";
var areOptionsLoaded = false;
 
function bindSaveRestoreCliks()
{
    var grid = $("#MainGrid").data("kendoGrid");
 
    $("#save").click(function (e) {
        e.preventDefault();
        localStorage[localStorageKey] = kendo.stringify(grid.getOptions());
    });
 
    $("#load").click(function (e) {
        e.preventDefault();
        loadGridOptions(e);
    });
}
 
function loadGridOptions(e)
{
    if (e == undefined || e.type == "click" || (!areOptionsLoaded && e.type == "read"))
    {
        var rawGrid = $("#MainGrid");
         
        var grid = $("#MainGrid").data("kendoGrid");
        var options = localStorage[localStorageKey];
        var toolbar = $("#MainGrid").find(".k-grid-toolbar").html();
 
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
        else if (!areOptionsLoaded && e == undefined)
        {
            grid.dataSource.read();
        }
 
        var newtoolbar = $("#MainGrid").find(".k-grid-toolbar");
        $("#MainGrid").find(".k-grid-toolbar").html(toolbar);
        bindSaveRestoreCliks();
        areOptionsLoaded = true;
    }
 }


I restore the settings on page load:

$(window).ready(function (e) {
        loadGridOptions(undefined);
}
);

Thanks in advance.

Paweł
Petur Subev
Telerik team
 answered on 07 Mar 2015
1 answer
87 views
Hello,

Does Telerik has something similar to Excel's Power View functionality?
Like this: https://support.office.com/en-za/article/Create-a-Power-View-sheet-in-Excel-2013-b23d768d-7586-47fe-97bd-89b80967a405#

I need something like a Pivot Grid at top and charts below it showing data presented in pivot Grid.
Here is DevExpress' functionality similar to what I want to have: https://demos.devexpress.com/MVCxPivotGridDemos/DataOutput/ChartsIntegration

Does having one datasource connected to both (grid and chart) make this integration work? Do you have any examples or demos?

Thank you,
Andrei
Petur Subev
Telerik team
 answered on 06 Mar 2015
2 answers
1.1K+ views
Hello,

I've got a page with two DatePickerFor. My problem is that one display a good format and the other no.

They are implemented like this 
<div class="col-md-3" style="vertical-align:middle">
    @Html.LabelFor(m => m.DateFrom, new { @style = "width:100px" })
    @(Html.Kendo().DatePickerFor(m => m.DateFrom)
        .Format("{0:yyyy/MM/dd}")
        .ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })
    )
</div>
<div class="col-md-3" style="vertical-align:middle">
    @Html.LabelFor(m => m.DateTo, new { @style = "width:75px" })
    @(Html.Kendo().DatePickerFor(m => m.DateTo)
        .Format("{0:yyyy/MM/dd}")
        .ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })
    )
</div>

These DatePickerFor are linked to my model. The properties are both DateTime

[Required]
[DataType(DataType.Date)]
[Display(Name = "Date from")]
public DateTime DateFrom { get; set; }
  
[Required]
[DataType(DataType.Date)]
[Display(Name = "Date to")]
public DateTime DateTo { get; set; }

When I look at the generated HTML, I've got this 

<input aria-readonly="false"
  aria-disabled="false"
  aria-owns="DateFrom_dateview"
  aria-expanded="false"
  role="combobox"
  class="k-input"
  style="width: 100%;"
  data-role="datepicker"
  data-val="true"
  data-val-date="The field Date from must be a date."
  data-val-required="The Date from field is required."
  id="DateFrom" name="DateFrom"
  value="02/23/2015 00:00:00"
  type="text">   
   
jQuery(function(){jQuery("#DateFrom").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});  
 
<input aria-readonly="false"
       aria-disabled="false"
  aria-owns="DateTo_dateview"
  aria-expanded="false"
  role="combobox"
  class="k-input"
  style="width: 100%;"
  data-role="datepicker"
  data-val="true"
  data-val-date="The field Date to must be a date."
  data-val-required="The Date to field is required."
  id="DateTo"
  name="DateTo"
  value="03/04/2015 23:59:00" type="text">
 
jQuery(function(){jQuery("#DateTo").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

All seem all right, but one DatEpciker display "2015/02/23" (which is what I'm waiting for) and the other one display "03/04/2015 23:59:00".

I don't understand why with the same parameters, one DatePicker display value wiith the good format and not the other one.


Thanks for your help

Antoine
Antoine
Top achievements
Rank 1
 answered on 06 Mar 2015
1 answer
111 views
Hi,

I have problems with the callback-function of the expandPath-function.
Is it possible that this callback-function is not executed, when the path-Array (first parameter of the expandPath-function) is [0]?

What i am trying to implement is when a new child-item is created then the parent-item should be reloaded and after that the new child-item should be selected.
This works fine, only when this new item is child of the root-item (with id 0) the callback-function, which selects the item, is not executed.

var parentItem = wpTreeView.dataSource.get(parentId);
parentItem.expanded = false;
parentItem.loaded(false);
parentItem.hasChildren = true;
 
wpTreeView.expandPath([parentId], function () {
    var newItem = wpTreeView.dataSource.get(data.Id);
    var newListItem = wpTreeView.findByUid(newItem.uid);
    console.log(newListItem);
    wpTreeView.select(newListItem);
});


Can someone give me some advice?

Regards,
Xaver
Alex Gyoshev
Telerik team
 answered on 06 Mar 2015
6 answers
752 views
Hi, 

How can I use datatable as a datasource for any of the chart? Do you have any examples?

Thanks
Daniel
Telerik team
 answered on 06 Mar 2015
1 answer
83 views
On day 3 of the eval and I have to say love the grid tools but am having some trouble with the scheduler.

The scenario is:
A Venue object has multiple event objects (not just recurring, unique multiple events). So the workflow is create the venue and then create and assign events.

Using the scheduler to create a new event the title field in the event needs to be the name of the venue. I am considering using a dropdown list but not really sure how to bind that to the title field. Resource bound to a viewbag item?

Additionally, we have regions. Venues are region agnostic but events are not. This is due to venues sitting on the regional borders and drawing crowds from different regions. I am thinking I need to add a multiselect to the template containing all the regions for event creation. On display however, I think there would be a drop down list of the regions and then the scheduler is filtered based on ddl selection.  I was unable to find a filter example but think it is an onchange that would prompt the scheduler to refresh with the new parameter. 

I think all this needs to be dumped into a custom editor template and I have seen plenty of examples on that and think I can get that done with the exception of recurrence. I am unsure how to add the recurrence options to a custom event editor. Is it possible to use partial views instead of using text?

Lastly, while I am not sure it is practical, would it be possible to create events outside of the scheduler. Think master/detail venue/events. I think this is possible but generating the recurrence inputs would be the tricky part again. Also, any edits would have to apply to the series in this format rather than a specific occurrence. So maybe it would create more problems than it would solve but would still like to try it out. 

Hopefully all this makes sense and are fairly simple solutions that I have not learned yet.

I have included the basic classes below for reference.

Thanks in advance,
Chris
public class Venue
    {
        public Venue()
        {
        }
        public int venueid { get; set; }
        public string venuename { get; set; }
    }
public class sEvent
    {
        public sEvent()
        {
        }
        public int eventid { get; set; }
        public DateTime start_time { get; set; }
        public DateTime end_time { get; set; }
        public string title{ get; set; }
        public string description { get; set; }
        public string reminder { get; set; }
        public string recurrence_rule { get; set; }
        public int recurrence_id { get; set; }
 
        public virtual Venue venue { get; set; }
public virtual ICollection<Region> regionlist {get;set;}
 
    }


Chris
Top achievements
Rank 1
 answered on 06 Mar 2015
5 answers
365 views
Hi guys,

I have a MVC project where I'm using a bootstrap navbar in the header and Kendo MobileTabStrip in the footer for my MobileLayout. On pages I'm using the MobileView wrapper around my content but the problem is that the bottom part of the content is only visible when you drag the screen up, it's not visible without dragging and holding the page.

For example I have a page with a button at the bottom and defined something like this in my razor view:

@(Html.Kendo().MobileView()
.Name("Content1")
.Content(@<text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt sollicitudin libero. Suspendisse ultrices volutpat dignissim. Vestibulum euismod tempor nisi eu porttitor. Suspendisse odio ligula, sagittis eu ultricies vel, maximus sit amet massa. Quisque ultrices rhoncus dignissim. Vivamus tristique arcu vitae eros pretium auctor.
@(Html.Kendo().MobileButton().Name("Button1").Text("Hello World"))
</text>)

The _Layout.cshtml page for this would be something like this:

@(Html.Kendo().MobileLayout()
.Name("Layout1")
.Header(@<text>
<!-- bootstrap navbar -->
</text>)
.Footer(@<text>
@(Html.Kendo().MobileTabStrip().Items(items =>
{
items.Add().Text("Home");
items.Add().Text("Contact Us");
items.Add().Text("About");
}
))
</text>)
 
So the text scrolls and you can scroll it on a device, but the button isn't visible by default so the user can't access it. It's there if you drag the screen up enough, but its like the scroller is a fixed size and not compensating for the height of the header (50px) and the tabstrip.

Thanks
Kiril Nikolov
Telerik team
 answered on 05 Mar 2015
5 answers
94 views
I've spent hours on this and I'm really stumped.  I have a grid that should display dropdowns for two columns:  OwnerID and State.  The columns shows in the grid but not in Edit or New.

@(Html.Kendo().Grid<ClientViewModel>()
                .Name("ClientGrid")
                .Pageable()
                .Columns(columns =>
                    {
                        columns.Bound(c => c.ClientID);
                        columns.Bound(c => c.ClientName);
                        columns.Bound(c => c.OwnerID).ClientTemplate("#:OwnerID.UserName #").Title("Owner").Width(155);
                        columns.Bound(c => c.Addr1).Visible(true);
                        columns.Bound(c => c.Addr2).Visible(true);
                        columns.Bound(c => c.City).Visible(true);
                        columns.Bound(c => c.State).ClientTemplate("#:State.StateName #").Title("State");
                        columns.Bound(c => c.Zip).Visible(true);
                        columns.Bound(c => c.SoldBy);
                        columns.Bound(c => c.Status);
                        columns.Bound(c => c.Phone);
                        columns.Bound(c => c.VolumnDiscountPct).Title("Vol. DC %").Visible(true);
                        columns.Bound(c => c.VolumnDiscountRange).Title("Vol. DC Range").Visible(true);
                        columns.Bound(c => c.VolumnDiscountRangeType).Title("Vol. DC Type").Visible(true);
                        columns.Bound(c => c.VolumnDiscountStartDate).Title("Vol. DC StartDate").Visible(true);
                        columns.Command(command => {command.Edit(); });
                    })
                 .DataSource(ds => ds
                    .Ajax()
                    .ServerOperation(false)
                    .Read(read => read.Action("GetClients", "Client"))
                    .Update(udt => udt.Action("ClientUpdate", "Client"))
                    .Create(c => c.Action("ClientCreate", "Client"))
                    //.Destroy(d => d.Action("ClientDelete", "Client"))
                    .Model(m =>
                    {
                        m.Id(ur => ur.ClientID);
                        m.Field(ur => ur.OwnerID).DefaultValue(
                            ViewData["defautOwner"] as CCProMVC.Models.CCProUser);
                        m.Field(ur => ur.State).DefaultValue(
                            ViewData["defaultState"] as CCProMVC.Models.StateModel);
                    }))
                 .Editable(e => e.Mode(GridEditMode.PopUp))
                 .ToolBar(t => t.Create())
                )


Editors and their Controllers:

@model CCProMVC.Models.CCProUser

@(Html.Kendo().DropDownList()
    .Name("OwnerID")
    .DataTextField("UserName")
    .DataValueField("Id")
    .DataSource(d => d
        .Read(r => r.Action("Index", "OwnerIDEditor"))
    )
)

@model CCProMVC.Models.StateModel

@(Html.Kendo().DropDownList()
    .Name("State")
    .DataTextField("StateName")
    .DataValueField("StateAbbrevation")
    .DataSource(d => d
        .Read(r => r.Action("Index", "StateEditor"))
    )
)

public class OwnerIDEditorController : Controller
    {
        // GET: OwnerIDEditor
        public JsonResult Index()
        {
            CCProEntities context = new CCProEntities();
            var users = context.AspNetUsers.Select(u => new CCProMVC.Models.CCProUser {Id = u.Id, UserName = u.UserName});

            return this.Json(users, JsonRequestBehavior.AllowGet);
        }
    }

public class StateEditorController : Controller
    {
        // GET: StateEditor
        public JsonResult Index()
        {
            CCProEntities context = new CCProEntities();
            var states = context.States.Select(s => new StateModel { StateAbbrevation = s.StateAbbrevation, StateName = s.StateName}).OrderBy(s => s.StateName);

            return this.Json(states, JsonRequestBehavior.AllowGet);
        }
    }

Finally the main Controller:

public class ClientController : Controller
    {
        // GET: Client
        public ActionResult Index()
        {
            CCProEntities dbContext = new CCProEntities();


            ViewData["defaultState"] = dbContext.States.AsEnumerable().Select(s => new StateModel { StateAbbrevation = s.StateAbbrevation, StateName = s.StateName }).First();
            ViewData["defautOwner"] = dbContext.AspNetUsers.AsEnumerable().Select(u => new CCProUser { Id = u.Id, UserName = u.UserName }).First();

            return View("Client");
        }

        public JsonResult GetClients([DataSourceRequest]DataSourceRequest request)
        {
            CCProEntities dbContext = new CCProEntities();
            var clientsQuery = dbContext.Clients.Select(c => new ClientViewModel
            {
                ClientID = c.ClientID,
                ClientName = c.ClientName,
                OwnerID = new CCProUser { Id = c.AspNetUser.Id, UserName = c.AspNetUser.UserName},
                OwnershipDate = c.OwnershipDate,
                Addr1 = c.Addr1,
                Addr2 = c.Addr2,
                City = c.City,
                State = new StateModel { StateAbbrevation = c.State1.StateAbbrevation, StateName = c.State1.StateName },
                Zip = c.Zip,
                SoldBy = c.SoldBy,
                Status = c.Status,
                Phone = c.Phone,
                VolumnDiscountPct = c.VolumnDiscountPct,
                VolumnDiscountRange = c.VolumnDiscountRange,
                VolumnDiscountRangeType = c.VolumnDiscountRangeType,
                VolumnDiscountStartDate = c.VolumnDiscountStartDate
            }).OrderBy(o => o.ClientName);

            return Json(clientsQuery.ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult ClientCreate([DataSourceRequest] DataSourceRequest request, Models.ClientViewModel client)
        {
            CCProMVC.Client eFClient = new Client();

            var context = new CCProEntities();
            if (client != null && ModelState.IsValid)
            {
                eFClient.ClientName = client.ClientName;
                eFClient.Addr1 = client.Addr1;
                eFClient.Addr2 = client.Addr2;
                eFClient.City = client.City;
                eFClient.State = client.State.StateAbbrevation;
                eFClient.Zip = client.Zip;
                eFClient.OwnerID = client.OwnerID.Id;
                eFClient.Phone = client.Phone;
                eFClient.SoldBy = client.SoldBy;
                eFClient.VolumnDiscountPct = client.VolumnDiscountPct;
                eFClient.VolumnDiscountRange = client.VolumnDiscountRange;
                eFClient.VolumnDiscountRangeType = client.VolumnDiscountRangeType;
                eFClient.VolumnDiscountStartDate = client.VolumnDiscountStartDate;
                eFClient.OwnershipDate = client.OwnershipDate;

                context.Clients.Add(eFClient);
                context.SaveChanges();
            }

            return Json(ModelState.IsValid ? true : ModelState.ToDataSourceResult());
        }
    }


I'm using Editor Templates and the Controllers for the editors when I set a breakpoint are not getting hit.

Any thoughts would be appreciated.

Greg
 
Dimo
Telerik team
 answered on 05 Mar 2015
1 answer
124 views
I found on the net your telerik-web-assets site.
I would like to use the Telerik secondary navigation demo with the Fixit and Navspy plugin.
From where can i get more Information about telerik-web-assets?
The Website seems to be broken!?
Vasil Yordanov
Telerik team
 answered on 05 Mar 2015
1 answer
301 views
Here is my Kendo Datasource and code related to it. I want to display radio button list in Access Type column so that user can select Read or Read/Write or None type access. How can I pass that in my datasource ?I want radiobuttonlist at group level too.

var words = {
'count': 4,
'input': 'kendo',
'groups': [{
'field': 'Word 1',
'value': '3',
'items': [
{ 'Word': 'ACT', 'AccessType' : 'Read' },
{ 'Word': 'ADG', 'AccessType': 'Read' },
{ 'Word': 'ALF', 'AccessType': 'Read / Write' }
],
'hasSubgroups': false,
'aggregates': {}
}, {
'field': 'Word 2',
'value': '4',
'items': [
{ 'Word': 'BCB', 'AccessType': 'Read' },
{ 'Word': 'BCC', 'AccessType': 'Read / Write' },
{ 'Word': 'BCH', 'AccessType': 'None' },
{ 'Word': 'BCT', 'AccessType': 'Read' }
],
'hasSubgroups': false,
'aggregates': {}
}, {
'field': 'Word 3',
'value': '6',
'items': [
{ 'Word': 'CCC', 'AccessType': 'Read / Write' },
{ 'Word': 'CCT', 'AccessType': 'None' },
{ 'Word': 'CHH', 'AccessType': 'Read' },
{ 'Word': 'CFF', 'AccessType': 'None' },
{ 'Word': 'GCC', 'AccessType': 'Read / Write' },
{ 'Word': 'GCT', 'AccessType': 'Read' }
],
'hasSubgroups': false,
'aggregates': {}
}] 
};

var wordsDataSource = new kendo.data.DataSource({
data: words,
schema: {
groups: 'groups',
},
group: {
field: 'length'
},
serverGrouping: true,
columns: [
{ field: "Word", title: "Sites" },
{ field: "Access", title: "Access" }
]
});

$("#grid").kendoGrid({
autoBind: false,
dataSource: wordsDataSource
});

wordsDataSource.read();
Alexander Popov
Telerik team
 answered on 05 Mar 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?