Telerik Forums
UI for ASP.NET MVC Forum
1 answer
361 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
127 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
459 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
553 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
158 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
99 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
154 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
597 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
4 answers
108 views

Hi,  I was wondering if anyone else has this issue.  I have Kendo 2016.3.914 installed and upgraded to Jquery 3.1.1 from 2.2.4 and it seems to break my gird foreign key.  When I click in it a box appears and then disappears, but no dropdown etc.  I rolled back to 2.2.4 and all was fine.

I don't really want to have to roll back my jquery version - has anyone else come across this?

Dawn
Top achievements
Rank 1
 answered on 21 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
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?