Telerik Forums
UI for ASP.NET MVC Forum
6 answers
337 views

Hello all Kendo experts. I'm facing an issue here with MVC Grid batch update. Your help will be appreciated here. So here is my scenario.

  1. I'm using ASP.NET MVC 4 with Kendo UI. I'm using a grid  with batch update.
  2. There are some rows, that the user types in value (numeric), and there are some rows, that are calculated fields, and are not editable.

Please bear in mind, it's the same column, but rows are editable or not (given the condition). I've alredy acheived at this point.

(See screenshot attached).

What I'm looking for is.

On Save Changes event, calculate the values of the other rows.
The problem I'm facing is, since on the natch update, these rows were not "Edited" by the user, these values are not refreshes at the controller.
So, basically what I'm looking for, is for the same type of column, make some rows non-editable, but refresh with calculated values on the Save changes.

In the screeshot supplied, the rows in blue are my calculated rows.

Any help please?

Sachin
Top achievements
Rank 1
 answered on 25 Apr 2013
1 answer
116 views

Greetings, I've been trying to set up a modal popup Window that contains a treeview from which a user can select a single item and then close the window.  

I basically took the code we use all over our site for modal popup windows (without errors) and then just tried putting a treeview in it.   In Firefox the error is not explicitly thrown, the tree itself renders, but anything you tried to put in the window underneath the treeview does not render at all.  In Chrome, the window renders but not the tree and no error is thrown (i.e. you get an empty window).  In IE9 (9.0.8112.16421) you get an error in jQuery-1.8.2.min.js as soon as you try to open the window.  The error says "0x80020101 Microsoft JScript Runtime Error:  could not complete the operation due to error 80020101" (useful, I know).  The window never opens at all.  I am running Windows 7.

I created a dummy test page on my site that includes only the kendo and jQuery libraries/css/js files in the layout and removes everything not involved with housing the treeview in the window and I still get the same error.

The error occurs before calling the controller method to get the data to populate the tree (and I have another treeview that is NOT in a window using the same controller method which one works properly, and if I run in firefox it does actually call the method and populate the tree, just nothing below the tree like buttons - so I am positive the problem is not the controller method).  You can substitute any data you want if you try to repro this since the code below is data agnostic, just give it's type a property called TagName or substitute your own value of DataTextField.

If I remove the code defining the treeview and replace it with a simple "hi", I do not get the error, which proves the problem is the tree + window combination (because remember, the exact same tree works perfectly outside of the window).  

My code is below, distilled down to the absolute simplest case, still throwing the same error in IE9:
(I even got rid of the select handler and the confirm/cancel buttons just to try to get rid of the error)

The versions of jQuery & jQueryUI we include are the full downloaded library from jQuery - we have not customized them in any way.  The specific version number that we are using are ones we've had to upgrade to because of error conflicts with other between other Kendo controls and jQuery.  I suspect something similar is at play here.

If there is a specific way I need to set up the window to support this functionality please let me know, or if there is a problem with the interaction of the window + tree + jQuery that needs to be fixed can we please get a patch for it ASAP?  There are a bunch of places in our app where we'll need to have a tree in a popup window like this.

Thanks in advance, please let me know if you need anything else from me to diagnose the issue!

@model NeedleFinder.WebUI.Areas.CaseMgmt.Models.Tag.ManageTagsViewModel
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "TreeWindowPopup";
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
<div>  <input type="button" name="btnChooseParent" value="Select" onclick="openParentTagList();" />
</div>
<script id="parentTagSelection" type="text/x-kendo-template">

  @(Html.Kendo().TreeView()
        .Name("trvParentTag")
        .DataTextField("TagName")
       .DataSource(dataSource => dataSource
                                      .Read(read => read
                                                        .Action("GetTagsForTree", "Tag", new { area = "CaseMgmt" }))
        )
   )  

     
</script>
  
<script type="text/javascript">

    function openParentTagList() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Select parent tag",
            resizable: false,
            modal: true,
            height: 500,
            width: 400
        });

        kendoWindow.data("kendoWindow")
            .content($("#parentTagSelection").html())
            .center().open();

       
        return false;
    }
   
    </script>


My layout looks like this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <!-- PROTOTYPE CSS -->

    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <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>

    @if (false)
    {
        <script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
    }
</head>

    <body>
       
        @RenderBody()
</body>
</html>
Petur Subev
Telerik team
 answered on 25 Apr 2013
1 answer
684 views
Hello All,

I set up a parent/child grid much like the Hierarchy demo.  In my case I wanted to make both grids editable (inline).  But I kept getting an invalid template error on my child grid as soon as I added the .Editable() section to it.  After some investigation and commenting/uncommenting things on the child grid and my model I discovered that the error was related to my Required validator message on the model.  My validation message was "The field '{0}' is required."  It seems like the single quotes in the validation message aren't being escaped properly when the template is created or something like that because when I changed the validation message to "The field {0} is required." everything works fine.  So I'm able to get around the issue, but I thought I'd let you know in case this is something that can be fixed in the core code.  Thanks!

