Telerik Forums
UI for ASP.NET MVC Forum
5 answers
671 views

I have created a grid to show a list of employees. The grid columns are filterable and I have set an initial IsLeaver filter on the data source to only show non-leavers. The problem I have is the suggestion operator is not initially showing all the results I would expect.

For example "LocationA" does not show up as a suggestion when initially trying to type this into the location filter. However, when I press enter their are lots of rows with "LocationA" that show up in the grid.  I am using "contains" for both the operator and suggestion operator so they should be the same.

If I clear the IsLeaver filter in the browser and then set it back to the same value then "LocationA" will start appearing in the suggestions operator.

If I do not set an initial IsLeaver filter and just set the filter in the browser then "LocationA" correctly appears in the suggestions operator.

@(Html.Kendo().Grid(Model)
 .Name("EmployeeDataGrid")
 .Columns(columns =>
 {
    columns.Bound(p => p.ID).Filterable(f => f.Cell(c => c.ShowOperators(false).Operator("contains").SuggestionOperator(FilterType.Contains)));
    columns.Bound(p => p.Name).Filterable(f => f.Cell(c => c.ShowOperators(false).Operator("contains").SuggestionOperator(FilterType.Contains)));
    columns.Bound(p => p.Location).Filterable(f => f.Cell(c => c.ShowOperators(false).Operatord("contains").SuggestionOperator(FilterType.Contains)));
    columns.Bound(p => p.IsLeaver);
})
.Pageable()
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .Filter(f => f.Add(p => p.IsLeaver).IsEqualTo(false))))

 

Any suggestions as to why "LocationA" is not initially showing up in suggestion operator when there are definitely rows for "LocationA" that are not leavers. I can see these rows when I apply the filter so I can't understand why "LocationA" does not appear in the suggestion operator. 

Andrew
Top achievements
Rank 1
 answered on 26 Apr 2021
1 answer
632 views

The code below is within a poup editor when user click the EDIT button in a row of a grid.

I want to handle when autocomplete field changed.

I added .Events(e => e.Change("autocomplete_change")) in the wrapper and add a javascipt function autocomplete_change() after the wrapper 

when run it and click one of the edit button in a grid row, I got autocomplete_change is not defined error and  the popup will show under the grid without any data.

Is there anyone could help me to let me know how to fix it and  what's going on.

thank you very much.

@(Html.Kendo().AutoCompleteFor(model => model.AnswerA)
                .Name("AnswerA")
                .DataTextField("Answer")
                .Placeholder("Type a answer")
                .Filter("Contains")
                .MinLength(5)
                .HtmlAttributes(new { style = "width:100%" })
                .Height(520)
                .Events(e => e.Change("autocomplete_change"))
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("ResponseRead", "Method")
                            .Data("onAnswerAData");
                    })
                    .ServerFiltering(true);
                })
              
            )
            <script>
                 function autocomplete_change() {
                       alter("call ShowAddingAnswerPrompt");
                    }
            </script>

Ivan Danchev
Telerik team
 answered on 26 Apr 2021
4 answers
1.1K+ views

Hi,

How can I get a label field in the Form ? 

Is it supported out of the box ? Or should I use a span for this ? Or a custom template ?

Martin

 

Frans
Top achievements
Rank 1
Veteran
Iron
 answered on 26 Apr 2021
10 answers
962 views
Hello and good day,

please help with the following problem: there is an ASP.Net MVC grid in use where one column is an enum column. Furthermore, the grid is filtered using row-filter. Now the default behaviour is that the combobox shows the discrete enum values. So far the expected behaviour. But this unfortunately does not allow to display end-user friendly strings, to supress specific values and certainly not to display localised strings. So the questions:

- how can localised values be set at runtime for the individual enum members in row-filter dropdown instead of the simple .ToString() values?
- how are individual enum values suppressed for row-filter? (not every value should be displayed)

To display localized values within the columns cells is no problem due to .ClientTemplate. Thats fair easy. Thanks!

Unfortunately, the documentation at https://demos.telerik.com/aspnet-mvc/grid/filter-row is rather thin and various API links from which one hoped for enlightenment lead to 404-nirvana: 

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnFilterableCellSettingsBuilder#templatesystemfuncsystemobjectsystemobject
https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnFilterableCellSettingsBuilder#templatesystemstring

