Questions on Kendo UI for jQuery Forum

8 answers

1.5K+ views

Can't refresh modal window after closing.

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: ↓
          </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>
}

Window

answered on 28 Aug 2013

3 answers

408 views

Multiselect k-invalid-msg span alignment

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: " ", 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> 
</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>

MultiSelect

answered on 28 Aug 2013

2 answers

538 views

[Solved] Cannot send large data like base64 image string using JsonP

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

General Discussions

answered on 28 Aug 2013

28 answers

1.3K+ views

[Solved] Advanced row-level operations with KendoUI

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:

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.
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 :(.

Is it possible to do these? If so, how do you do it on the example grid?

Thank you!

Grid

answered on 28 Aug 2013

7 answers

438 views

Is having a drop down list in a nested grid possible?

I'm trying to incorporate a drop down list in a nested grid using the mvc3 wrappers, is this feasible if so does anyone have an example using the mvc wrappers? I keep getting a js error saying User is undefined.

Here is what my grid looks like :

<div style="width: 95%; margin-left: auto; margin-right: auto;">
@(Html.Kendo().Grid<ConfigProject>()
.Name("projects-grid")
.Columns(c =>
{
c.Bound(m => m.Name);
c.Bound(m => m.Id);
c.Bound(m => m.Description);
c.Command(command =>{command.Edit(); command.Destroy(); }).Width(170);
})
.ToolBar(toolbar=>toolbar.Create())
.Editable(editable=>editable.Mode(GridEditMode.PopUp))
.Scrollable()
.Pageable()
.Sortable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("ProjectsRead","ConfigEditor",new {Area="Config"}))
.Create(create => create.Action("CreateProject", "ConfigEditor",new {Area="Config"}))
.Update(update => update.Action("ProjectUpdate", "ConfigEditor",new {Area="Config"}))
.Destroy(destroy => destroy.Action("ProjectDestroy", "ConfigEditor",new {Area="Config"}))
)
.ClientDetailTemplateId("detail-template")
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:550px;" })
)
</div>

<script id="detail-template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Config Settings").Content(@<text>
@(Html.Kendo().Grid<ConfigSetting>()
.Name("projects-setttings_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Key);
columns.Bound(o => o.Value);
columns.Bound(o => o.Description);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(8)
.Model(model => model.Id(cs => cs.Key))
.Read(read => read.Action("GetConfigsForProject", "ConfigEditor", new { Area="Config", projectID = "#=Id#" }))
.Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area="Config", projectID="#=Id#"}))
.Update( update => update.Action("EditSettings", "ConfigEditor", new{Area="Config",projectID="#=Id#"}))
.Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new {Area ="Config",projectID="#=Id#"}))
)
.Events(e=>e.Edit("readonlyifyKey"))
.Resizable(resize => resize.Columns(true))
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);

