Questions on UI for ASP.NET MVC Forum

4 answers

491 views

Load toolbar template from x-kendo-template

Hi

How can i use the x-kendo-template for my grid toolbar?

Before I got something like this:
kendoGrid({
toolbar: kendo.template($("#toolbarTemplate").html())
});

and a corresponding script like:
<script type="text/x-kendo-template" id="toolbarTemplate">
<div class="toolbar">
</div>
</script>

how can i use the same template script inside asp.net mvc kendo ui grid
@(Html.Kendo().Grid(Of CProductionDataGridViewModel)().Name("datagrid").ToolBar(Sub(toolbar)
toolbar.Template("kendo.template($('#toolbarTemplate').html()")
End Sub))

Thanks

Grid

answered on 12 Nov 2013

3 answers

700 views

MultiSelectFor and Values

Here is a code snip:

@Html.Kendo().MultiSelectFor(model => model.Programs).BindTo((SelectList)ViewBag.Programs).DataTextField("Text").DataValueField("Id").Name("SelectedProgramIds ")

ViewBag.Programs is populated by:

Models.Program[] obj = model.List();

ViewBag.Programs = new SelectList(obj, "Id", "Name", project.Programs);

I'm also using:

public IEnumerable<String> SelectedProgramIds { get; set; }

.. as the property for the saved value in the model.

After I POST, SelectedProgramIds contains the Text Name (but not values) of the entries in the MultiSelect control. How can I get the Value as set by DataValueField(), instead of the DataTextField() after POST?

Also, when the control loads, how can existing items be selected? Currently the box is empty.

MultiSelect

answered on 12 Nov 2013

5 answers

565 views

grid popup insert/update success view

hey guys.

I'm using a grid with popup editmode which looks like:

@(Html.Kendo().Grid<Pattern>()

.Name("Pattern")

.ToolBar(toolbar =>

{

toolbar.Create().Text("New Pattern");

}

)

.DataSource(dataSource =>

dataSource.Ajax().PageSize(50)

.Model(model =>

{

model.Id(s => s.RegExID);

model.Field(s => s.Category).DefaultValue(new Category());

model.Field(s => s.Table).DefaultValue(new ExpressionTable());

model.Field(s => s.Version).DefaultValue("%");

}

)

.Create(create => create.Action("CreatePattern", "Pattern"))

.Destroy(destroy => destroy.Action("DeletePattern", "Pattern"))

.Update(update => update.Action("UpdatePattern", "Pattern"))

.Read(reader => reader.Action("LoadPattern", "Pattern"))

)

.Sortable()

.Selectable()

.Pageable(pager =>

{

pager.Enabled(true).Refresh(true).PageSizes(new int[] { 50, 100, 150 });

pager.Info(false);

})

.Scrollable(s => s.Enabled(true).Height(500))

.Filterable(filterable =>

filterable.Extra(false).Operators(operators => operators

.ForString(str =>

str.Clear()

.StartsWith("Starts with")

.Contains("Contains")

)

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

)

The Template used looks like this:

@Html.HiddenFor(model => model.RegExID)

<div class="editor-label">

@Html.LabelFor(model => model.Table)

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.Table)

.OptionLabel("Please select a value")

.HtmlAttributes(new { style = "width: 200px" })

.AutoBind(true)

.Name("Table")

.DataTextField("Name")

.DataValueField("TableID")

.Events(e =>

{

e.Select("select");

e.DataBound("bound");

}

)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetRegExpressions", "Pattern");

})

.ServerFiltering(true);

})

)

</div>

<div id="regSW">

<div class="editor-label">

@Html.LabelFor(model => model.SoftwareName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.SoftwareName)

@Html.ValidationMessageFor(model => model.SoftwareName)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.SoftwarePublisher)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.SoftwarePublisher)

@Html.ValidationMessageFor(model => model.SoftwarePublisher)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Version)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Version)

@Html.ValidationMessageFor(model => model.Version)

</div>

<div id="regMachine">

<div class="editor-label">

@Html.LabelFor(model => model.InstallSource)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.InstallSource)

@Html.ValidationMessageFor(model => model.InstallSource)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Category)

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.Category)

.OptionLabel("Please select a value")

.HtmlAttributes(new { style = "width: 200px" })

