I've been following the steps outlined here to practice CRUD operations with the Kendo UI Grid:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/batch-editing

And the incell editing is not actually saving the data changes I make. I've figured out that I'm running into ModelState errors, and so the ModelState.IsValid flag is false. Here is my edit method:

The exception that is raised is this:

"The key-value pairs that define an EntityKey cannot be null or empty"

Now the only part of my dataset that is null is the Name column, but this is set to Nullable in the edmx file, and the db field itself is set to nullable. So why do I keep getting this error message?

Another thing I'm confused about is how the demo (see the link above ) says to create a class called ProductViewModel in step 5. Why is this necessary when the Entity Framework has already created a Product table for you automatically? This seems to be an unneeded duplication of data. Thanks.

I have a treeview with subitems. I want to have the ‘checkchildren’ optie set to true, so if a user click on a parent, als the children are checked.
But I also want to be able to uncheck some childeren, while parent remains checked.

The problem is when i load the treeview, and i have the above situation (a parent checked and only a few of the subitems), all the subitems are then automatically checked. At that point the treeview is not representing the checked items anymore that were supplied in the datasource. 

So how can i achieve that (1)on a form submit, the parent is also marked as ‘checked’ when not al subitems are checked and (2)prevent that on a load with a datasource, all the childeren are automatically checked if a parent is checked and (3) that on a select of a parent with a mouseclick, all subitems are checked.


Thanks

Hi,

I would like to filter grid 2 based on the row selection in the first grid and First grid has primary key called CustID and second grid has foreign key CustID.

Please advise how i can achieve this. Thank you

First Grid:
@(Html.Kendo().Grid(Model)
    .Name("SList")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px;" })
    .Columns(columns => {
        columns.Bound(p => p.CCID);
        columns.Bound(p => p.CRN);
        columns.Bound(p => p.CFirstName).Width(140);
        columns.Bound(p => p.CFamilyName).Width(140);
        columns.Bound(p => p.Alias).Width(45);
        columns.Bound(p => p.CGender).Width(45);
        columns.Bound(p => p.CAge).Width(45);
        columns.Bound(p => p.CDOB).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.RDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.RFrom);
        columns.Bound(p => p.RComments);
        columns.Bound(p => p.ReferralTo);
        columns.Bound(p => p.CStatusID);
        columns.Bound(p => p.DateScheduled).Format("{0:MM/dd/yyyy}");
  
        columns.Command(commands => commands.Edit()).Width(175);
    })
    //.ToolBar(toolBar => toolBar.Save())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Navigatable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)
                                        .Type(GridSelectionType.Row))
    .DataSource(dataSource => dataSource        
        .Ajax()
        .PageSize(10)   
        .Model(model => model.Id(p => p.CustID))
        .Read(read => read.Action("Index", "Management"))
        .Update(update => update.Action("Edit", "Management"))
      
    )
)

Second Grid:

@(Html.Kendo().Grid(Model)
    .Name("SList2")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px;" })
    .Columns(columns => {
        columns.Bound(p => p.CreateDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.CreateBy);
        columns.Bound(p => p.C3).Width(140);
   
  
        columns.Command(commands => commands.Edit()).Width(175);
    })
    //.ToolBar(toolBar => toolBar.Save())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Navigatable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)
                                        .Type(GridSelectionType.Row))
    .DataSource(dataSource => dataSource        
        .Ajax()
        .PageSize(10)   
        .Model(model => model.Id(p => p.CEventID))
        .Read(read => read.Action("Index", "Management"))
        .Update(update => update.Action("Edit", "Management"))
      
    )
)

I want to modify the edit window of the schedule application as I want to customize the fields for entering data. I want to add some rows and content specific to my application. 

How can I modify the edit window or provide my own window content? 

Paul

Hello,

I tried to integrate the inline editor with headlines. Specifically I want the user being able to change the content between <h1></h1> tags.

1.) I added contentEditable directly to the H1 and H2 tags but it didn't work.
2.) I added contentEditable to a Div Wrapper around the H1 or H2 tag. I allow the user only to change bold/italic/underline style. When the user selects everything and deletes, also the H1 tag within the div wrapper is deleted. So the question is how I need to integrate the inline editor to allow the user to edit the content within the H1 tag without deleting it?

Thanks,

Philip

Hi