These are listed as links on https://docs.telerik.com/aspnet-mvc/api/grid and several others are dead, too.


I would be happy if you could provide me with some sufficient sample code that solves the two problems mentioned above for a grid created by @(Html.Kendo().Grid... within a .cshtml file.
Thank you very much!
Nils
Top achievements
Rank 1
Veteran
Iron
 answered on 26 Apr 2021
1 answer
1.3K+ views

Hi Telerik,

I was wondering how I can add custom buttons (serverside code) in the toolbar, with both buttons on the left side as right side (I used to do that with a cuistom class, but that doesnt work anymore since the Telerik update).

For example left a 'Button1' and 'Button2', and right a 'Add' button, and a 'Export Button'.

best regards,

Martin

 

Eyup
Telerik team
 answered on 23 Apr 2021
1 answer
195 views
Is it possible to bind a scroll view to an Ajax data source?
Mihaela
Telerik team
 answered on 23 Apr 2021
6 answers
10.6K+ views

Good afternoon, I am not able to make my Html.Kendo (). DatePicker () stay with the date format in "dd / MM / yyyy"

 

            @(Html.Kendo().DatePicker()
                                  .Name("DataAdmissao")
                                  .Culture("pt-BR")
                                  .Value(ViewBag.Dataadmissao)
                                  .Format("dd/MM/yyyy")
                                  .HtmlAttributes(new { style = "width:220px;" }))

        </div>

he returns me the following message and does not show the date  " Index:34 The specified value "02/05/2019" does not conform to the required format, "yyyy-MM-dd" "

 

 

 

Tsvetomir
Telerik team
 answered on 23 Apr 2021
3 answers
8.4K+ views

I've been trying to accomplish this following several forum threads and this guide: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/templating/editor-templates but so far I can't make it work. I don't know what I'm doing wrong, since if I use my dropdown list outside the grid it works normally. I can't seem to understand how to bind the dropdown list to a grid column.

This is my grid:
@model IEnumerable<RECON.DAL.Models.Traducciones>
@(Html.Kendo().Grid(Model)
        .Name("Traducciones")
        .Columns(columns =>
        {
            columns.Bound(foo => foo.OrigenId).Title(Global.Origen).EditorTemplateName("_FiltrosTraducciones");
            columns.Bound(foo => foo.Campo).Title(Global.Campo);
            columns.Bound(foo => foo.ValorOrigen).Title(Global.ValorOrigen);
            columns.Bound(foo => foo.ValorDestino).Title(Global.ValorDestino);
            columns.Command(commands =>
            {
                commands.Edit().Text(" ").UpdateText(" ").CancelText(" ");
                commands.Destroy().Text(" ");
            }).Title("Acciones").Width(200);
        })
        .ToolBar(toolbar => toolbar.Create().Text("Nuevo"))
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource =>
            dataSource.Ajax()
            .Model(model =>
            {
                model.Id(m => m.Id);
            })
            .Create(create => create.Action("Create", "Traduccion"))
            .Read(read => read.Action("Read", "Traduccion"))
            .Update(update => update.Action("Edit", "Traduccion"))
            .Destroy(destroy => destroy.Action("Delete", "Traduccion"))
        ))

 

This is my partial view with the dropdown list:
@model IEnumerable<RECON.DAL.ViewModels.TraduccionesOrigenes>

@(Html.Kendo().DropDownList()
        //.Name("origenes")
        .HtmlAttributes(new { style = "width: 250px" })
        .DataTextField("Descripcion")
        .DataValueField("Id")
        .DataSource(source => source.Read(read => read.Action("GetTraduccionesOrigenes", "Traduccion")))
)

I fill the dropdown list with a stored procedure and outside the grid it works fine.

Now, I don't know if I have to use the EditorTemplateName in the column I want the dropdown list or not, I'd just would like a step by step how to do it so that I can achieve what I want.

Thanks in advance.

Tsvetomir
Telerik team
 answered on 22 Apr 2021
1 answer
159 views

Hey all I am very new to Kendo UI but am trying to remake the layout of my companies listbox over to treeview so that I will be able to categorize the items coming in from the api call.

