Questions on UI for ASP.NET MVC Forum

2 answers

2.6K+ views

Dynamically change the width of a tooltip based on it's content & restyle

So I am using the latest build at the time of writing this "2014.2.909" and I have some "info" tooltips that the contents will dynamically change based on a combobox selection.

The tooltip is set up like this:

1.@(Html.Kendo().Tooltip()

2. .For(".glyphicon-question-sign")

3. .Position(TooltipPosition.Top)

4. .Animation(true)

5. .Events(events => events.Show("tooltipReset"))

6. .Width(450)

7. .ContentTemplateId("tooltip-template")

8.)

Now I am using a template like this:

01.<script id="tooltip-template" type="text/x-kendo-template">

02. <div id="tooltipContent" class="panel panel-primary">

03. <div class="panel-heading">

04. <h3 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span> Helpful Hint</h3>

05. </div>

06. <div class="panel-body">

07. <div class="row">

08. <div class="col-md-12">

09. #=target.data('title')#

10. </div>

11. </div>

12. </div>

13.

14. </div>

15.

16. </script>

(You can hopefully see I am using bootstrap theme here as well)

The current tooltipReset function I have created functions like this:

1.function tooltipReset(e) {

2.

3. var contentpanel = $("#tooltipContent").first(".col-md-12").width();

4. e.sender.refresh();

5. e.sender.popup.wrapper.width(contentpanel);

6.

7.}

On top of this I have had to override the current styling to make sure my bootstrap panel appears as I want it without the black surround:

01..k-tooltip

02.{

03.

04.}

05.

06..k-tooltip, .k-tooltip-content

07.{

08. color:#2a2828;

09. background:none !important;

10. background-color:transparent !important;

11. border:none !important;

12.

13.}

14.

15.

16..k-callout, .k-callout-w{

17. border:none !important;

18.}

Now this shows a mini panel that floats as I require but I can't seem to get the size to dynamically expand/ contract based on the content being supplied. I tried setting the width to "auto" but this didn't seem to expand the right hand side so the text was either touching or overlapping the panel contents.

So is there a better way of doing what I want?

On top of that is there a better way to restyle the tool tips as the changes I have put in have affected other tool tips I have. These are not related to this like graph tool tips etc.

Thanks in advance.

ToolTip

answered on 26 Sep 2014

1 answer

152 views

Problem executing an action on custom command click

Hello,
I've a grid defined as

@(Html.Kendo().Grid<Communications.Communication>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.Protocol).Title(ResourceStrings.Protocol);

columns.Bound(c => c.Date).ClientTemplate(@DateTimeHtmlHelper.GetParsedDate("Date")).Title(ResourceStrings.Date);

columns.Bound(c => c.CodiceRapporto).Title(ResourceStrings.CodeDossier);

columns.Bound(c => c.Type).Title(ResourceStrings.Type);

columns.Command(commadnAction => commadnAction.Custom("download").Text("Download").Click("Download"));

})

.Resizable(resize => resize.Columns(true))

.Scrollable(scr => scr.Enabled(true))

.Filterable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

)

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="toolbar">

<label>Data da </label>

@Html.Kendo().DatePicker().Name("dateFrom").Value(@Model.DateFrom)

<label> Data a </label>

@Html.Kendo().DatePicker().Name("dateTo").Value(@Model.DateTo)

@Html.Kendo().Button().Name("btnCarica").Content(ResourceStrings.BtnLoadData).Events(events => { events.Click("LoadData"); })

</div>

</text>);

}

)

<script>

function Download(e) {

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var content ="@Html.ActionLink("CommunicationsReport", "Reports", new { protocol = 123 })"

alert(content);

}

</script>

I wish at column click to load open a new page for downloading a pdf....

in other parts of the project I've used something as

var content ="@Html.ActionLink("CommunicationsReport", "Reports", new { protocol = 123 })"

but now I can't since I don't have the link client side.... is there any simple way of doing that?

Thanks

Grid

answered on 26 Sep 2014

1 answer

123 views

Kendo UI is not working with MVC5 in VS2012

I'm using VS2012 and MVC5. I dowloaded the telerik.ui.for.aspnetmvc.2014.2.903.trial and followed the below steps

Added the Kendo.Mvc.dll reference to my project. (got Kendo.Mvc.dll from telerik.ui.for.aspnetmvc.2014.2.903.trial\wrappers\aspnetmvc\Binaries\Mvc5)
Copied the JS and Style folders from telerik.ui.for.aspnetmvc.2014.2.903.trial
Created BundleConfig.cs as per the telerik website tutorial
added the reference link _Layout.cshtml and did the web.config settings as suggested

when i run the application i'm getting javascript runtime error in the following debugger code