I have been testing using Kendo Editor using version v2013.1.514 and it has been working with no problems. 

I received an extension to my testing account a number of days and tried to upgrade to the latest version using the instruction here , but when I do this the text box loses editor features and returns to a normal text box.

My original references are:

 <link rel="stylesheet" type="text/css" href="Content/kendo.common.min.css"/>
    <link rel="stylesheet" type="text/css" href="Content/kendo.default.min.css"/>

 <script type="text/javascript" src="Scripts/kendo.all.min.js"></script>

Jquery is already loaded on the page ahead of the Kendo js file.

The code I use to attach the editor is as follows:

  var editor = $('<div id="editor"/>');
    editor.appendTo($(element));
    editor.kendoEditor({
        change: onChange,
        tools: [
                 "bold",
                 "italic",
                 "underline",
                 "strikethrough",
                 "justifyLeft",
                 "justifyCenter",
                 "justifyRight",
                 "justifyFull",
                 "insertUnorderedList",
                 "insertOrderedList",
                 "indent",
                 "outdent",
                 "createLink",
                 "unlink",
                 "insertImage",
                 "subscript",
                 "superscript",
                 "createTable",
                 "addRowAbove",
                 "addRowBelow",
                 "addColumnLeft",
                 "addColumnRight",
                 "deleteRow",
                 "deleteColumn",
                 "viewHtml",
                {
                    name: "formatBlock", items: [
            // changes wrapping block to paragraph
            { text: "paragraph", value: "p" }
                    , { text: "H1", value: "h1" }
                     , { text: "H2", value: "h2" }
                     , { text: "H3", value: "h3" }
                    ]
                }

        ]
    });


Can you advise how I can update to the latest version?

Thanks 

Mark 

I'm using a Kendo window to create a modal form launched
from a dropdown menu. The window launches fine and submits the form, which is a
CSHTML partial view. The problem is if I close the form using the form close
icon (X) I can no longer refresh or reload the form, also my cancel button is
round tripping to the server and loading the parent form in order to close out
the model window (this is a bad work around). Can you point me to the documentation
 on the kendo window close event which would allow me to refresh the modal window
 after it has been closed by the (X) icon and how I would implement a close button on a partial form loaded
from a controller into a kendo window. That’s 2 questions. Here is the code:

@* This is the widget configure window *@

<div id="WidgetWindow">

    @(Html.Kendo().Window()
    .Name("WidgetConfigWindow")
    .Title("Configure Widget")
   .Animation(false)  
   .Draggable()
    .Resizable()
    .Width(736)
    .Visible(false)
     .Modal(true)
 )
</div> 

  //invoke kendo window with partial window form
    //to add a widget to an area

    function NewWidgetWindow(areaname, widgettype) {
        var windowWidget = $("#WidgetConfigWindow").data("kendoWindow");
        var dropdownlist = $("#dashboards").data("kendoDropDownList");
        var dataItem = dropdownlist.dataItem();
        var parms = { "DashboardID": dataItem.DashboardID, "AreaName": areaname,         "WidgetType":
widgettype };
        windowWidget.refresh({
            data: parms,
            url: "@Url.Action("GetWidgetWindow", "Dashboard")"
            });
            windowWidget.center();
            windowWidget.open();
    }

public ActionResult GetWidgetWindow(string DashboardID, string AreaName, string WidgetType)   
        {
            //Pass apartial view to a kendo window
            //which onfigures the widget for the appropriate area
            ViewBag.DashboardID = DashboardID;
            ViewBag.AreaName = AreaName;
            if (AreaName == "Marquee")
            {
                if (WidgetType == "Q")
                {
                    return PartialView("QWidget");
                }
                else if (WidgetType == "A")
                {
                    return PartialView("QWidget");
                }
            } else if (AreaName == "AOne")
                {
                if (WidgetType == "Q")
                {
                    return PartialView("QWidget");
                }
                else if (WidgetType == "A")
                {
                    return PartialView("AWidget");
                }
            }
            return PartialView("QWidget");
        }

//**************AWidget.CSHTML**********************
<script src="~/Scripts/kendo/2013.1.514/jquery.min.js"></script>
<script src="~/Scripts/kendo/2013.1.514/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.1.514/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js"></script>

 

