Telerik Forums
UI for ASP.NET MVC Forum
1 answer
457 views

I want to create my own action buttons for each row in the grid using gylypicon images.  I've used previous posts in this forum as a guideline for what to do,but the solutions offered (here and here)  appear to be no longer supported.  I can get the custom buttons to appear without any issue, but there's no icon (when a name value is specified), nor does there seem to be a way to just show an icon (we're using Bootstrap gylphicons and want to use them for the action buttons as well).

Here's how I'm creating the rows in the grid (I have additional command buttons, but they're the same as that below):

01.columns: [
02.          { field: "id", title: "Id", hidden: false },
03.          { field: "parentId", hidden: true },
04.          { field: "Title", hidden: false },
05.          { field: "Body", hidden: false },
06.          { field: "NoteCreator", hidden: true },
07.          { field: "CreatedBy", title: "Created By", hidden: false },
08.          { field: "CreatedDate", title: "Created On", hidden: false },
09.          { field: "Replies", hidden: true },
10.          { field: "IsRoot", hidden: true },
11.          { field: "Token", hidden: true },
12.          {
13.              field: "Actions", hidden: false,
14.              command: [{
15.                  name: " ",
16.                  click: function (e) {
17.                      // e.target is the DOM element representing the button
18.                      var tr = $(e.target).closest("tr");
19.                      // get the data bound to the current table row
20.                      var data = this.dataItem(tr);
21.                      alert("View for id " + data.id + ".");
22.                  }
23.              }]
24.        ],

The first file (action-buttons-no-icons.png) shows what it looks like; the second file (action-buttons-icons-only.png) shows what I *want* it to look like.

Venelin
Telerik team
 answered on 21 Mar 2016
1 answer
80 views

I have this code for an autocomplete for possible recomendations, but when I want type a custom name, the plugin delete my characteres

 

@(Html.Kendo().MultiSelect()
          .Name("EmailInvited")
          .AutoClose(false)
          .Placeholder("Write the name or email")
          .BindTo(Model.RecomendationList)
          .DataTextField("Invited")
          .DataValueField("Email")
    )

Luis
Top achievements
Rank 1
 answered on 18 Mar 2016
5 answers
415 views

I want to create a bound form with next/prev/first/last/delete/new buttons.

Is there any sample code or demos out there on how to implement this? Even better would be samples that also show a linked subgrid, a la invoice details/Line Items.

Thanks,

Brad

Vessy
Telerik team
 answered on 18 Mar 2016
3 answers
475 views

If the grid column re-size is enabled and the user re-sizes one or more column in the grid. Is there any way to restore those column sizes automatically later? I've found several posts on the subject but none seem to work.

The last attempt was made using the "element" object to restore the grid column sizes:

$("#grid-id .k-grid-header-wrap").find("colgroup col").eq(xx).width(yy);
$("#grid-id .k-grid-content").find("colgroup col").eq(xx).width(yy);

Maria Ilieva
Telerik team
 answered on 18 Mar 2016
2 answers
735 views

Hello,

I have a tooltip like so:

.Tooltip(tt => tt.Visible(true).Template("#= kendo.format('{0:p}', percentage)#")))

This is great and gives me the percentage of the values in the charts fine...EXCEPT, I would like the percentages to have no decimal points, i.e: 23% instead of 22.80% for example. 

Is there any way Telerik can do that for me?


IF NOT:
Can I at least get 22.8%

 

Thanks.

IHS
Top achievements
Rank 1
 answered on 18 Mar 2016
2 answers
1.2K+ views

 

Here is my code:

 @(Html.Kendo().Grid<TelerikMvcApp1.Models.UserViewModel>()
                .Name("grid")
                .Columns(columns =>
                {

                     columns.Bound(p => p.FirstName)
                    .Filterable(f => f
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .StartsWith("Starts With")
                                .EndsWith("Ends With")
                                .IsEqualTo("Is Equal To")
                                .IsNotEqualTo("Is Not Equal To")
                            )
                        )
                    )
                    .Title("First Name")
                    .Width(200);

                    columns.Bound(p => p.LastName)
                    .Filterable(f => f
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .StartsWith("Starts With")
                                .EndsWith("Ends With")
                                .IsEqualTo("Is Equal To")
                                .IsNotEqualTo("Is Not Equal To")
                            )
                        )
                    )
                    .Title("Last Name")
                    .Width(200);

                    columns.Bound(p => p.Email)
                    .Filterable(f => f
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .StartsWith("Starts With")
                                .EndsWith("Ends With")
                                .IsEqualTo("Is Equal To")
                                .IsNotEqualTo("Is Not Equal To")
                            )
                        )
                    )
                    .Title("Email ID")
                    .Width(200);

                    columns.Bound(p => p.Status)
                    .Title("Status")
                    .Filterable(ftb => ftb
                            .Cell(c => c
                                .ShowOperators(false)
                            )
                    )
                    .Width(200);


                    columns.Bound(p => p.LastAccess)
                    .Filterable(true)
                    .Title("Last Access")
                    .Format("{0:MM/dd/yyyy}")
                    .Width(200);
                })
                .AutoBind(true)
                .Pageable(pageable => pageable
                   .PageSizes(true)
                )
                .Selectable(selectable => selectable
                   .Mode(GridSelectionMode.Multiple)
                   .Type(GridSelectionType.Row)
                )
                .Sortable(sortable => sortable
                    .AllowUnsort(true)
                    .SortMode(GridSortMode.SingleColumn))
                .Scrollable(a => a.Height(100))
                .Filterable(f => f
                    .Mode(GridFilterMode.Row)
                    .Extra(false)
                )
                .Reorderable(reorder => reorder.Columns(true))
                .Resizable(resize => resize.Columns(true))
                .HtmlAttributes(new { style = "height:720px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(25)
                    .Read(read => read.Action("Details_Read", "Grid"))
                    )
            )

 

 

 