Regards,
Brian
Petur Subev
Telerik team
 answered on 25 Apr 2013
1 answer
125 views
In my application, I frequently use multiple DropDownLists on the same page. Most of the time, the data sources for those lists (which are connected to a SQL Server database) load quickly and there's no problem. Every once in a while, however, the load hangs and all the dropdowns show the spinning 'loading' icon. Sometimes they resolve on their own and finish loading. Sometimes they throw one of several errors that I know relate to simultaneous SQL transactions running in the database (I apologize, I don't have the error text for any of them at the moment, but I will update this thread if and when I do).

Anyone know about this issue or have suggestions on how I can avoid the problem and improve performance?
Petur Subev
Telerik team
 answered on 25 Apr 2013
0 answers
145 views
While working through a process of batch editing a database tables that
had a timestamp field in each row for concurrency checking. It was not
immediately apparent the the return value for the update could be the
same as that for the create procedure.

Could you update your
documentation to explain that during an update you can return the
results of the update process to the grid.
so using generics the insert process can be:-

public
static DataSourceResult AddChanges<TEntity>([DataSourceRequest]
DataSourceRequest request, System.Data.Entity.DbContext context,
System.Web.Mvc.ModelStateDictionary modelState,
System.Collections.Generic.IEnumerable<TEntity> dbes)
where TEntity : class
{
   var results = new System.Collections.Generic.List<TEntity>();
   if (dbes != null && modelState.IsValid)
   {
      foreach (var dbe in dbes)
      {
         if (AddChanges<TEntity>(context, modelState, dbe))
            results.Add(dbe);
      }
   }
   return results.ToDataSourceResult(request, modelState);
}

and the update process can also be:-

public
static DataSourceResult SaveChanges<TEntity>([DataSourceRequest]
DataSourceRequest request, System.Data.Entity.DbContext context,
System.Web.Mvc.ModelStateDictionary modelState,
System.Collections.Generic.IEnumerable<TEntity> detached)
   where TEntity : class
{
   var results = new System.Collections.Generic.List<TEntity>();
   if (modelState.IsValid)
   {
      foreach (var dbe in detached)
      {
         if (SaveChanges<TEntity>(context, modelState, dbe))
            results.Add(dbe);
      }
   }
   return results.ToDataSourceResult(request, modelState);
}


NOTE the return of the results from the Save process

so in a controller the create and edit ActionResults would like :-
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult ProductPricingClientCreate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductPricing> prices)
{
   return Json(PS.Common.DataAccess.AddChanges<ProductPricing>(request, db, ModelState, prices));
}

[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult ProductPricingGridUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductPricing> prices)
{
   return Json(PS.Common.DataAccess.SaveChanges<ProductPricing>(request, db, ModelState, prices));
}


Timothy
Top achievements
Rank 1
 asked on 24 Apr 2013
1 answer
323 views
Hi there,

I am continuing to eval the kendo grid for purchase and seeing if I can get it working in my application which is using MVC 4 and kendo 2013.1.319. 

While swapping in the dropdown I am running into an error for only certain records where the Select Event function on the dropdown is not recognized; even though it is present in the javascript. Its weird because it works for most records that visit the details page and once in awhile it breaks and I can't figure out why. Any ideas?

For example:

I am binding this list with a selectlist in the controller and the values are properly set. there is a full list and the Id is there in the list.

//select list on the viewmodel
pvModel.CostCenterList = new SelectList(_setupBiz.GetNonOverheadCostCenters(), "Key", "Value",pvModel.CostCenterId);

I have this DDL on the .cshtml page

                    @(Html.Kendo().DropDownList()
                        .Name("CostCenter")
                        .OptionLabel("Pick a costcenter...")
                        .BindTo(Model.CostCenterList)
                        .Events(e=>e.Select("CostCenterSelect"))
                        )

