Telerik Forums
UI for ASP.NET MVC Forum
2 answers
845 views

I am getting the error:  JavaScript runtime error: Unable to get property 'xxx' of undefined or null reference.

This occurs when I click the "Add New Record" in my Kendo grid.

Does this have something to do with the way the model in setup?

I was able to add a record previously when my data record was more flattened out.

Please advise.

 

My grid is setup as:

@(Html.Kendo().Grid<MyTest.Models.PersonModel>()
    .Name("myGrid")
    .Columns(col =>
    {
        col.Bound(x => x.Person.ID);
        col.Bound(x => x.Person.Field1);
        col.Bound(x => x.Person.Field2);
        col.Bound(x => x.Person.Field3);
        col.Command(x => {
            x.Custom("Extra Options").Click("showExtraOptions");
            x.Destroy();
        });
    })
    .ToolBar(x =>
    {
        x.Create();
        x.Save();
    })
    .Sortable()
    .Editable(x => x.Mode(GridEditMode.InCell))
    .Navigatable()
    .Scrollable(x => x.Height("auto"))
    .Filterable(x => x
        .Extra(false)
        .Mode(GridFilterMode.Menu)
        .Operators(op => op
            .ForString(str => str.Clear()
                .Contains("Contains")
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
            )
        )
    )
    .Pageable(p => p
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .DataSource(ds => ds
        .Ajax()
        .ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
        .Batch(true)
        .PageSize(20)
        .Model(m =>
            {
                m.Id(x => x.Person.ID);
            })
        .Read(r => r.Action("GetPerson", "Home"))
        .Create(x => x.Action("CreatePerson", "Home"))
        .Destroy(x => x.Action("DeletePerson", "Home"))
        .Update(x => x.Action("UpdatePerson", "Home"))
    )
)

 

My model is:

public class PersonModel
{
    public My_Person Person{ get; set; }
    public List<Person_Options> PersonOptions { get; set; }
}
 
public class My_Person
{
    public string ID{ get; set; }
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    public string Field3 { get; set; }
}

 

Jim
Top achievements
Rank 1
 answered on 19 Apr 2016
1 answer
221 views

I want export information from a Grid mvc to PDF without the tool bar but with the Client FooterTemplate, because, I  have the total amount about all rows  here

this is mi full code

 

<link href="~/Content/kendo/2016.1.112/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1.112/kendo.material.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/jquery.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2016.1.112/kendo.aspnetmvc.min.js"></script>

<style>
    #grid .k-grid-content {
        height: 283px !important;
    }

    #grid > div.k-grid-footer > div > table > tbody > tr > td:nth-child(6) {
        text-align: right;
    }

    #grid > div.k-grid-footer > div > table > tbody > tr > td:nth-child(7) {
        text-align: right;
    }

    /*
        Use the DejaVu Sans font for display and embedding in the PDF file.
        The standard PDF fonts have no support for Unicode characters.
    */
    .k-grid {
        font-family: "DejaVu Sans", "Arial", sans-serif;
    }

    /* Hide the Grid header during export */ 
    /*.k-pdf-export .k-grid-toolbar,
    .k-pdf-export .k-pager-wrap*/
    .k-pdf-export .k-grid-toolbar
    {
        display: none;
    }
    
</style>
@{
    Layout = null;
}

<div id="transactions">
    @(Html.Kendo().Grid<Account.ViewModels.AccountManagement.AccountingViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CompanyName);
        columns.Bound(p => p.ContractDescription);
        columns.Bound(p => p.ConceptType);
        columns.Bound(p => p.MovementDate).Title("Date").Format("{0:MMMM dd yyyy}");
        columns.Bound(p => p.Billing).Title("Invoice Number");
        columns.Bound(p => p.PaidFlag).Title("Status").ClientFooterTemplate("Total");
        columns.Bound(p => p.Paid).Title("Amount").Format("{0:c}").HtmlAttributes(new { style = "text-align:right" })
        .ClientFooterTemplate("#= kendo.format('{0:c}', sum) #");
    })
    .ToolBar(tools =>
    {
        tools.Excel();
        tools.Pdf();
    })
    .Excel(excel => excel.FileName("Transaction.xlsx").Filterable(true).ProxyURL(Url.Action("ExcelExportTransactions", "Accounting")))
    .Pdf(pdf=>pdf.AllPages()
    .FileName("Transactions.pdf")
    .Margin(0,1,100,1)
    .ProxyURL(Url.Action("PdfExportTransactions", "Accounting")))
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("CompanyName").Ascending())
        .ServerOperation(true)
        .Model(model => model.Id(p => p.MovementID))
                .Read(read => read.Action("ReadTransactions", "Accounting"))
        .Aggregates(a => { a.Add(p => p.Paid).Sum(); })


     )
    )
