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

Hi Team,

Please provide the sample code for kendo grid  cascading drop down using model. 

And also please share, how to get the entire source(all rows of existing grid) of grid.

 

Thanks

Senthilkumar N

Atanas Korchev
Telerik team
 answered on 25 Jun 2015
1 answer
202 views

Hi Team, 

 Please let me know how to get the foreign key drop down (InstanceTypeIds) selected value using Jquery to send input value to cascading drop down (InstanceId) of grid row.      @(Html.Kendo().Grid<Flextronics.DevFactory.Ingrex.Entity.IngrexDataEntity.IngrexGlobalNewRequest>()

    .Name("GridGlobalNewRequest")
    .Columns(columns =>
    {
        columns.ForeignKey(p => p.InstanceTypeIds, (System.Collections.IEnumerable)ViewData["listofinstanceTypes"], "InstanceTypeId", "InstanceTypeName").Title("InstanceType").Width(120).EditorTemplateName("InstanceTypeIds");
        columns.ForeignKey(p => p.InstanceId, (System.Collections.IEnumerable)ViewData["listofInstance"], "InstanceId", "InstanceNm").Title("Instance").Width(120).EditorTemplateName("InstanceId").Width(120);
        columns.Bound(p => p.StartCompany).Title("Start").Width(90);
       // columns.Command(command => command.Edit()).Width(80).HtmlAttributes(new { style = "text-align:center" });
        columns.Command(command => command.Destroy()).Width(80).HtmlAttributes(new { style = "text-align:center" });
    })
            .ToolBar(toolbar => {
                toolbar.Create();
                toolbar.Save();
            })

    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(page => page.Enabled(true).PageSizes(new int[] { 10, 50, 100, 500}))
    .Sortable()
    .Scrollable()

    .DataSource(dataSource => dataSource
                .Ajax()

                .PageSize(20)                

                .Model(model =>
                {
                    model.Id(p => p.InstanceTypeIds);
                    model.Field(p => p.InstanceId);
                    model.Field(p => p.InstanceTypeIds);
                })


            //.Create(update => update.Action("EditingInline_Create", "NewRequest"))
            //.Read(read => read.Action("EditingInline_Read", "NewRequest"))
            //.Update(update => update.Action("EditingInline_Update", "NewRequest"))
            //.Destroy(update => update.Action("EditingInline_Destroy", "NewRequest"))

                .Create("EditingInline_Create", "NewRequest")
                .Read("EditingInline_Read", "NewRequest")
                .Update("EditingInline_Update", "NewRequest")
                .Destroy("EditingInline_Destroy", "NewRequest")

    )

    )

Kiril Nikolov
Telerik team
 answered on 25 Jun 2015
5 answers
1.7K+ views

I'm using batch-mode and server-side operations. it looks like you do some special things in the parameterMap function (behind the scenes) when the operation == "read" and filtering is applied.  For example, when a filter is applied to a column, it seems you put the filtering parameters in a special format before sending to the server. Even though I'm using the MVC wrappers, I can still wire-up the parameterMap feature using JavaScript. I did this for ONLY the "destroy" operation (I want to send just the IDs and not the models), but then the "read" operation no longer works when filtering is applied, because my use of parameterMap overwrites what you are doing for "read".

Can I still use the parameterMap feature for only "destroy", and not interfere with what you do with "read" ?  My desire is to send just the IDs and not the models when batch-saving deletes.

Curt Rabon
Top achievements
Rank 1
Veteran
 answered on 24 Jun 2015
2 answers
379 views

I have a chart with many colors. The tooltip should appear as black or white depending on the background color of the chart's bar. The only option I can think of is handle this with the series.name. But nothing works.

This code does accurately put a white or a black piece of text onto the screen as a tooltip:

.Tooltip(tooltip => tooltip
   .Visible(true)
   .Template("# if ((series.name === 'foo') || (series.name === 'bah')) { return '<strong style=\"color: black\">bar</strong>'; } else { return '<strong style=\"color: white\">bar</strong>'; } #")
)

However, once I plug in #= series.name # #= value # instead of bar the function breaks down and it no longer works.