.AutoBind(false)

.Name("Category")

.DataTextField("Name")

.DataValueField("CategoryID")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCategories", "Software");

})

.ServerFiltering(true);

})

)

</div>

<div class="editor-label" id="regDeslbl">

@Html.LabelFor(model => model.Description)

</div>

<div class="editor-field" id="regDesfld">

@Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", style = "width: 200px" })

@Html.ValidationMessageFor(model => model.Description)

</div>

<script>

$("#regSW").hide();

$("#regMachine").hide();

</script>

what I want to implement now is something like this:
after the sumbit(save, update) button is clicked I don't want the window to close. I want it to remain open and display something like a progressbar or an ajax loader to inform the user that sth. is happening right now and there's no need to submit again.

in the background there will be items added to the database and I want to display the amount of items added on a new view.

when the db operation is finished the loader should disappear and something like: 6 items have been added to the database should be displayed on a lets call it success view.

hopefully there's a way without creating kendo windows, having partial views with the content displayed and an ajax.beginform.

thanks in advance
cheers, tom

Grid

answered on 12 Nov 2013

0 answers

224 views

RadHtmlChart TooltipsAppearance ClientTemplate does not display data on binding to a value from database.

Hi,
Facing an issue while binding tooltip to database item, below is the code for reference -

<Series>
<telerik:ColumnSeries Name="Power" Stacked="true" DataFieldY="TotalPower" AxisName="Power">
<Appearance>
<FillStyle BackgroundColor="#36b8f4"></FillStyle>
</Appearance>
<LabelsAppearance Position="Center" Visible="false">
</LabelsAppearance>
<TooltipsAppearance ClientTemplate="#= dataItem.TotalPower#">
</TooltipsAppearance>

<%--
<TooltipsAppearance ClientTemplate="#= kendo(\'{0:dd MMM yy}\', dataItem.Date)#<br/>Power: #= kendo.format(\'{0:N2}\',dataItem.TotalPower)# kW">
</TooltipsAppearance>
--%>
<%--
<TooltipsAppearance ClientTemplate="#=dataItem.Date#<br/>Power: #=dataItem.TotalPower# kW">
</TooltipsAppearance>--%>

</telerik:ColumnSeries>
</Series>

When i use ClientTemplate in TooltipsAppearance to bind tooltip to TotalPower value (this value comes from dataset), it shows "undefined" on mouse over, and instead of ClientTemplate if dataformatstring is used then it display the value
(<TooltipsAppearance DataFormatString="{0}"></TooltipsAppearance>).

My requirement is that, i want to display both Date and TotalPower values in tooltip. Also, tried using kendo after googling this issue, but still without any success.

Please help as I'm stuck into this.

ToolTip

asked on 12 Nov 2013

6 answers

642 views

Remove file from filelist

How to remove file from Kendo Upload MVC file-list which is hidden by default? Previously in Telerik Upload I have used the code below but it do not works anymore.

this.removeFile = function (fileName) {
fileName = fileName.split("'")[0];
$('span.k-filename[title="' + fileName + '"]').parent().remove();
};

Upload

answered on 12 Nov 2013

1 answer

199 views

Kendo Grid, batch mode, determine when server side save is complete

Hello all! We have a KendoGrid on our MVC view, and it works great - the only question is when a user clicks the Save Changes button, how does the UI know when that action is complete if it is an AJAX request? In our case the grid is bound to server generated data, with Add and Save buttons in the tool bar. When a user enters invalid data into the grid as determined by the data annotations on the model, it works and shows the errors. We have no way of knowing if a successful save occurred though from what i've seen. Any ideas?

Thanks in advance!

Grid

answered on 12 Nov 2013

2 answers

133 views

Why am I getting a number of symbols showing up in my tooltip

Hi,

I am looking to implement the kendo ui tooltip for MVC. With the way I have it implemented now, I am getting a whole bunch of random symbols showing up in my tooltip.

I've attached a screen shot of what I am seeing and attached the relevant portions of code I am using. I am hoping to fill my ServiceTypeToolTip div with significantly more content and there will be about 20 of these such sections on the page.

*I am using Kendo 2013.1.319

Any help would be appreciated.

Thanks!

