Telerik Forums
UI for ASP.NET MVC Forum
3 answers
707 views

I am loading the content of an MVC Window

@(Html.Kendo().Window()
.Name(modalWindowName)
.Visible(false)
.Title("Loading...")
.Modal(true)
.Actions(actions => actions
    .Maximize()
    .Close()    
)
.Scrollable(true)
.Pinned(true)
//.Draggable(true)
.Resizable()
.Animation(false)
.Height(600)
.Width(navbarWindowWidth)
.Events(events => events.Refresh(onWindowRefresh))
)

 

via url, so I can re-use the window

var navbarWindow = $("#@(modalWindowName)");
var navbarWindowData = navbarWindow.data("kendoWindow");

 

var  navbarWindowURL = "@Html.Raw(@Url.Action("actionName", "controllerName")

navbarWindowData.refresh({
    url: navbarWindowURL
}).center();

 

But, I'm having trouble coming up with a way to put a toolbar or group of buttons in a footer at the bottom of the window. 

Below is a brief example of what the view from the URL (navbarWindowURL) will look like. You can I created a panel with a footer and such, but if the body of the panel is very large I have to scroll through the window to get to the footer, which is not a very pleasing UI for the end-user. Is there some way I can create a footer that will always stick to the bottom of the window or something so the end-user can always see the button? It also has to be able to re-adjust if the size of the window changes.

@using (Ajax.BeginForm("Update", "Settings", FormMethod.Post,
        new AjaxOptions
        {
            HttpMethod = "POST",
            OnBegin = "saving();",
            OnSuccess = "saved();",
            OnFailure = "failed();",
 
        }
        ))
{
 
 
 
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row" id="settingsResults"></div>
        </div>
        <div class="panel-body">
            <div>
                @(Html.EditorFor(m => Model.Settings))
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSave" class="btn btn-primary" type="submit">Save</button>
        </div>
    </div>
}

Are there any examples of windows with a toolbar or footer that contains buttons?

Veselin Tsvetanov
Telerik team
 answered on 24 Feb 2017
1 answer
375 views

Hello,

we use Kendo MVC Grid to display some documents. We have column for actions on document with dropdown of actions. Code of the column looks like this:

columns.Bound(p => p.ID).ClientTemplate(Html.Kendo().DropDownList().DataTextField("Text")
            .Events(e => e.Change("actionsDDLChange").Open("actionsDDLDataBound"))
            .HtmlAttributes(new { docID = "\\#=ID\\#", @lock = "\\#=Lock\\#", documentName = "\\#=DocumentName\\#", lockedBy = "\\#=ChangedBy\\#" })
            .DataValueField("Value").Name("ddl\\#=ID\\#").BindTo(ViewBag.DocActionsDDL)
            .ToClientTemplate().ToString()).Title("Actions").HtmlAttributes(new { @class = "templateCell" }).Sortable(false).Filterable(false);

 

Everything works fine in normal Grid. Then we tried to use the same code to be ClientDetailTemplate of another Grid and it doesn't work. We had to change this column to be like:

columns.Bound(p => p.ID).ClientTemplate("<button class=\"k-button\" >Download</button>"

This is just part of new code with buttons for other actions following. In other words, we had to lose .DropDownList approach. We get "Script error" in appgui.js if we try dropdown approach.

Is there a way to make this work with .DropDownList as tempalte for column, because we want this grid to look the same? We will probably want to reuse it as ClientDetailTemplate in other grids as well, or have Tab control as ClientDetailTemplate with this grid for documents in one of tabs, so we would use it as partial view. But we want to solve this problem first and we are out of ideas.

 

Konstantin Dikov
Telerik team
 answered on 24 Feb 2017
2 answers
131 views

I have a button like that 

<button class="k-button" id="button" type="button">Foo</button>

<script>$("#button").kendoButton({ icon: redo});</script>

I choose icons from the link: http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web.

When I use redo, funnel, It is okay there is no problem but I try to use "arrow-60-right" (is also from the list which can be found in the above link), "arrow-chevron-up" is coming instead of  "arrow-60-right". 

Is there anyone who knows why it is happening?

Deniz Can
Top achievements
Rank 1
 answered on 24 Feb 2017
2 answers
465 views

HI

The wrong description in online document.

jquery eq(index), the index is 0-based, so the comment 'displays "Jane Doe"' was WRONG : 

dataItem
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

EXAMPLE - GET THE DATA ITEM TO WHICH THE FIRST TABLE ROW IS BOUND

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
var data = grid.dataItem("tr:eq(1)");
console.log(data.name); // displays "Jane Doe"  <-------------------- the comment was WRONG

Best regards

Chris

 


Alex Hajigeorgieva
Telerik team
 answered on 23 Feb 2017
4 answers
559 views

 

Hi,

I am using search option in kendo ui grid. I have datetime, int, nullable fields. How do i search grid data with different data types.

Help on this is much appreciated.

Please find the attached image for grid details which i have.

Sample code on this will be very useful.

Regards,

Kiran

Stefan
Telerik team
 answered on 23 Feb 2017
1 answer
6.3K+ views

Hi,

I'm using a client row template to style my grid which is created as follows:

 

@(Html.Kendo().Grid<TEAMSV2.Models.JobLogNoteDTO>()
    .Name("jobLogGrid")
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read =>
        {
            read.Action("GetJobLogNotes", "TeamsV2").Type(HttpVerbs.Post);
        })
        .Sort(sort => sort.Add("DateCreated").Descending())
        .PageSize(10)
    )
    .Columns(columns =>
    {
        columns.Bound(note => note.ItemNo).Title("Ref.").Width(60);
        columns.Bound(note => note.DateCreated).Title("Note Recorded").Width(110);
        columns.Bound(note => note.NoteHtml).Title("Description").Encoded(false);
        columns.Bound(note => note.Employee).Title("Employee").Width(110);
    })
    .HtmlAttributes(new { style = "max-height:496px; height:496px;" })
    .Scrollable()
    .Sortable()
    .Pageable()
    .ClientRowTemplate(Html.Partial("JobLog/JobLogTab/JobLogNotesGridTemplate").ToHtmlString())
    .Events(e => e.DataBound("JobLogNotesDatabound"))
)

The row template is as follows:

<tr>
    <td>
        <a href="/TeamsV2/Search?search=#:data.ItemNo#" style="text-decoration:underline;">#:data.ItemNo#</a>
    </td>
    <td>
        #: kendo.toString(data.DateCreated, 'd MMM yyyy HH:mm')#
    </td>
    <td>
        #: data.NoteHtml#
    </td>
    <td>
        #: data.Employee#
        <br />
        <div class="JobLogEmployeePhoto" data-id="#: data.EmployeeID#">
        </div>
    </td>
</tr>

The value of "data.NoteHtml" contains "/n" for line breaks as it was inserted via a TextArea.  These /n's are not showing as line breaks in the grid.  I've tried replacing them with HTML so the data contains <br> tags instead but they still do not show.

 My main question is this:  If I modify the data so that the string acxtually contains HTML markup for <BR> or <BR></BR> or <BR /> how can I get the client row template to treat this as HTML instead of just as a string.

 I've set Encoded(false) for the column but still no joy.

Thanks,

Mark.

 

 

Stefan
Telerik team
 answered on 23 Feb 2017
2 answers
161 views

Hi there, 

Is there any difference globalisation/culture changes between the following versions: Kendo UI Complete v2013.1.319 and  Kendo UI v2017.1.118 ?

After upgrading I started getting the error: "  The field (insert field name) must be a date."

Do I need to upgrade the JQuery Version? Currently using v1.9.1

I'm setting the culture the same way. Using a script inside the page: 

kendo.culture("@(((CultureInfo)Session["culture"]).Name)");

 

The code for creating the DatePicker hasn't changed: 

@(Html.Kendo().DatePickerFor(model => model.DateOfTesting)
    .Name("DateOfTesting")
    .Format("dd MMM yyyy")
    .Culture(((CultureInfo)Session["Culture"]).Name)
    .HtmlAttributes(new { style = "width:100%" })
 )
@Html.ValidationMessageFor(model => model.DateOfTesting)

 

The scripts on my page are the same: 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

 

The scripts on the Layout Page are the same

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.en.min.js")" type="text/javascript"></script>
 