items.Add().Text("Authorized Users").Content(@<text>
@(Html.Kendo().Grid<ConfigAdminUserModel>()
.Name("projects-AdminUsers_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.UserId).Visible(false);
columns.Bound(o => o.User).ClientTemplate("#=User.UserName#");
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(cs => cs.UserId);
model.Field(cs => cs.UserId).Editable(false);
model.Field(cs => cs.User).DefaultValue(
ViewData["defaultUser"] as ConfigAdminUser);
})
.Read(read => read.Action("AdminUserRead", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
.Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
.Update(update => update.Action("EditSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
.Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);


items.Add().Text("Team Contact Information").Content(
"<div class='team-contact-details'>" +
"<ul>" +
"<li><label>Name: </label>#= Team.Name #</li>" +
"<li><label>Description: </label>#= Team.Description #</li>" +
"<li><label>Email: </label>#= Team.Email #</li>" +
"<li><label>Pager: </label>#= Team.Pager #</li>" +
"</ul>" +
"</div>"
);
})
.ToClientTemplate())
</script>

Grid

answered on 28 Aug 2013

1 answer

79 views

[Bug Report] 2013.2.716 DataViz widgits cause exception on input validation

Hi,

I found exception thrown if a DataViz widget is included in a validation div. The error thrown is:

Uncaught TypeError: Object #<SVGAnimatedString> has no method 'indexOf'

I tracked the source code: line 11448 in kendo.all.js:

if (element.className.indexOf(INVALIDMSG) > -1) {

For the SVG object representing chart, element.className does not have method of "indexOf".

I changed it to this to avoid the issue:

if (element.className.indexOf && element.className.indexOf(INVALIDMSG) > -1) {

Here is my test page (modified from online demo), also attached.

<!DOCTYPE html>

<html>

<head>

<title>Kendo UI Chart with Input Validation Issue</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">

</head>

<body>

<div id="example" class="k-content">

<div class="chart-wrapper">

<div id="chart"></div>

</div>

<label for="name">Name: </label>

<input type="text" id="name" required />

<span class="k-invalid-msg" data-for="name"></span>

<button id="test">Test</button>

</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.dataviz.min.js"></script>

<script>

(function($){

function createChart() {

$("#chart").kendoChart({

title: {

text: "Site Visitors Stats /thousands/"

},

legend: {

visible: false

},

seriesDefaults: {

type: "bar"

},

series: [{

name: "Total Visits",

data: [56000, 63000, 74000, 91000, 117000, 138000]

}, {

name: "Unique visitors",

data: [52000, 34000, 23000, 48000, 67000, 83000]

}],

valueAxis: {

max: 140000,

line: {

visible: false

},

minorGridLines: {

visible: true

}

},

categoryAxis: {

categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],

majorGridLines: {

visible: false

}

},

tooltip: {

visible: true,

template: "#= series.name #: #= value #"

}

});

}

$(document).ready(function(){

var validator = $('#example').kendoValidator().data('kendoValidator');

createChart();

$(document).bind("kendo:skinChange", createChart);

$('#test').on('click', function(e){

alert('validation: ' + validator.validate());

});

})(jQuery);

</script>

<style scoped>

.chart-wrapper, .chart-wrapper .k-chart {

height: 350px;

}

</style>

</body>

</html>

Regards,

Gong

Charts

answered on 28 Aug 2013

1 answer

301 views

label for form elements

How do I have my form input elements "kendo styled" without having to add then to a <ul><li> element and how do I have the label on top?

http://docs.kendoui.com/getting-started/mobile/forms says that most form elements are supported and styled if added to a mobile view.
However, only if I add form input elements into a <ul><li> hierarchy are they styled automatically:

Styled:
<div data-role="view" data-layout="layout1" data-title="Sign in" id="signin-view">
<ul data-role="listview" data-style="inset">
<li>
<label>Username<input id="txtUsername" type="text" data-bind="value: username" /></label>
</li>

Not styled:
<div data-role="view" data-layout="layout1" data-title="Sign in" id="signin-view">
<input id="txtUsername" type="text" data-bind="value: username" />

General Discussions

answered on 28 Aug 2013

1 answer

293 views

Convert DateTime to Date for Listview group header

Hi,

I am binding a Listview to a service which has a datetime field through a DataSource. I'd like to use the date part of that field as the group header of the list view items so that items with same date value are grouped under the same header. How can I set the DataSource's group property to date part of this field only (group by date only) ?

Regards
Ron Farko

ListView

answered on 28 Aug 2013

1 answer

188 views

Is Data access to the server side synchronous or asynchronous?

Or can it be configured to be either? (We are just trialing the Kendo package at the moment)

This applies to both fetching data and posting back changes.

Thanks
Myles.

Data Source

answered on 28 Aug 2013

3 answers

1.8K+ views

How to attach custom parse and format functions to a grid column?

Hi,
I am new to Kendo.

We have different settings for parsing and formatting data types on the server irrespective of the browser locale(culture). I have custom parsing and formatting code to display the values on the UI.

I am not finding a way to hook up custom parse and format function to the grid column. I am wondering if this is possible?

If this is possible then please point me to the example or the documentation which describes how to do this?

Thanks in advance.

Regards
Vishwa Salgia

Grid

answered on 28 Aug 2013