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

I Am not sure if this can even be done, but from what I have read it should be.  Since the Grid is not a form control, I should be able to use templates to generate the controls and have MVC generate the proper HTML when rendered.  I started off using Dave Glick's "how to post data in a KendoUI grid in MVC https://daveaglick.com/posts/how-to-post-data-in-a-kendoui-grid  I also used the Telerik Example at GitHub https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/post-grid-with-form  both were very helpful with getting a "first level" Grid to post data, however not for the Second Level.  

 

So I am not even sure if this is possible, but I have what I think *should work) if I can get the data into the template and then on to the Grid.  The first problem I am having is that I can't get any of the Grid Values in the Template for the 2nd level to "insert" I CAN get the  #=WOID# to show but none of the others

#=GRIDID#
#=MAPNAME#
#=PAGENUMBER#
#=SCALE# 

I am getting a JS error saying that    GIDID is not defined.  But WOID works and it's not defined..  what am I missing?   Also when I just use the WOID and post data the posted data is not a collection, it is one record (only the WOID) 

 

@using (Html.BeginForm("REREQUEST", "GridPrint"))
{
 
@(Html.Kendo().Grid(new List<GRIDPRINTWO>())   //<GISPortal.GRIDPRINTWO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.WOID).Width(40).Title("WO#");
            columns.Bound(e => e.REQUESTDATE).Width(150).Format("{0:G}").Title("Date");
            columns.Bound(e => e.REQUESTER).Width(100).Title("Requester#");
            columns.Bound(e => e.NOTIFICATIONTYPE).Width(110).Title("Notification");
            columns.Bound(e => e.COMPLETED).Width(110).Title("Completed?");
            columns.Bound(e => e.ERRORS).Title("Errors?");
 
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
         
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("REQUESTDATE").Descending()) // <-- initial sort expression
        .PageSize(20)
             // .Read(read => read.Action("GRIDPRINTWO_Read", "Grid"))
                    .Read(read => read.Action("GRIDPRINTWO_Read", "GridPrint", new { woid = ViewBag.woid, requester = ViewBag.requester }))
        )
        .Events(events => events.DataBound("dataBound"))
         
         
)
 
 
    <script>
          var counter = 1;
 
 
        function gridIndex(data) {
         return counter++;
                                  }
    </script>
 
    <script>
 
    function index(dataItem) {
        var data = $("#Products").data("kendoGrid").dataSource.data();
 
        return data.indexOf(dataItem);
    }
 
    </script>
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid(new List<GRIDPRINTS>())  //<GISPortal.GRIDPRINTS>()
            .Name("grid_#=WOID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.MAPNAME).Width(110).Title("Name");
                columns.Bound(o => o.GRIDID).Width(110).Title("GridID");
                columns.Bound(o => o.SCALE).Width(110).Title("Scale");
                columns.Bound(o => o.PAGENUMBER).Title("PageNum");    
                columns.Bound(o => o.STATUS).Width(200).Title("Status");
                columns.Bound(o => o.ERRORS).Width(300).Title("Errors?");
                 
                 
                 
                // shout out to daveaglick.com/posts/how-to-post-data-in-a-kendoui-grid
               //  HERE IS WHERE I AM HAVING ISSUES
                 
                columns.Bound(m => m.GRIDID).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEGRIDID[#=gridIndex(data)#].GRIDID' "
                  + "value='#=GRIDID#' />");
                  // ALSO TRIED THIS  + "value='@item.GRIDID' />");
                 
                 columns.Bound(m => m.MAPNAME).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEMAPNAME[#=gridIndex(data)#].MAPNAME' "
                  + "value='#=MAPNAME#' />");              
                 
                columns.Bound(m => m.PAGENUMBER).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEPAGENUMBER[#=gridIndex(data)#].PAGENUMBER' "
                  + "value='#=PAGENUMBER#' />");
                 
                columns.Bound(m => m.SCALE).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THESCALE[#=gridIndex(data)#].SCALE' "
                  + "value='#=SCALE#' />");
                                 
            
               // JUST PLAYING HERE BUT THE WOID DOES WORK    
                columns.Bound(o => o.MAPNAME).Width(110).Title("Re-Send")
                     .ClientTemplate("<input type='checkbox' "
                     + "name='CHECKED[#= WOID #].MAPNAME' "
                     + "value='true' "
                     + "#if (WOID) { #checked='checked'# } #/>"
                     + "<input type='hidden' value='false' "
                     + "name='themapname[#= WOID #].MAPNAME' />");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("GRIDPRINTS_Read", "GridPrint", new { woid = "#=WOID#" }))
                .ServerOperation(false)
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
       // this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
 
 
 
 
    <input type="submit" value="SUBMIT" />
 
 
}
Boyan Dimitrov
Telerik team
 answered on 12 Jul 2017
1 answer
1.5K+ views
Is it possible to have this on Kendo Grid like the following attached image? As far as I have searched on the forums, didn't found one. Can somebody help me on this?
Georgi
Telerik team
 answered on 11 Jul 2017