Next, I tried both SharedTemplate and Template as such (one at a time of course):

.Tooltip(tooltip =>
   tooltip.Visible(true).Template("mytemplate")
   tooltip.Visible(true).SharedTemplate("mytemplate")
)

<script id="mytemplate" type="text/x-kendo-template">
   # if ((series.name === 'foo') || (series.name === 'bah')) { #
      <strong style="color: black">bar</strong>
   # } else { #
      <strong style="color: white">bar</strong>
   # } #
</script>

This didn't do anything and instead displayed a tooltip of "mytemplate".

Is this possible to do? If not is there any kind of work around?

Paul
Top achievements
Rank 1
 answered on 24 Jun 2015
3 answers
215 views

hello, I have using the scheduler and when I inspect the control in the javascript console I can see that there is data in the resources.datasource object but for some reason the resources are not displaying in the Timeline. I'm just trying to load resources right now without events. Do I have to have events for the resources to load properly. In the old webforms scheduler you didn't need that. Also, once loaded how do I change them dynamically so that users can manipulate the timeline and look at specific combination of resources. 

 

 @(Html.Kendo().Scheduler<Avianis.Models.Scheduler.AppointmentViewModel>()
        .Name("scheduler")
        .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
        .Views(views =>
        {
            views.TimelineView(timeline => timeline.EventHeight(50));
            views.TimelineWeekView(timeline => timeline.EventHeight(50));
            views.TimelineMonthView(timeline => timeline.EventHeight(50));
        })
        .Resources(resource => resource.Add(m => m.ResourceID)
                     .Title("Aircraft")
                     .Name("Aircraft")
                     .DataTextField("Name")
                     .DataValueField("ID")
                     .DataSource(source => source
                         .Read("GetResources", "Calendar"))
        )
        .DataSource(d => d
                .Model(m =>
                {
                    m.Id(f => f.MeetingID);
                    m.Field(f => f.Title).DefaultValue("No title");
                    m.RecurrenceId(f => f.RecurrenceID);
                    m.Field(f => f.Title).DefaultValue("No title");
                })
                .Read("Aircraft_Read", "Calendar")
        )
    )

Vladimir Iliev
Telerik team
 answered on 24 Jun 2015
3 answers
112 views

Hello, is there an option to remember the state of checkbox'ed items in the TreeView when loading them from the server? Such as when repopulating a complex control the TreeView is a part of?

 Thanks in advance for your speedy reply, Telerik! :)

Vladimir Iliev
Telerik team
 answered on 24 Jun 2015
1 answer
664 views

I’m using MVC Kendo grid and few drop down lists as filters and search button. Grid is bound using Ajax. The filters are defined outside of the grid. When user clicks on the search button i am passing the selected filter values to action method as Model, do the search and return the result. This is working fine when user selects the filter.
However, One of the filter is required filter, so I have [Required] attribute on the model’s property. When user don’t select the required filter, it makes the GetData() action method as expected, I see ModelState is NOT valid as expected.
But here im not sure what should I return when Model is not valid,
Questions:
I have validation summary on the layout page, how do I show model error in ValidationSummary without clearing the grid?When action method returns error, I don’t want to clear the existing result in the Grid. The error should display on top of the page.

Note:  For brevity purpose my sample below showing only one filter. Also I’m not worrying about client side validation.

 Layout Page

 

<html>
<head>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryval")
</head>
<body>   
    <div class="container body-content">     
        @Html.ValidationSummary()
        @RenderBody()
        <footer></footer>
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

 Index Page

@model MyModel
            @{
                ViewBag.Title = "Index";
                Layout = "~/Views/Shared/_Layout.cshtml";
            }
            <h2>Index</h2>
            <div>
                <br />
                @Html.ListBoxFor(x => x.SelectedIDs, new MultiSelectList(Model.States, "ID", "Name"))
                @Html.ValidationMessageFor(m => m.SelectedIDs)
            </div>
 
            <input id="btnSearch" type="submit" width="100" value="Search" />
            @(Html.Kendo().Grid<Person>()
               .Name("grid")
               .Columns(col =>
               {
               col.Bound(p => p.ID);
               col.Bound(p => p.Name);
               })
               .DataSource(ds =>
               ds.Ajax()
               .Read(r => r.Action("GetData", "Working"))
               .PageSize(3))
               .Pageable()
               .Sortable()
               .AutoBind(false)
            )
            <script src="~/Scripts/Working.js"></script>

 

 JavaScript