@*Loading Multiple culture files in the Layout Page*@
<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.en-US.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.en-GB.min.js")" type="text/javascript"></script>
@*and so on for each culture*@
<script src="@Url.Content("~/Scripts/Cultures/kendo.culture.CULTURE .min.js")" type="text/javascript"></script>

Note: The last line is just an example

 

If I revert to the previous version ir works properly, if I upgrade then it doesn't with the exact same code.

Any idea?

Thank you

Stefan
Telerik team
 answered on 23 Feb 2017
2 answers
104 views

Hi,

 

It would be possible to use the Scheduler control like something similar to the ones from the attached files? The pictures are taken from this link: https://forecastapp.com/747070/schedule .

Basicly we would need two Scehuler controls, one with Projects(the data to be grouped in projects and the children of the projects will be the employees) and one with an overview of the Team (the data will be grouped in employees, and the children of the employees will be their projects).

 

Thanks!

Vladimir Iliev
Telerik team
 answered on 23 Feb 2017
3 answers
163 views

Hi there,

I would like to do a vertical grouping by meeting room, and then by employee. I saw a lot of examples, where each room contains all employees.
I have to achieved something slightly different: For each room, I have to list the employees that have an Appointment for this room. For instance:

Room 1
 Employee A
 Employee B
Room 2
 Employee A
 Employee C
 Employee D
Room3
  Employee F

Is that possible?
Currently, it seems that the Scheduler control can only create a "cross product" of the room and employee.

Cheers
Nicolas

Jérémy
Top achievements
Rank 1
 answered on 22 Feb 2017
1 answer
605 views

to be able to get the desired menu for my css, i need the following output of menu:

 

01.<ul id="leftMenu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" index="0"role="menubar"style="display: block;">
02.    <li id="HeaderMain" style="display: inline-block;" class="k-item k-state-default k-first selectedMenu" role="menuitem">
03.        <div class="mnuLiCont">
04.            <div class="mnuHomeIcon"></div>
05.            <div class="mnuTxt">Home</div>
06.        </div>
07.    </li>
08.    <li id="HeaderDashBoard" style="display: inline-block;" class="k-item k-state-default"role="menuitem">
09.        <div class="mnuLiCont">
10.            <div class="mnuDashBoardIcon"></div>
11.            <div class="mnuTxt">Dashboard</div>
12.        </div>
13.    </li>
14.</ul>


This is the code im doing to be able to create this menu:

01.@(Html.Kendo().Menu()
02.          .Name("leftMenu")
03.          .Items(items =>
04.          {
05.              items.Add().HtmlAttributes(new { @id = "HeaderMain" , @class = "selectedMenu",@style ="display: inline-block;"});
06.              items.Add().HtmlAttributes(new { @id = "HeaderDashboard", @style = "display: inline-block;" });
07.              items.Add().HtmlAttributes(new { @id = "HeaderExtra", @style = "display: none;" });
08.          })
09.          .HtmlAttributes(new {@style = "display: block"})
10.  
11.        )


1.(document)
2.       .ready(function () {
3.           $("#HeaderMain").append("<div class='mnuLiCont'><div class='mnuHomeIcon'></div><div class='mnuTxt'>Home</div></div>");
4.           $("#HeaderDashboard").append("<div class='mnuLiCont'><div class='mnuDashBoardIcon'></div><div class='mnuTxt'>Dashboard<v></div>");
5.             
6. 
7.       });


And in the next code you can see the undesired SPAN in each menu item, which i need to get rid of.

01.<ul id="leftMenu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" index="0"e="menubar"style="display: block;">
02.    <li id="HeaderMain" style="display: inline-block;" class="k-item k-state-default k-first selectedMenu" role="menuitem">
03.        <span class="k-link"></span>
04.        <div class="mnuLiCont">
05.            <div class="mnuHomeIcon"></div>
06.            <div class="mnuTxt">Home</div>
07.        </div>
08.    </li>
09.    <li id="HeaderDashBoard" style="display: inline-block;" class="k-item k-state-default"role="menuitem">
10.        <span class="k-link"></span>
11.        <div class="mnuLiCont">
12.            <div class="mnuDashBoardIcon"></div>
13.            <div class="mnuTxt">Dashboard</div>
14.        </div>
15.    </li>
16.</ul>

 

Ivan Danchev
Telerik team
 answered on 22 Feb 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?