1 answer
497 views

0down votefavorite I'm having trouble with the paging (pageSize) with the Kendo MVC Grid after a jquery AJAX call. Basically when the View first loads everything works fine. Lets say it loads 40 records with the page size set to 10. Then above the grid i have a few buttons where i make a jquery AJAX requests to the Controller to filter the data (by different Status). The data comes back fine (say the filter brings back 12 records), but if the resultset is more than 10 records, for some reason it reloads the whole 40 records. I'll post the code below. Any help.?

 

    @(Html.Kendo().Grid<AViewModel>().Name("ARequests").Columns(columns =>{ columns.Bound(c => c.AID).Hidden(true); columns.Bound(c => c.RequestSubType).Title("Request Subtype").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))); columns.Bound(c => c.Category).Title("Category").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))); columns.Bound(c => c.Status).Title("Status").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))); columns.Bound(c => c.Technician).Title("Technician Assigned").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));}).Sortable().Filterable(ftb => ftb.Mode(GridFilterMode.Row)).Pageable(pageable => pageable .Refresh(true).PageSizes(true).ButtonCount(5)).DataSource(dataSource => dataSource .Ajax().ServerOperation(true).PageSize(10).Model(model => model.Id(x => x.AID)).Read(read => read.Action("WhenPageFirstLoads", "TheController"))))

 

