Questions on UI for ASP.NET MVC Forum

2 answers

615 views

We are using SignalR binding within our grids to display column information. One thing we would like to do is show custom markup such as a web video. How would we go about displaying a video or custom markup within a Kendo Grid Column? Specifically in the code columns.Bound(p => p.Message) below?

I'm thinking I may need to use a client template, but so far I haven't been able to get it to work.

@(Html.Kendo().Grid<DSTDBContext.Models.Core.Notification>()
.Name("NotificationHomeGrid")
.HtmlAttributes(new { style = "height: 99%;" })
.Scrollable(o => o.Height("height: 100%;"))
.Resizable(resizable => resizable.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable => pageable
.Refresh(true)
.Enabled(false)
.PageSizes(false))
.Columns(columns =>
{
columns.Bound(p => p.Id)
.Title("Actions")
.Width(65)
.Filterable(false)
.Sortable(false)
.ClientTemplate("<i class=\"fa fa-exclamation-circle fa-lg\"></i>");
columns.Bound(p => p.NotificationDate)
.Title("Date")
.Width(250)
.Filterable(false)
.Sortable(false)
.ClientTemplate("");

columns.Bound(p => p.Message)
.Title("Notification")
.Width(300)
.Sortable(true)
.Filterable(false);
})

.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.Events(events => events.Push("onPush"))
.Sort(s => s.Add("CreatedAt").Descending())
.Transport(tr => tr
.Promise("notifyHubStart")
.Hub("notifyHub")
.Client(c => c
.Read("Read")
.Update("Update")
.Create("Create"))
.Server(s => s
.Read("Read")
.Update("Update")
.Create("Create")))
.Schema(schema => schema
.Model(model =>
{
model.Id(p => p.Id);
model.Field("NotificationDate", typeof (DateTime));
model.Field(p => p.Message);
}
)
)
)
)

Grid

answered on 20 Apr 2016

1 answer

164 views

Grid Popup Editor - Razor ForEach - List is null

Sample from RegistrationModel

1.public int Status {get; set;}

2.public string Batteries {get; set;}

3.public List<Batteries> BatteriesList {get; set;}

Sample from Grid

1..Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditRegistration"))

Sample from popup editor template

01.<h2>Batteries</h2>

02.@{

03. if(Model.BatteriesList != null)

04. {

05. <ul>

06. @foreach(var x in Model.BatteriesList)

07. {

08. <li>x.Selection</li>

09. }

10. </ul>

11. }

12.}

Model.BatteriesList is always null when the popup renders on-screen.
I know the BatteriesList is filled with data.
The other fields in my Editor Template show data.
Not sure what I am missing here.

Can you assist?

Grid

answered on 20 Apr 2016

2 answers

352 views

Shema Parse

Hello,

I want to use Datasources' schema parse but i cant find any where how it use.

ComboBox

answered on 20 Apr 2016

1 answer

264 views

Sort Kendo UI grid by Checkbox status?

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

973 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

259 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

145 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

507 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

210 views

[Solved] 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

278 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