</div>

Radoslav
Telerik team
 answered on 19 Apr 2016
1 answer
113 views

 

Hi,

 

Is there any telerik control for live tile for MVC ? There is one for ASP.Net but I was hoping to get one for MVC. If not, any ideas on what Telerik control I can use and try getting same behavior ?

Rumen
Telerik team
 answered on 19 Apr 2016
2 answers
466 views
What's the difference between kendo.common-bootstrap.core.min.css and kendo.common-bootstrap.min.css?  

Documentation shows to get Bootstrap 3 to work with Kendo you need to include kendo.common-bootstrap.min.css and kendo.bootstrap.min.css as described via http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

Thanks,
Antony
Top achievements
Rank 1
Iron
 answered on 19 Apr 2016
5 answers
177 views

My application makes use of Adobe TypeKit for loading custom fonts. I'd like the kendo editor to make use of these fonts so staff that are loading content can see what it will look like. Adobe TypeKit loads fonts/css using javascript (see below for example). Is there anyway for me to load this javascript into the iframe? Or is there anyway for me to get the iframe to be able to use the fonts/css loaded by TypeKit?

<script src="https://use.typekit.net/ID_HERE.js"></script>
<script>try { Typekit.load({ async: true }); } catch (e) { }</script>

 

Thanks!

Kyle Smith
Top achievements
Rank 1
 answered on 18 Apr 2016
5 answers
258 views

Hi !

I want to preselect my MultiSelect with values of my ViewModelRole.Functionalities