$(".status").on("click", function (event) {var r = MyButtonfilterswitch (r) {case "OPen": status = "Open";break;case "Cancel.png": status = "Cancel";break;case "Closed.png": status = "Closed";break;}}var datatopass = { atsstatus: status }; $.ajax({ type: "post", url: "@Url.Action("ActionToFilterByStatus", "Controller")", data: datatopass, dataType: "json", cache: false,async: true, success: function (returnedData) {if (returnedData !== "" && returnedData.length !== 0) { $("#ARequests").show(); $("#ARequests").data("kendoGrid").dataSource.data(returnedData);//if (returnedData.length > 10) {// $("#ARequests").data("kendoGrid").dataSource.pageSize(10);// $("#ARequests").data("kendoGrid").refresh();//}// THIS ABOVE DOESNT SEEM TO WORK} else { $("#ARequests").hide();}}});});

Georgi
Telerik team
 answered on 11 Jul 2017
1 answer
120 views

I have been trying to implement a search which search using SSN with and without dashes while using a DropDownList with Virtualization. I have everything working perfectly if you type with the "-" but also want it to work without the "-"

01.@Html.LabelFor(model => model.VisitorID)
02.                    @(Html.Kendo().DropDownList()
03.                      .Name("VisitorID")
04.                      .DataTextField("Value")
05.                      .DataValueField("ID")
06.                      .MinLength(2)
07.                      .HtmlAttributes(new { style = "width:100%" })
08.                      .Height(290)
09.                      .Filter(FilterType.Contains)
10.                      .DataSource(source =>
11.                      {
12.                          source.Custom()
13.                              .ServerFiltering(true)
14.                              .ServerPaging(true)
15.                              .PageSize(80)
16.                              .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
17.                              .Transport(transport =>
18.                              {
19.                                  transport.Read("Virtualization_GetVisitor", "Lookups");
20.                              })
21.                              .Schema(schema =>
22.                              {
23.                                  schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
24.                                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
25.                              });
26.                      })
27.                      .Virtual(v => v.ItemHeight(26).ValueMapper("VisitorLookups"))
28.                      .NoDataTemplate("<a onclick=\"addNewEntityPartial(\'Visitor\');\">Add a new Visitor</a>")
29.                    )
30.                    @Html.ValidationMessageFor(model => model.VisitorID)
    
Dhruv
Top achievements
Rank 1
 answered on 10 Jul 2017
3 answers
180 views

Hey guys ,

 When there is a scheduler with options:

 max:date....

selectable:true

if we move a cell down with keyboard and we reach a cell greater then max then scheduler block .

Ivan Danchev
Telerik team
 answered on 10 Jul 2017
4 answers
915 views

I have my customized colors for lines and legend. What I need to know is how can I set the color arrangement for the series color in line chart. As I observed it has their own random arrangement for the colors.

 

My sample array of colors: 

var myColors = ["lightblue", "pink", "yellow", "green", "orange", "red", "teal"];

whenever I load an dataSeries the color will randomly select an color.

I need to set my color per key, for example:

Test 1 = "lightblue", Test 2 = "pink", Test 3 = "yellow"....

 

In the series color defaults will generate colors randomly not based on my customized colors.

Question, is what I need to do to set my customized array of colors?

How can I accomplish this?

 

sample code:

$("#chart").kendoChart({
                title: { text: "MyChart" },
                theme: "Metro",
                dataSource: dataSeries,
                seriesColors: ["lightblue", "pink", "yellow", "green", "orange", "red", "teal"],               
                //seriesColors: myColor,
                series: [{
                    type: "line",
                    field: "value()",
                    categoryField: "Date",
                    name: "#= group.value #",
                    color: "red",
                    markers: {
                        type: 'circle',
                        visible: true,
                        background: 'black',
                        size: 5
                    }
                }],

 

 

Hope to hear from you. I need this to be done as my project is urgent.

Thanks!

 

Regards,

Jerson

Stefan
Telerik team
 answered on 10 Jul 2017
8 answers
152 views

I am using the Example http://demos.telerik.com/aspnet-mvc/grid/hierarchy

 

The Main part of the Grid loads fine but the other one appears to give me a javascript error saying the woid is not defined. Looking at the developer controls in Chrome it also looks like the woid is not being injected.  So I am trying to understand the hashtags and these variables #=woid#   I am looking at .Name("grid_#=woid#") and this is a copy of the demo but using my data. I don't see where the woid data is coming from (on the example this would be the EmployeeID)  some research says that is is related to the CSS, but ther source code does not have any clues to what and how this is used.  

 

@model IEnumerable<GISPortal.GRIDPRINTS>
 
@(Html.Kendo().Grid<GISPortal.GRIDPRINTWO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.WOID).Width(110);
            columns.Bound(e => e.REQUESTDATE).Width(110);
            columns.Bound(e => e.NOTIFICATIONTYPE).Width(110);
            columns.Bound(e => e.COMPLETED).Width(110);
            columns.Bound(e => e.ERRORS);
 
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("GRIDPRINTWO_Read", "GridPrint"))
        )
        .Events(events => events.DataBound("dataBound"))
)
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<GISPortal.GRIDPRINTS>()
            .Name("grid_#=woid#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.MAPNAME).Width(110);
                columns.Bound(o => o.SCALE).Width(110);
                columns.Bound(o => o.PAGENUMBER);     //.ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.STATUS).Width(300);
                columns.Bound(o => o.ERRORS).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                                .Read(read => read.Action("GRIDPRINTS_Read", "GridPrint", new { woid = "#=woid#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
Viktor Tachev
Telerik team
 answered on 10 Jul 2017
1 answer
561 views

Hi there,

 

I'm creating a custom datasource

01.@(Html.Kendo().Grid<Foo>()
02.    .Name("grid")
03.    .AutoBind(false)
04.    .DataSource(dataSource => dataSource
05.       .Custom()
06.       .Batch(true)
07.       .Schema(s =>
08.         s.Model(model =>
09.         {
10.            model.Id(p => p.ID);
11.            model.Field(x => x.ID).DefaultValue(0);
12.         })
13.       )
14.       .Transport(new
15.       {
16.          read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customRead" },
17.          create = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customCreate" },
18.          update = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customUpdate" },
19.          destroy = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customDestroy" },
20.       })
21.    )
22.)

 

I need in runtime to change all the transport's handlers (in JavaScript).

I've read the documentation and some posts in the forum but I can't make it work. The last thing I tried was this

 

01.function anotherDestroy(e) {
02.    console.log("calling anotherDestroy()");
03.}
04. 
05.let ds =
06.    $("#grid")
07.        .data("kendoGrid")
08.        .dataSource;
09. 
10.ds.transport.options.destroy = anotherDestroy;

 

Can someone please tell me what I'm doing wrong?

Thank you.

Stefan
Telerik team
 answered on 10 Jul 2017
4 answers
431 views

Hi,

How to set minimum and maximum date range in Line Chart categoryAxis?

Please see min and max in sample code:

 

},
                categoryAxis: {                    
                    min: new Date("6/7/17"),
                    max: new Date("7/7/17"),
                    //type: "date",
                    baseUnit: "days",
                    majorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: 40,
                        padding: { right: 10 },
                        dateFormats: {
                            days: "M/d/yy"
                        },
                        step: step
                    }
                }
            });

 

I set it to static, but even if i set it thru var dynamically, same error happens. Please see attached file.

 

 

Daniel
Telerik team
 answered on 10 Jul 2017
2 answers
702 views

Hello,

I need to display a chart binded dynamically with multiple series of the same object type.

I managed to do that using the following chart parameters :

dataSource: {
    data: data,
    group: {
        field: "group"
    }
}

where my data looks like this (this is only an example, data is actually:

var data = [{
    group: "First",
    category: 1,
    value: 100
},
{
    group: "First",
    category: 2,
    value: 200
},
{
    group: "Second",
    category: 1,
    value: 200
},
{
    group: "Second",
    category: 2,
    value: 400
}];

 

However, this structure doesn't suit my other needs (such as displaying a table with one row per group), so I'd like to know if it's possible to display the same chart using data as following :

var data = [{
    group: "First",
    values: [{
        category: 1,
        value: 100
    },
    {
        category: 2,
        value: 200
    }]
},
{
    group: "Second",
    values: [{
        category: 1,
        value: 200
    },
    {
        category: 2,
        value: 400
    }]
}];

 

How can I do that ?

Thanks a lot for your help.

Best regards

Daniel
Telerik team
 answered on 10 Jul 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?