In the blocked letter lines is the part where i cannot customize the filter. So, please anyone tell me how to create a custom filter when using .Mode(GridFilterMode.Row) and i have tried using template within the cell(in 'status' column) to create a drop down list, but it is also not working. There are no good examples on this custom filter in MVC razor syntax. In this custom filter i want to keep two options, so please anyone tell me how can i do that!

Ankit
Top achievements
Rank 1
 answered on 18 Mar 2016
1 answer
65 views

Hi,

Can we have any sample for Bar chart with Scatter Line...

Iliana Dyankova
Telerik team
 answered on 17 Mar 2016
1 answer
95 views

I define a batch editing grid with the wrapper ASP.NET MVC, exactly like the demo : http://demos.telerik.com/aspnet-mvc/grid/editing

But the result is different. Fields that appear when editing a cell are not kendo widget.

By example, the unit price field is a simple input tag with the class "text-box". It's not a kendo widget numerictextbox.

 

I make a sample project with exactly the same file editing.cshtml.

Dimiter Topalov
Telerik team
 answered on 17 Mar 2016
1 answer
231 views

I have a form of 3 grids.  One is an editable (Incell) form, one is a standard grid with ajax data binding, and the last one is a grid that has a droppable area from which rows from the second grid are dropped from.  After form submission, the first grid works fine, but the other two fail - the drag/drop stops working and the ajax data binding fails as well.  It appears that after the form is being replaced (InsertionMode = InsertionMode.Replace), the grid is not recognized in the document.ready javascript function.

Ajax Form syntax:
@using (Ajax.BeginForm("AddCustomer","CustomerMaintenance", new AjaxOptions()
{
HttpMethod = "Post",
UpdateTargetId = "modal-content",
OnSuccess = "OnCustomerAddSuccess",
OnFailure = "OnCustomerAddFailure",
OnBegin = "return CompileStuff();",
OnComplete = "$('.modal-dialog').hideLoading();",
InsertionMode = InsertionMode.Replace
}, new {@id = "AddCustomerForm"}))