@(Html.Kendo().Grid<GCM.ViewModel.ViewModelRole>()
      .Name("GridRoles")
      .Columns(columns =>
      {
          columns.Bound(c => c.Designation);
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
      .ToolBar(toolbar => {
          toolbar.Create();
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .ClientDetailTemplateId("functionalityPanel")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(p => p.Id))
          .Read(read => read.Action("Roles_Read", "Role"))
          .Create(create => create.Action("Roles_Create", "Role"))
          .Update(update => update.Action("Roles_Update", "Role"))
          .Destroy(destroy => destroy.Action("Roles_Destroy", "Role"))
      )
)
 
<script type="text/javascript">
    function Save(e)
    {
        var roleId = e.event.target.dataset.roleId;
 
        /*
            AJAX Call to update Role.Functionalities
        */
    }
</script>
 
<script id="functionalityPanel" type="text/x-kendo-template">   
    @(Html.Kendo().MultiSelect()
                  .Name("Fonctionnalities_#=Id#")
                  .Placeholder("Choisissez les fonctionnalitées")
                  .AutoClose(false)
                  .DataValueField("Id")
                  .DataTextField("Code")
                  .Value(new List<int> { 1, 2 })
                  .BindTo(ViewBag.functionalities)
                  .ToClientTemplate()
    )
    <br/>
    @(Html.Kendo().Button()
        .Name("Save_#=Id#")
        .Content("Save")
        .HtmlAttributes(new { data_role_id="#=Id#" })
        .ToClientTemplate())
</script>

and my controller

public class RoleController : Controller
    {
        private SolutecNetContext db = new SolutecNetContext();
 
        public ActionResult Index()
        {
            ViewBag.functionalities = db.Functionalities.ToList();
            return View();
        }
 
        public ActionResult Roles_Read([DataSourceRequest]DataSourceRequest request)
        {
            IQueryable<Role> roles = db.Roles;
            DataSourceResult result = roles.ToDataSourceResult(request, role => new ViewModelRole{
                Id = role.Id,
                Designation = role.Designation,
                FunctionalitiesIds = GetFunctionalitiesIds(role.Functionalities)
            });
 
            return Json(result);
        }
 
        private List<int> GetFunctionalitiesIds(ICollection<Functionality> functionalities)
        {
            List<int> functionalitiesIds = new List<int>();
 
            foreach(Functionality f in functionalities)
            {
                functionalitiesIds.Add(f.Id);
            }
 
            return functionalitiesIds;
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Roles_Create([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
        {
            if (ModelState.IsValid)
            {
                var entity = new Role
                {
                    Designation = viewModelRole.Designation
                };
 
                db.Roles.Add(entity);
                db.SaveChanges();
                viewModelRole.Id = entity.Id;
            }
 
            return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Roles_Update([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
        {
            if (ModelState.IsValid)
            {
                var entity = new Role
                {
                    Id = viewModelRole.Id,
                    Designation = viewModelRole.Designation
                };
 
                db.Roles.Attach(entity);
                db.Entry(entity).State = EntityState.Modified;
                db.SaveChanges();
            }
 
            return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Roles_Destroy([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
        {
            if (ModelState.IsValid)
            {
                var entity = new Role
                {
                    Id = viewModelRole.Id,
                    Designation = viewModelRole.Designation
                };
 
                db.Roles.Attach(entity);
                db.Roles.Remove(entity);
                db.SaveChanges();
            }
 
            return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
        }
 
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }

 

and I want to do something like

.Value("#=Functionalities#")

Is it possible ? Did I miss something ?

 

Thank for your help !

Adrien
Top achievements
Rank 1
 answered on 18 Apr 2016
1 answer
208 views

Hello,

I've been trying to implement the following (I believe quite common) scenario:

I have a page with a Grid in it and an Window, declared like this:

@(Html.Kendo().Window()
    .Name("detailsWindow")
    .Title(Localizer["Manage an Object"])
    .Content(Localizer["Loading..."])
    .AutoFocus(true)
    .Iframe(false)
    .Draggable()
    .Events(ev => ev.Close("detailsWindow_close"))
    .Resizable()
    .Visible(false)
    .Deferred()
)

 When the user double-clicks, the Window is refreshed with an URL of a partial view, the Window is centered and shown like this:

var detailsWindow = $('#detailsWindow').data('kendoWindow');
kendoWindow.refresh(url).center().open();

The problem is that nothing seems to work in the contents of the Window:

  • Kendo UI Date Time Pickers are not styled;
  • The culture is not applied.

Obviously Kendo UI Javascripts are not applied to the new DOM elements in the Window.

My question is: Can I refresh Kendo UI somehow (preferably to the DOM elements in the Window only)?

Note: I have intentionally disabled iframes, because:

  • I want to reduce markup going down the wire
  • I use AJAX forms in the Window
  • I reuse the actions and emit a regular view or a partial view depending on the request type.

 

Dimo
Telerik team
 answered on 18 Apr 2016
2 answers
1.3K+ views

I've got a drop down list declared as follows

@(Html.Kendo().DropDownList()
    .Name("CodeDropDown")
    .OptionLabel(" ")
    .DataValueField("Code")
    .DataTextField("DisplayDescription")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("_CodeDropDown", "Gainful")
                .Data("CodeDropDownData");
        })
        .Events(events => events.Error("onCodeDropDownError"))
        .ServerFiltering(true);
    })
    .AutoBind(true)
    .Animation(false)
    .HtmlAttributes(new { style = "width: 512px; font-size: 12px;" })
    .Events(events => events.Change("onCodeDropDownChange"))
)

I then also have a checkbox which when toggled, causes a reread via this function:

function loadCodeDropdownList() {
    var codeList = $("#CodeDropDown").data("kendoDropDownList");
    codeList.dataSource.read(CodeDropDownData());
}

This works great; the items in the dropdown change and everything is fine. I have seen some examples where a refresh() is invoked on the DDL after the read, but that didn't seem to be necessary for me.

So what's the problem? Some of the items in the lists overlap so if an item is currently selected which isn't in the newly read data, I'm trying to clear it. My naive approach was to get the value, read the new data, set the value again and if the selectedIndex isn't then set, set the value to null, as in

function loadCodeDropdownList() {
    var codeList = $("#CodeDropDown").data("kendoDropDownList");
    var code = codeList.value();
    var oldSel = codeList.selectedIndex;
    codeList.dataSource.read(CodeDropDownData());
    codeList.refresh();         // doesn't seem to matter if this is here
    codeList.value(code);
    if (codeList.selectedIndex == 0) {
        // selectedIndex is always the same as it was before the read
        codeList.value(null);
    }
}

However, this doesn't work. The value always gets set, even if it's not in the newly read items and the selectedIndex goes back to what it was.

I've also tried setting the value to null before the read, and that doesn't seem to help; true, the value becomes null and the selectedIndex is zero, but then setting the value still results in it getting set to a value not in the list and the selectedIndex goes back to what it was, even though it may be greater than the number of items that were just read.

What I have noticed, though, is that setting a breakpoint on the line where I set the value after the read makes it work. When the breakpoint is hit, the value is no longer displayed in the drop down list, and the rest works as expected. But if I just let it run, it doesn't work.

So am I running into some kind of timing issue? I've tried binding to the dataBound event and doing the setting there, but it works just the same.

Ivan Danchev
Telerik team
 answered on 15 Apr 2016
1 answer
179 views

Hi,

I am uploading an excel file that has some formulas in them to the kendo spreadsheet. The sheet seems to be loading in the Spreadsheet fine, but when I try to send the retrieved values from the kendo spreadsheet, there seems to be an exception - 'TypeError: this is undefined'

function fetchDataForKidsGridModel(ExcelVals) {
    debugger;
    var cellValues, range, ArrOfCellValue = [], CellValueArr,
    startPoint = 17,
    mandotoryColumn = "E";
 
    var outletArr = [];
 
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    var endPoint = getSheetLength(sheet, startPoint, mandotoryColumn
    for (var l = 0; l < endPoint ; l++) {
 
        var StartColumn_CI = 85;
        CellValueArr = [];
        var arrOfOutlets = [];
        for (var i = 0; i < ExcelVals.length ; i++) {
 
            var rowCellNo = ExcelVals[i].ColumnVal.replace("#", startPoint).trim();
            range = sheet.range(rowCellNo)
            cellValues = range.values();
            if (cellValues[0][0] == null) {
                cellValues[0][0] = "";
            }
            CellValueArr[i] = cellValues;
        }
        ArrOfCellValue[l] = CellValueArr;
 
        startPoint++;
    }
    //ERROR is thrown at this point while debugging
    $.ajax({
        url: '/UploadPO/CreateModelForGridEcomm',
        type: 'POST',
        async: true,
        dataType: 'json',
 
        data: { cellValues: ArrOfCellValue, BrandID: brandName }, //
 
        success:
            function (result) {
                console.log(result);
                // you code comes here
                GetGrid(result)
            },
        error:
    function (result) {
        //Error Handling
        if (result.success = true) {
            alert(result.responseText);
        }
        if (result.success = false) {
            alert(result.responseText);
        }
    }
    });
}

Any help would be much appreciated.

Feel free to ask any questions to further clarify my question..

Thanks in advance...

Alex Gyoshev
Telerik team
 answered on 15 Apr 2016
1 answer
8.2K+ views
I have a grid with databound method which shows the message 'No Data Found for the search' in case no data gets retrieved after performing search. Now i have added a radio buttons which when clicked needs to clear the old data from the grid. The issue is i am using the code
$(grid).data("kendoGrid").dataSource.data([]);

 which does clear the grid but it also shows 'No Data Found for the search' message. Since user didn't perform any search but only changed the radio button it doesn't seem right to display that message in the grid. So, i was wondering if there was a way to clear the grid without invoking the databound method.

Thanks.

Dimiter Madjarov
Telerik team
 answered on 15 Apr 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?