Questions on UI for ASP.NET MVC Forum

1 answer

227 views

I'm using Kendo grid in a MVC project. The first column is a checkbox which defines by ClientTemplate:

   .Columns(columns =>
       {
           columns.Bound(c => c.Checked).ClientTemplate(@"<input type='checkbox' class='checkbox' />").Width(50).Title("");
           columns.Bound(c => c.Id).Hidden();
           columns.Bound(c => c.FirstName);
           columns.Bound(c => c.LastName);
           columns.Bound(c => c.Company);
       })

What I want to have is: before click the header, it looks like the 1st screen shot. then make changes to the checkbox, click the header again, it will sort the row by the checkbox status, see screen shot 2.

I tried to set the 1st column sortable, but all others not sortable. Still not works. I think it is because when the data binds to the grid, c.Checked is always false. Now, if we click the checkbox, it does not change the value of that. That's why the sort does not work for this column.

How to make this work?

Thanks

Grid

answered on 19 Apr 2016

2 answers

846 views

Null reference when adding a new row to a grid.

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; }

}

Grid

answered on 19 Apr 2016

1 answer

221 views

How export a grid to pdf with "ClientFooterTemplate" but without "tool bar"

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

Grid

answered on 19 Apr 2016

1 answer

113 views

LiveTile for ASP.NET MVC

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 ?

ResponsivePanel

answered on 19 Apr 2016

2 answers

466 views

Difference Between kendo.common-bootstrap.core and kendo.common-bootstrap

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,

General Discussions

answered on 19 Apr 2016

5 answers

178 views

How can I use Adobe TypeKit inside Editor?

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!

Editor

answered on 18 Apr 2016

5 answers

258 views

MultiSelect into detailTemplate : Selected values

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 !

MultiSelect

answered on 18 Apr 2016

1 answer

208 views

Non-iframe window with partial view content

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.

Window

answered on 18 Apr 2016

2 answers

1.3K+ views

Setting value() after (re)read selects a value not in list

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.

DropDownList

answered on 15 Apr 2016

1 answer

181 views

'TypeError: this is undefined' error while calling the controller through ajax

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 = [];