Second grid:
@(Html.Kendo().Grid<UserCustomerItem>()
.Name("userCustomerListGrid")
.Scrollable(scoll => scoll.Enabled(true))
.HtmlAttributes(new { style = "height:100%;" })
.Columns(columns =>
{
columns.Bound(uc => uc.UserId).Hidden(true);
columns.Bound(uc => uc.FullName);
})
.DataSource(ds => ds
.Ajax()
.PageSize(100)
.Read(r => r.Action("GetUserListForDataSource", "CustomerMaintenance").Data("getSelectedDataSourceId"))
)
)

Third Grid:
@(Html.Kendo().Grid(Model.ExplicitUserCustomerItemList)
.Name("selectedUserCustomerListGrid")
.Scrollable(scoll => scoll.Enabled(true))
.HtmlAttributes(new { style = "height:100%;" })
.Columns(columns =>
{
columns.Bound(uc => uc.UserId).Hidden(true).ClientTemplate("<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].UserId' value='#=UserId#' />");
columns.Bound(uc => uc.FullName).ClientTemplate("<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].FirstName' value='#=FirstName#' /> " +
"<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].LastName' value='#=LastName#' />" +
"#=FullName#"); ;
columns.Command(command => command.Destroy()).Width(100);
})
.Events(e => e.Remove("onRemoveSelectedUserCustomer"))
.DataSource(ds => ds
.Ajax()
.Destroy("DestroyDummy", "CustomerMaintenance")
.Model(model =>
{
model.Id(p => p.UserId);
model.Field(p => p.FirstName);
model.Field(p => p.LastName);
model.Field(p => p.FullName);
})
.ServerOperation(false)
)
)

 

Document Ready Function:
$(document).ready(function () {
userCustomerListGrid = $("#userCustomerListGrid").data("kendoGrid");
selectedUserCustomerListGrid = $("#selectedUserCustomerListGrid").data("kendoGrid");
$('#DataSourceId').change(function () {
userCustomerListGrid.dataSource.read();
selectedUserCustomerListGrid.dataSource.data([]);
selectedUserCustomerListGrid.dataSource.read();

....
}
}

Per another forum post, I made the userCustomerListGrid and the selectedUserCustomerListGrid global vars.
After form submission (inconsistent but most of the time), those two variables are undefined. 
Do you know why this would be?
Thanks in advance.

Daniel
Telerik team
 answered on 17 Mar 2016
3 answers
306 views

I am trying to create a grid that has 5 static parent categories that when expanded will use AJAX to show the data within those categories. Since the categories are static I just create a model, with a Name and Type property, in the controller action and bind them directly to the grid

@(Html.Kendo().Grid(Model.Categories)
   .Name("CategoryGrid")
    .Columns(c =>
    {
        c.Bound(b => b.Name);
        c.Bound(b => b.Type);
    })
    .ClientDetailTemplateId("result-template")
)
 
<script id="result-template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ChildClass>()
        .Name("#=Name#_child")
        .Columns(c =>
        {
            c.Bound(b => b.ID);
            c.Bound(b => b.Description);
        })
        .DataSource(ds => ds
            .Ajax()
            .PageSize(20)
            .Read(r => r.Action("ChildSearch", "Search", new { Type = "#=Type#" }))
            )
        .Pageable()
        .Selectable()
        .ToClientTemplateId()
    )
</script>

I unfortunately can't share a screen shot as my dev box doesn't have an internet connection today, but the result is all the columns of the parent grid are offset to the left by 1.

The values for the Name column and an empty header appears in the first column.

The values for Type and the header "Name" appears in the second column.

A blank view, meaning the row styles cut off at the right end of the 2nd column, and the header "Type" appear in the third column.

So my question would be: Why is this happening?

 

Thanks

Nikolay Rusev
Telerik team
 answered on 16 Mar 2016
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
DateTimePicker
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?