The current code is this:

01.@(Html.Kendo().ListBox()
02.        .Name("lbAvailableSocialMediaSources")
03.        .Toolbar(tb =>
04.        {
05.            tb.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
06.            tb.Tools(tools => tools
07.                .TransferTo()
08.                .TransferFrom()
09.                .TransferAllTo()
10.                .TransferAllFrom());
11.        })
12.        .ConnectWith("Sources")
13.        .HtmlAttributes(new {style="width:44%"})
14.        .Draggable(true)
15.        .DropSources("Sources")
16.        .DataSource(ds => ds.Read(r => r.Url("/api/sources" + (!string.IsNullOrWhiteSpace(Model.Providers) ? "?providerId="+ Model.Providers :"")).Type(HttpVerbs.Get)))
17.        .DataTextField("Name")
18.        .DataValueField("Id")
19.        .Events(e=>e.DataBound("sourcesViewModel.dataBound").Add("sourcesViewModel.add")))
20.    @(Html.Kendo().ListBox()
21.        .Name("Sources")
22.        .HtmlAttributes(new { style = "width:44%" })
23.        .DataTextField("Name")
24.        .DataValueField("Id")
25.        .Draggable(true)
26.        .DropSources("lbAvailableSocialMediaSources")
27.        .BindTo(new List<SocialMediaSource>())
28.        .Selectable(ListBoxSelectable.Multiple))

The above produces the attached image screenshot.95.png.

All that works just fine. I am able to drag over any item and also use the buttons to do the same.

Now here is the problem and where I am currently stuck at not knowing how to go about doing it.

I am wanting to use the treeview with checkboxes so that i am able to put items that are currenbtly in the list into items under their category name.

The api json looks like this:

{
    "meta": {
        "total_results": 193,
        "offset": 0,
        "total_pages": 1
    },
    "object_list": [{
            "name": "GitHubCommits",
            "cat":"Git Hub",
            "guid": "6b69875a84017a3704dec1b3843f761a41c8044d654bf3f0450ddb56fa3ff9fa",
            "sub_types": [{
                    "name": "Keyword",
                    "key": "keyword"
                }
            ]
        }, {
            "name": "GitLab",
            "cat":"Git Hub"
            "guid": "1ff8683f7579baa702fafiuiurehgyu87t5ius3tiiud2de6e17cc1bea3e8e0db647b9c9",
            "sub_types": [{
                    "name": "Keyword",
                    "key": "keyword"
                }
            ]
        }, {
            "name": "facebook",
            "cat":"Social Media"
            "guid": "1ff8683f7579baa702faf987654fho865fks3tiiud2de6e17cc1bea3e8e0db647b9c9",
            "sub_types": [{
                    "name": "Keyword",
                    "key": "keyword"
                }
            ]
        }, {
       ....ETC....

Taken the json above I am having a hard time trying to produce a treeview with that kind of data structure. Most all the examples I've seen for the treeview have all been static adding it to the treeview or dynamic with a structure that I am not able to put my json data into:
root.Add().Text("Kendo UI Project").Id("2")
  .Expanded(true)
  .SpriteCssClasses("folder")
  .Items(project =>
{
 project.Add().Text("about.html").Id("3").SpriteCssClasses("html");
 project.Add().Text("index.html").Id("4").SpriteCssClasses("html");
 project.Add().Text("logo.png").Id("5").SpriteCssClasses("image");
});
 
root.Add().Text("New Web Site").Id("6")
 .Expanded(true)
 .SpriteCssClasses("folder")
 .Items(item =>
 {
  item.Add().Text("mockup.jpg").Id("7").SpriteCssClasses("image");
  item.Add().Text("Research.pdf").Id("8").SpriteCssClasses("pdf");
 });
 ...ETC...


and also

@(Html.Kendo().TreeView()
.Name("treeview-telerik")
.TemplateId("treeview")
.Checkboxes(true)
.DragAndDrop(true)
.Items(treeview =>
{
 treeview.Add().Text("My Documents")
 .Expanded(true)
 .Items(root =>
 {
   root.Add().Text("New Web Site")
   .Expanded(true)
   .Items(images =>
   {
     images.Add().Text("mockup.pdf");
     images.Add().Text("Research.pdf");
   });
    ..ETC..


I don't know how you would go about looping it this way using my json data: 

treeview.add().Text("Categories")
   .Expanded(True)
   .Items(
    root.add().Text("Git Hub")=> {
        images.Add().Text("GitHubCommits");
        images.Add().Text("GitLab");
    });
      root.add().Text("Social Networks")=> {
        images.Add().Text("facebook");
      });
     ...ETC...

 What I am looking to accomplish is seen here https://demos.telerik.com/aspnet-mvc/treeview/checkboxes but again, I do not know how to go about making the needed structure with the json I have to work with so that it knows what data to pull.

My attempt at the treeview code has not gone so well. Just producing undefined for all 192 items (image screenshot.96.png) when just trying to output the Name as it is in the listview..

So to recap, I am wanting to produce a treeview from my current json data so that I am able to categorize everything in a neater, more user friendly design/look. 


Aleksandar
Telerik team
 answered on 22 Apr 2021
5 answers
747 views

Hi

I'm trying to set up group management in a grid.
In my case, I'm  

  • in ASP.NET MVC
  • with dynamic grid (Html.Kendo().Grid<dynamic>)
  • full server side operations :

     grid.DataSource(dataSource => dataSource
            .Custom()
            .Type("aspnetmvc-ajax")
            .Transport(t => t.Read(read => read.Action("ReadData", "Grid").Type(HttpVerbs.Post)))
            .GroupPaging(true)
            .Batch(false)
            .AutoSync(true)
            .PageSize(10)
            .Schema(s => s.Data("Data").Total("Total").Model(model => ...))
    .ServerFiltering(true)
    .ServerGrouping(true)
    .ServerPaging(true)
    .ServerSorting(true)


    I read the following thread which looks a bit like my problem:
    https://www.telerik.com/forums/how-do-i-perform-server-side-grouping-and-aggregating

    and the answer :
    https://demos.telerik.com/aspnet-mvc/grid/customajaxbinding

    I was inspired by this to make a POC.
    In my grid/ReadData(request), I have something like that

    DataSourceResult result = <get data>;
    if (!request.Groups.Any()) return result; // No Group
    // One group
    return newDataSourceResult{
    Data=new List<AggregateFunctionsGroup>{
    new AggregateFunctionsGroup
    {
    Key = "Value", Member = request.Groups[0].Member, Items = result.Data
    }},
    Total=result.Total;
    }


    Of course, in my test, all rows have the value "Value" in the grouping column.

    At runtime, the first time, without group, everything is OK : I have my first 10 records from the table (which has several thousand records)
    I drag and drop the column in the grouping bar, and it's ok too : I have my accordion bar with the good column/value
    But, when I open the accordion, I have an issue :
    Uncaught TypeError: Cannot read property 'notFetched' of undefined
     kendo.all.js:8374  if (lastItem.notFetched) {

     
     I tried again by not returning the Items in AggregateFunctionsGroup
     On open, I receive a readata with a filter corresponding to my column / value and I return my data 
     (the same as during the first execution because all my rows have the same value in the grouping column)
     And I have the same issue.
     
    At start, I was with Kendo 2021 R2. But as I saw that there was a fix on this subject, I preferred to install the latest version (R3),
    but of course with the same result.

    Can you tell me if I am returning bad Data (or Total ?), or if the bug (of R1) is still there?
    Unless groups don't work with grid<dynamic>?

    Maybe it is necessary to return all the records in the "Item", and not just the first 10? (in my case, several thousand)

    Regards

    Anton Mironov
    Telerik team
     answered on 22 Apr 2021
    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
    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
    +? more
    Top users last month
    Edmond
    Top achievements
    Rank 1
    Iron
    fabrizio
    Top achievements
    Rank 2
    Iron
    Veteran
    RobMarz
    Top achievements
    Rank 2
    Iron
    Fakhrul
    Top achievements
    Rank 1
    Iron
    Tejas
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Edmond
    Top achievements
    Rank 1
    Iron
    fabrizio
    Top achievements
    Rank 2
    Iron
    Veteran
    RobMarz
    Top achievements
    Rank 2
    Iron
    Fakhrul
    Top achievements
    Rank 1
    Iron
    Tejas
    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?