jQuery(function(){jQuery("#datepicker").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

can please help to resolve my issue.

Grid

answered on 26 Sep 2014

2 answers

297 views

Grid Datasource read request not being called

I am re-wiring a grid from traditional MVC to use a Telerik Grid and have a grid that appears not to be requesting data from the controller:

@ModelType EditUserViewModel

@Code

ViewData("Title") = "UserRoles"

End Code

<h2>Roles for user: @Model.UserName</h2>

<hr />

@Using (Html.BeginForm("UserRoles", "Account", FormMethod.Post, New With {.encType = "multipart/form-data", .name = "myform"}))

@Html.AntiForgeryToken()

@(Html.Kendo().Grid(Of SelectRoleEditorViewModel).Name("Roles") _

.Columns(Sub(c)

c.Bound(Function(x) x.Selected)

c.Bound(Function(x) x.RoleName)

c.Bound(Function(x) x.Description)

End Sub) _

.Editable(Function(editable) editable.Mode(GridEditMode.InLine)) _

.DataSource(Function(dataSource) dataSource _

.Server() _

.Model(Sub(model) model.Id(Function(p) p.RoleName)) _

.Read(Function(read) read.Action("UserRolesRead", "Account", New With {.id = Model.id}))) _

.Pageable())

Controller:

Public Function UserRolesRead(req As DataSourceRequest, id As String) As ActionResult

Dim Db = New ApplicationDbContext()

Dim user = Db.Users.First(Function(u) u.Id = id)

Dim model As New List(Of SelectRoleEditorViewModel)()

model = user.Roles

Return View(model)

End Function

GIven this is non-Ajax I'd expect the Grid to 'read' the datasource upon initial rendering, but a breakpoint in the first line of 'UserRolesRead' is never hit and the Grid is rendered empty.

Anyone any ideas?
Thanks

Grid

answered on 25 Sep 2014

1 answer

709 views

[Solved] MVC Styles and Bootstrap Form-Control Class

What is the best way to get the Kendo MVC controls to honor the Bootstrap "form-control" class? I have already seen these two related resources:

http://www.telerik.com/forums/do-you-plan-to-create-bootstrap-3-compatible-theme-
http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

I generally have no problem with the Bootstrap v.3 and the Telerik bootstrap theme working together. The key exception in my case is the "form-control" class. For example the controls (drop-downs, auto-completes, etc) do not wrap below the label as expected on a standard (non-horizontal) form. I often use the "for" Html Helper e.g. @Html.KendoDropDownFor.

MVC 5 standard For helpers are now good at allowing for the additional "{ @class = "form-control" } argument. Need to do something similar with the kendo controls

General Discussions

answered on 25 Sep 2014

1 answer

96 views

Update MVC grid with new, different columns

I have a mvc grid that is populated with a datasource generated by a datable, the problem is that when i change the datable result the columns of the grid doesnt change.

On the other hand the rows changes because i can see the number of items changed.

I would like to know how to change the columns when i change the datatable result.

Grid

answered on 25 Sep 2014

1 answer

113 views

Foreign Key Column Editable Issues

I've been fighting with the Foreign Key Colums and being able to edit them. I finally got it working, but it only saves if I click the Save Changes button.

.Editable(editable => editable.Mode(GridEditMode.InCell))

If I change the editable.Mode to GridEditMode.InLine and I get An exception of type 'System.NotSupportedException' occurred in Kendo.Mvc.dll but was not handled in user code.

Any advice?

Grid

answered on 24 Sep 2014

3 answers

485 views

[Solved] Local data binding with update.

I only need to show a few rows (say 5 -100) in my grid so I rather use local binding. But I need to use inline edit on a date column.
How do I go about doing this?

The current solution/examples uses ajax to read the data. I could take that approach and it would result in one extra unnecessary request. The bigger problem is, the query to read the data is a bit complex so I am using Native SQL and I am not sure how to mix that in with Kendo's DataSourceRequest.
My current code which I know is wrong when it comes to pagination.
var enterpriseAccounts = db.Database.SqlQuery<EnterpriseAccountsVM>(enterpriseAccountsQuery, new SqlParameter("accountType", AccountType.Enterprise)).ToList();
return Json(enterpriseAccounts.ToDataSourceResult(request));

I could solve all my problems by using client side pagination but have updates call the server. Is this possible?

Grid

answered on 23 Sep 2014

7 answers

317 views

Foreignkey column sends incorrect data to server with creating new row

Grid in inline edit mode.

@(Html.Kendo().Grid<Security.UserViewModel>()

.Name("Users")

.Columns(columns =>

{

columns.Bound(c => c.UserId).Hidden();

columns.Bound(c => c.UserName).Title("Логин");

columns.Bound(c => c.FirstName).Title("Имя");

columns.Bound(c => c.LastName).Title("Фамилия");

columns.Bound(c => c.Email).Title("E-mail");

columns.ForeignKey(c => c.FirstRoleId, (System.Collections.IEnumerable)ViewData["roles"], "RoleID", "RoleName").Title("Роль");

columns.Command(command =>

{

command.Edit();

command.Destroy();

});

})

.ToolBar(toolBar => toolBar.Create())

.Editable(editing => editing.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error"))

.Model(model => {

model.Id(u => u.UserId);

})

.Create(update => update.Action("Create", "Users"))

.Read(read => read.Action("Read", "Users"))

.Update(update => update.Action("Update", "Users"))

.Destroy(delete => delete.Action("Delete", "Users"))

)

When I add new row grid sends to the server blank "FirstRoleName" instead of "FirstRoleId". When I update the row all works fine.
Made temporary workaround:

$(function () {

var grid = $("#Users").data("kendoGrid");

// bind to the save event

grid.bind("save", function (e) {

if (e.model.isNew()) {

e.model.FirstRoleId = $("input#FirstRoleId").val();

}

});

I think it is a bug.

Grid

answered on 23 Sep 2014

4 answers

156 views

update the parent row - based on child-template "text/kendo-tmpl -

I want to add an image to parent row depending on the value in child row.
Below is my main grid and template code

If FeedBackForm.FeedBackQA[i].Answer is not null I need image on parent row
find complete code attached.
Please guide

.ClientDetailTemplateId("template")

    <script id="template" type="text/kendo-tmpl">
        <div>
            <div class="feedbackQuestion">
                # for (var i = 0; i < FeedBackForm.FeedBackQA.length; i++) { #
                <ul>
                    <li>#= FeedBackForm.FeedBackQA[i].Question #   <span class="feedbackanswer">    #= FeedBackForm.FeedBackQA[i].Answer #</span></li>
                </ul>

                # } #
            </div>

        </div>

    </script>

Grid

answered on 23 Sep 2014