@using (Html.BeginForm("AWidget", "Dashboard", FormMethod.Post))
{
    //hide dashboard ID which gets passed in veiwbag
   <input id='DashboardID' name='DashboardID' value='@ViewBag.DashboardID' hidden="hidden"/>
   <input id='AreaName' name='AreaName' value='@ViewBag.AreaName' hidden="hidden"/>

   <table border="0">
      <tr style ="vertical-align:Top">
          <td style ="vertical-align:top">
           <h5>Select Agent: </h5>
             @(Html.Kendo().DropDownList()
                  .Name("AID")
                  .Value("Select a Queue...") // need to set this at runtime
                  .DataTextField("AName")
                  .DataValueField("AID")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetA", "ASummary", new { area = "Reports" });
                      });
                  })
            )
            @*@Html.ValidationMessageFor(r=>r.AID)*@
        </td>
        <td style ="vertical-align:top">
        </td>
         <td style ="vertical-align:top">
        </td>
   </table>
    <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Include These Fields: &#8595;
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
              <table border="0">
               <tr>
                <td style ="vertical-align:top">
                    <input type="checkbox" name="Include" value="LAST_UPDATE" checked />Last Updated<br />
                    <input type="checkbox" name="Include" value="STATUS" checked />Status<br />
                    <input type="checkbox" name="Include" value="REASON" checked />Reason<br />
                </td>
                <td>
                </td>
                <td style ="vertical-align:top">
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <p>
    <input type="submit" value="Cancel" name="AWidget" /> 
    <input type="submit" value="Create" name="AWidget" />
    </p>
}

Why does the k-invalid-msg span on a multiselect validator not line up like on any other control?

Testing.html
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<div id="editform"></div>
<script>
var editWindow;
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: [{ name: "edit", text: "", click: showEdit }, { name: "destroy"}], title: "&nbsp;", width: "160px"}]
});
});
function showEdit(e) {
e.preventDefault();
editWindow = $("#editform")
.kendoWindow({
title: "Edit Test",
modal: true,
visible: false,
resizable: false,
width: 960,
content: { url: "EditTemplate.htm" }
}).data("kendoWindow");
$("#editform").closest(".k-window").css({
top: 10,
left: 10
});
editWindow.open();
}
</script>
<style scoped>
body
{
font-family: 'Century Gothic';
font-size: 11px;
}
</style>
</body>
</html>


EditTemplate.html

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div id="addRule-div">
<div>
<label for="LoanProduct" class="control-label">Loan Products:</label>
<div>
<select style="width:450px;" id="LoanProduct" name="LoanProduct" multiple="multiple" data-placeholder=" " required validationMessage="Loan Product required.">
<option>Test</option>
<option>Testing</option>
</select>
<span class="k-invalid-msg" data-for="LoanProduct"></span>
</div>
</div>
<div>
<label for="Title" class="control-label">Title:</label>
<div>
<input style="width:450px;" id="Title" name="Title" class="k-textbox" required validationMessage="Title is required." />
<span class="k-invalid-msg" data-for="Title"></span>
</div>
</div>
<div>
<div>
<button id="addRule-Button" class="k-button" type="submit">Add Rule</button>&nbsp;
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#LoanProduct").kendoMultiSelect().data("kendoMultiSelect");
var validator = $("#addRule-div").kendoValidator().data("kendoValidator");
$("#addRule-Button").click(function () {
if (validator.validate()) {
console.log("validate");
}
});
});
</script>
</body>
</html>

Hi All,

I am trying to save the image captured from the camera to the database, i am using Jquery Ajax call with JSONP,  when the image data is very large the request is not caught by the webservice on the server side . I have researched a lot on this changing the maximum request length and maxjsonlength values in the web config, but still i found no solution for this . Also i came across a post saying to send the data in packets but the implementation part was not mentioned in the post.   Please someone guide me on this as it is has taken a lot of time already.

Thanks

Gaja Naik

Hello,

I'm very interested in using Kendo UI for my upcoming project. However, i have two needs that need to be met. I would like to figure out how to integrate them into my test project. For my test project, I'm just altering the index.html in the examples/web/grid directory. Within this grid, I need to support:

1. Double-Clicking on a row. When someone double-clicks on a row, I want to just show an an alert window that says "Hello", just to see it working.
2. Context-Menu on a row. When someone right-clicks on a row, I need to show a popup menu. I know this won't work in touch-based environments. But we're building a desktop solution and context-menu is a requirement, not an option :(.