$(function () {
 
                var myModel = {
                    SelectedIDs: []
                };
                
                var dataSource = $("#grid").data("kendoGrid").dataSource;
                dataSource.transport.options.read.data = getFilters;
 
                $("#btnSearch").click(function () {
                    myModel.SelectedIDs = $("#SelectedIDs").val();
                    $("#grid").data("kendoGrid").dataSource.read();       
                    $("#grid").data("kendoGrid").refresh();
                })
 
                function getFilters() {
                    return myModel;
                }
            })

 Controller

public class WorkingController : Controller
            {
                public ActionResult Index()
                {
                    var model = new MyModel();
                    return View(model);
                }
                 
                public ActionResult GetData([DataSourceRequest]DataSourceRequest request, MyModel model)
                {
                    if (!ModelState.IsValid)
                    {
                        // What should i return here so that Model error message will appear in ValidationSummary ???
                    }
 
                    return Json(MockData.GetPersons().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
                }
            }

 

Model

public class MyModel
    {
        [Required(ErrorMessage = "State is required.")]
        public int[] SelectedIDs { get; set; }
 
        public IEnumerable<State> States
        {
            get
            {
                return MockData.GetStatesWithAbbr();
            }
        }
 
        public IEnumerable<Person> Persons { get; set; }
    }

Laksh
Top achievements
Rank 1
 answered on 23 Jun 2015
1 answer
2.2K+ views
I'm looking to make a custom header for my grid. In the end, I want it to have the title, sorting arrows, and a custom filter image button that bypasses the built-in filtering of the grid.
To start off though, how do I get it to display the title?
01.Html.Kendo().Grid<dynamic>()
02.    .Name("grid")
03.    .Filterable(filter => filter.Enabled(false))
04.    .DataSource(ds => ds.Ajax().Read(read => read.Action("action", "controller")))
05.    .Columns(columns =>
06.    {
07.        columns.Bound("field")
08.            .Title("title")
09.            .Sortable(true)
10.            .HeaderTemplate("???");
11.    });
Dimo
Telerik team
 answered on 23 Jun 2015
1 answer
117 views

Hi All

 

I'm trying to start using my license, but I'm doing something wrong for sure.

 

I copy to my page of a project that is working, the following script from a new project create thru template Telerik \Web\c# ASP.NET MVC Application, from Index.cshtml. (@(Html.Kendo().PanelBar()..."

But I don't have any change, I move the mouse over the bar, and I saw the new bar, but nothing happen when I click over that position.

 I suppose is missing some bundles, but I don't know what js is missing. 

In the new project everything works well, but not in my.

 Any clue what I must do?

Paulo Afonso

Kiril Nikolov
Telerik team
 answered on 23 Jun 2015
6 answers
748 views
Hi everyone,

I have a grid in batch edit mode. When a cell gets in edit-mode it uses (if specified) its EditorTemplate. My question now is, if I am also able to somehow use a DisplayTemplate for the time the cells are in display-mode?

I have a property with an UIHint on the template I wanna use. The problem is, he only uses the EditorTemplate in edit-mode, but not the DisplayTemplate in display-mode. Is there any possibility of doing this? I know that I can use the .ClientTemplate property on the columns. But I wanna use intellisense, and I need to implement a hole bunch of JavaScript-Methods.

Hope there is a way and someone can show it to me :)

The funny thing is: when the grid is loaded he calls the DisplayTemplate once (actually the grid needs it! Without a DisplayTemplate with the same name as the EditorTemplate nothing works!)

best regards, Mathias
Vladimir Iliev
Telerik team
 answered on 23 Jun 2015
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
Licensing
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
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?