Telerik Forums
UI for ASP.NET MVC Forum
4 answers
469 views
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
Matt Miller
Top achievements
Rank 1
 answered on 12 Nov 2013
3 answers
678 views
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.
Petur Subev
Telerik team
 answered on 12 Nov 2013
5 answers
549 views
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>
 
<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>
 
<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
Alexander Popov
Telerik team
 answered on 12 Nov 2013
0 answers
215 views
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.
Jitendra
Top achievements
Rank 1
 asked on 12 Nov 2013
6 answers
628 views
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();
    };
Dimiter Madjarov
Telerik team
 answered on 12 Nov 2013
1 answer
188 views
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!
Rosen
Telerik team
 answered on 12 Nov 2013
2 answers
121 views
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" />








Tim
Top achievements
Rank 1
 answered on 11 Nov 2013
1 answer
96 views
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.
Dimo
Telerik team
 answered on 11 Nov 2013
1 answer
61 views

<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
Georgi Krustev
Telerik team
 answered on 08 Nov 2013
1 answer
267 views
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)
)
 
)
Petur Subev
Telerik team
 answered on 08 Nov 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?