@(Html.Kendo().Tooltip()
.For("#ServiceTypeImg")
.ShowOn(TooltipShowOnEvent.Click)
.AutoHide(false)
.Animation(true)
.ContentTemplateId("ServiceTypeToolTip")
.Position(TooltipPosition.Right)
.Width(120)
)

<div id ="ServiceTypeToolTip">
<p>this is one line</p>
<p>this is line 2</p>
<p>this is a very very very very ver yver yveryv eryvery veyrvey rye long line</p>
</div>

<img src="~/Images/question-mark-icon-tiny-small.png" id="ServiceTypeImg" />

ToolTip

answered on 11 Nov 2013

1 answer

108 views

Grid First row not displayed the same way

Page code :

01.<h2>Groups</h2>

02.<br />

03.

04.<fieldset>

05. <table style="border: none; width:97%">

06. <tr>

07. <td style="text-align:left">

08. <input type="button" id="btnNewGroup" value="Create New Group" onclick="window.location = 'CreateGroup';" style="width:150px" />

09. </td>

10. </tr>

11. </table>

12.</fieldset>

13.

14.<%= Html.Kendo().Grid(Model).Name("grid").HtmlAttributes(new { style = "width: 90%" })

15. .DataSource(data => data

16. .Server()

17. .Model(model => model.Id(g => g.GroupID))

18. .Destroy(delete => delete.Action("DeleteGroup", "Group"))

19. )

20. .Columns(columns =>

21. {

22. columns.Bound(o => o.Name).Width(400);

23. columns.Bound(o => o.IsActive).Width(100);

24. columns.Bound(o => o.ContactCount).Width(100);

25. columns.Command(com =>

26. {

27.

com.Custom("EditGroup").Text("Edit").Action("UpdateGroup", "Group").SendDataKeys(true).HtmlAttributes(new { style="width:80px" });

28. com.Destroy().Text("Delete").HtmlAttributes(new { style = "width:80px" });

29. });

30. })

31. .Sortable()

32. .Editable(editing => editing.DisplayDeleteConfirmation(true))

33. .Scrollable()

34.%>

My first row shows the 2 buttons separeted by a carriage return, but other rows are displayed with the buttons next to each other.

All my Kendo grids are displayed like that. Does anyone has got an idea why ?
Thanks.

The result of the page can be shown in the attached file.

EDIT : This happens with ALL web browsers tested : IE10, Chrome, Mozille Firefox 22.0.

Grid

answered on 11 Nov 2013

1 answer

66 views

Possible to get the date of last occurance of an event?

<script>

var event = new kendo.data.SchedulerEvent({

id: 1,

start: new Date("2013/9/2 12:00"),

end: new Date("2013/9/2 12:30"),

title: "Lunch",

recurrenceRule: "FREQ=MONTHLY;COUNT=2;BYMONTHDAY=15"

});

</script>

How can I determine the last date of this recurring event?

-Martin

Scheduler

answered on 08 Nov 2013

1 answer

275 views

Simple read.Action MVC json not working

Not sure why there is no data being pulled into the chart.
I used fiddler to test the Json call and verified that the data is there
However, when running these code through the debugger, the break point never stop at the DrillDownChart_Read ActionResult.

Controller:
[HttpGet]
public ActionResult DrillDownChart_Read()
{
List<IDrillDownChart> myResultList = new List<IDrillDownChart>();
List<int> myIntList = new List<int>();
myIntList.Add(1);
myIntList.Add(2);
myResultList.Add(new DrillDownChartCategoryWithData("x", 20, 25, 1, "webvstf", "Engineering Systems", myIntList));
myResultList.Add(new DrillDownChartCategoryWithData("y", 30, 25, 1, "webvstf", "Engineering Systems", myIntList));

return Json(myResultList, JsonRequestBehavior.AllowGet);
}

View:
@(Html.Kendo().Chart<IDrillDownChart>()
.Name("chart")
.Title("Drill Down Chart")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("DrillDownChart_Read", "ProjectReports"))
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.Series(series => {
series.Bar(d => d.PercentComplete)
.Name("Percent Complete")
.Color("#A7A7A7");
})
.CategoryAxis(axis => axis
.Categories(model => model.DisplayTitle)
)

)

Chart

answered on 08 Nov 2013