and this script in my <scripts> section

    function CostCenterSelect(e) {       
        var costCenter = this.dataItem(e.item.index());
        if (costCenter.Value > 0) {
//stuff happens
        }
        else {
//hide a bunch of buttons        }
    };







Tim
Top achievements
Rank 1
 answered on 24 Apr 2013
1 answer
131 views
Hi,

How to check kendo datasource is null before bind to any control
Vladimir Iliev
Telerik team
 answered on 24 Apr 2013
1 answer
93 views
Hello,

Spent hours trying to get this simple update sample to work.  Firefox shows that my model is being sent to my controller on an update but my controller receives a null model.  I must be missing something basic.  Thank you in advance.   VS2012.

Firefox debug info:

Parametersapplication/x-www-form-urlencoded

models
[{"OnTimeID":123,"Description":"Altamed staging issue","Status":"closed"}]

View:

<!doctype html>
<html>
@{
    ViewBag.Title = "OnTime Sample";
}
<head>
    <title>Kendo UI Web</title>
    <link href="~/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="~/js/jquery.min.js"></script>
    <script src="~/js/kendo.web.min.js"></script>
</head>
<body>
  
    <div class="form">
        <div class="selector">
            Edit Product:
            <input type="text" id="onTimeIDs" />
        </div>
        <div id="container" class="container">
            <ul>
                <li>
                    <label>
                        OnTime ID</label>
                    <span data-bind="text:OnTimeID"></span></li>
                <li>
                    <label>
                        Description</label>
                    <input type="text" class="k-textbox" data-bind="value: Description" /></li>
                <li>
                    <label>
                        Status</label>
                    <input type="text" class="k-textbox" data-bind="value: Status" /></li>
            </ul>
            <button id="save">
                Save</button>
        </div>
    </div>
    <script>
  
  
    var crudServiceBaseUrl = "/Services",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl + "/OnTimeIDs_Get",
                    dataType: "json"
                },
                update: {
                    url: crudServiceBaseUrl + "/OnTimeIDs_Update",
                    type: "POST",
                    dataType: "json"
                },
                  
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return {                         
                            models: kendo.stringify(options.models)
                        };
                    }
                }
                 
            },
  
  
            batch: true,
            schema: {
                model: {
                    id: "OnTimeID",
                    fields: {
                        OnTimeID: {
                            editable: false,
                            nullable: true
                        },
                        Description: { type: "string" },
                        Status: { type: "string" }
                    }
                }
            }
        }
    );
  
  
        $("#onTimeIDs").kendoDropDownList({
            dataSource: dataSource,
            dataTextField: "Description",
            dataValueField: "OnTimeID",
            change: function () {
                var model = dataSource.get(this.value());
                kendo.bind($("#container"), model);
            }
        }).data("kendoDropDownList")
            .one("dataBound", function () {
                kendo.bind($("#container"), dataSource.view()[0]);
            });
  
        $("button").click(function () {
            dataSource.sync();
        });
    </script>
</body>
</html>


Controller:

Why does OnTimeIDs_Update() receive a null parameter?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCTimeCard.Models;
  
namespace MVCTimeCard.Controllers
{
    public class ServicesController : Controller
    {
  
        public ActionResult OnTimeIDs_Get()
        {
            List<OnTimeItem> otiList = new List<OnTimeItem>() {
                new OnTimeItem {OnTimeID = 123, Description = "Altamed staging issue", Status = "Open"},
                new OnTimeItem {OnTimeID = 456, Description = "HILL staging issue", Status = "Open"},
                new OnTimeItem {OnTimeID = 789, Description = "PPMSI staging issue", Status = "Open"}
            };
  
            return Json(otiList, JsonRequestBehavior.AllowGet);         
        }
  
        [HttpPost]
        public ActionResult OnTimeIDs_Update( IEnumerable< OnTimeItem>  otis)
        {
  
            return Json(otis, JsonRequestBehavior.AllowGet);    
        }
    }
}
Derek
Top achievements
Rank 1
 answered on 24 Apr 2013
1 answer
188 views
Hi,

I'm currently working on a kendo grid using MVC helpers, and I've been having a bit of a hard time to find a way to set a individual filter as extra = true.

Here is the code that I'm using to disable the extra filters for the grid:

.Filterable(fltr => fltr.Extra(false).Messages(m => m.IsTrue(" Yes").IsFalse(" No")).Operators(op => op.ForString(str => str.Clear()))))

This is at the end of the grid and works just fine.
However I want to have a single column as extra (the date column to be precise), however the column Filterable only takes a bool (whether it's filterable or not at all).

I would be very grateful if you could point me in the right direction regarding this.

Thanks,

W. Akram
Daniel
Telerik team
 answered on 23 Apr 2013
6 answers
1.7K+ views
I'm using the kendo grid to display users. I want to have a button for each user that can be clicked on to link to a page to edit user details.
I have the following code to display the required fields and use the ClientTemplate method to display the button that links to the edit user page.
@(Html.Kendo().Grid<Extranet.Web.Models.UserListViewModel.UserList>(Model.Users)
.Name("Grid")
.Columns(columns =>
             {
                 columns.Bound(u => u.UserView.UserName);
                 columns.Bound(u => u.UserView.Name);
                 columns.Bound(u => u.UserView.UserRole);
                 columns.Bound(u => u.UserView.CreatedOn);
                 columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)
                        .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");
             })
 .Pageable()
 .Filterable()
 .Sortable()
 .Selectable()
 .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .Read(read => read.Action("AllUsers", "Admin"))
    )
)
When the page is rendered in a browser it shows all the columns as expected and the button that I can use to link to the appropriate page. However the grid goes in to limp mode and will not change page, sort or filter.

If I take the following line of code out then the grid works fine.
columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)
       .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");
Am I doing something wrong or is there an alternative way to achieve what I am trying to do?
Ryan
Top achievements
Rank 1
 answered on 23 Apr 2013
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
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
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
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?