Questions on Kendo UI for jQuery Forum

5 answers

1.6K+ views

KendoMultiSelect returning [object Object]

I am pretty new to kendo and have been trying to get the multi select working for a little while with no final success.

I have got the dropdown widget working perfectly and I can switch out the drop down for a multiselect and visually it works but when it goes to save the data back to the datasource in the View Model it returns [object Object].

I have set the data-value-primitive = 'true' but am really a bit stuck. Is there something simple that I am missing.

MultiSelect

answered on 19 Sep 2014

3 answers

201 views

Different UICulture and Culture

We have decided to move over to Kendo components.

The localization requirement is basically the same as standard .NET.

Culture for dates,numeric and so on.
UICulture for text.

The reason for it is that our clients must display amounts in currency NOK(nb-NO) since their data is NOK and not selectable, but they can select either nb-NO or other like for example en-GB as text.
In Sweden and other countries it is the local currency there, but the text is also UICulture is selectable.
Is that possible?

Regards
Ole Oscar Johnsen

General Discussions

answered on 19 Sep 2014

2 answers

215 views

Button group / radio buttons for kendo UI web

Hello,

I have been looking high and low for a simple radio button / button group control for Kendo UI Web, but cannot seem to find any such control. I do see it for the mobile version, but I rather not mix in the mobile controls for a Web app.

Is there no radio group / button group control for the web version?

If not:
1) Is there an ETA for such a control?
2) Do you happen to have a workaround for accomplishing something like a radio group / button group (themed like everything else)?

Thanks,
Lars

General Discussions

answered on 19 Sep 2014

1 answer

284 views

Grid with popup editing at the cell level

Hi,

I'm looking to have popup style editing in a grid, but at the cell, not the row level. So instead of having an per row edit button that would launch the popup, I'd like to launch it by clicking on a cell. When not being editing, the value displayed in the cell would come from a formatting function/template/etc I provide. When being editing the popup displayed should also be a template or something like that, which I can control.

I'm not too worried about the data binding part, if it's possible to do this without kendo doing the data binding, as long as there are hooks, I can handle that myself.

Is this possible, if so, how?

thanks,
andy

Grid

answered on 19 Sep 2014

5 answers

289 views

How to connect draggable with sortable.

Hi ,

I need to implement a functionality where an item dragged from treeview should be dropable in to a sortable list .

There can be many sortable lists and the source of draggable item can be list or static elements on the page.

When i checked connectWith option in sortable, it didnt work.

is there any other configuration needed?

pls help me resolve this.

Thanks,

Drag and Drop

answered on 19 Sep 2014

3 answers

572 views

[Solved] Done/success bar persisting for Upload beyond window close/reopen

I'm using Kendo UI (in IE9 on server, local dev in IE11, using async but not drag and drop) to upload PDF specification sheets for products in an order. The PDFs are displayed in a Kendo Grid, with an icon on each row displaying their status. Sometimes a document may go missing or become out of date, so the user can click on the status icon to open up a Kendo window on top of the grid that allows them to upload a file to replace the missing/out of date reference. Therefore, it is likely that they will upload one, close the window, move to another row, and upload another (and so on). Only single file upload is supported for this reason.

On the first window open event, everything works fine. The file is uploaded, stored appropriately, and the "done" bar pops up (underneath the button, which may or may not be a UX problem -- see attached image). However, when the window is closed and then reopened, the success/done bar persists, even if the user hasn't uploaded a second file yet. This remains no matter where you travel in the website, unless your entire session ends and restarts.

Things I've tried:
--destroying the window that the upload DOM is in
--destroying the upload DOMremoving the upload DOM (can't get it to come back though)
--emptying the files from the upload DOM
--removing the CSS class associated with the list of successful file uploads
--destroying every CSS class associated with the uploader onSuccess (for the upload) and onClose (for the window)

I think what would work would be to create a new "instance" of the uploader every time the window opens, but I'm not sure how to do that.

The JS code for the window/uploader is very primitive:

001.var DocAdd = function () {

002.

003. openAddDocumentWindow = function () {

004.

005. var w = $("#addWindow");

006. var f = $("#files");

007.

008. kendo.ui.Upload.fn._supportsDrop = function () { return false; } //prevents Done bar from getting bigger and bigger each time the window opens...why is that? Only happens in IE11

009.

010. f = $("#files").kendoUpload({

011. //options

012. async: {

013. saveUrl: "EditSubmittal.aspx",

014. autoUpload: true

015. },

016. error: addControllerOnUploadError,

017. upload: addControllerOnUpload,

018. multiple: false,

019. showFileList: false,

020. });

021.

022. //constructs window

023. w = $("#addWindow").kendoWindow({

024. title: "Add Document",

025. pinned: true,

026. draggable: false,

027. resizable: false,

028. actions: [

029. "Close"

030. ],

031. modal: true,

032. close: onClose,

033. open: function (e) {

034. var refHeight = $(window).innerHeight();

035. this.setOptions({

036. width: 500,

037. height: 250

038. });

039. },

040. });

041.

042. w.data("kendoWindow").open().center();

043.

044. }; //end function openEditDocumentWindow

045.

046.

//=========================================================================================================================

047. // Function addControllerOnUpload

048. //

049. // This function will contain the main logic for the file upload process.

050.

//=========================================================================================================================

051. function addControllerOnUpload(e) {

052.

053. if (e.files[0].extension !== ".pdf") {

054. e.preventDefault();

055.

056. //also validate size if possible

057. addControllerOnUploadError(e);

058. }

059. else {

060. //get access to the files here.

061. //future dev, get JSON data. Codebehind handles upload logic.

062. }

063. }

064.

//=========================================================================================================================

065. // Function addControllerOnUploadError

066. //

067. // This function will run if the file upload is a failure.

068.

//=========================================================================================================================

069. function addControllerOnUploadError(e) {

070.

071. var msg = "Document upload failed. Make sure that your file is a .pdf document and try again.";

072.

073. kendo.ui.ExtAlertDialog.show({

074. title: SUB_GEN_MSG_TITLE,

075. icon: "k-ext-information",

076. message: msg,

077. width: "600px",

078. height: "100px",

079. attributes: {

080. "align": "center"

081. },

082. });

083. }

084.

085.

//=========================================================================================================================

086. // Function onClose

087. //

088. // This function is a test to get rid of persisting upload data

089.

//=========================================================================================================================

090. function onClose() {

091.

092. //SOME OF THE STUFF I'VE TRIED TO GET RID OF DONE/SUCCESS BAR ON REOPEN

093.

094. //kendo.destroy("#files");

095. //kendo.destroy("#addWindow");

096. //$(".k-upload-files").empty();

097. //$(".k-widget k-upload k-header").kendo.destroy();

098.

099. // Destroy widget and detach events

100. //$("#files").data("kendoUpload").destroy();

101.

102. // Remove widget element from DOM

103. //$("#files").closest(".k-upload").remove();

104. //$(".k-file .k-file-success").find("li").remove();

105. }

106.

107. return {

108. openAddDocumentWindow: openAddDocumentWindow

109. };

110.}();

The markup for creating the window and the uploader is also very basic (sorry about the <br><br> eyesore and inline styling...will be changed):

01.<div id="addWindow" style="display:none;height:100%; ">

02. <div id="addWindowTopPane" style="overflow:hidden;">

03. <div id="addWindowMain" style="overflow:hidden;">

04. <form method="post" action="/kendo-ui/upload/submit">

05. <div style="text-align:center; margin-top: 65px;">

06. <label id="allowedFileTypeMsg">Allowed file types are: .pdf </label>

07. </br></br>

08. <input id="files" name="files" type="file"/>

09. </div>

10. </form>

11.

12. </div>

13. </div>

14.</div>

In review, questions/problems:

1) How do I get a "fresh" instance of the uploader with no success/done rows on each window open event?
2) Why does this success/done row show up behind my "Select Files" button?

Attachments:

FirstTimeOpeningBeforeUpload.png: Shows the upload window when it is first clicked in the session. This is what it should look like every time the window opens.

EveryOtherTimeWindowIsOpenedAfterFirstUpload.png: Self explanatory. Also shows the done row behind the button...why is that?

ExampleDOMExplorerF12.png: Shows the markup dynamically created at runtime for the uploader, in case destroying DOM elements by class is the way to go.

Upload

answered on 19 Sep 2014

12 answers

2.0K+ views

[Solved] setting variable Max value in NumericTextBox cell

@(Html.Kendo().Grid<OurToolsAdminDesk.Models.MyBusinessRules>()

.Name("items-grid")

.Columns(columns =>

{

columns.Bound(e => e.ID).Visible(false);

columns.Bound(e => e.WebFormattedName).Title("Product").Width(200);

columns.Bound(e => e.Description).Title("Description").Width(250);

columns.Bound(e => e.IncrementAmount).Title("IncrementAmount").Width(85).Title("Quantities Available");

columns.Bound(e => e.Increments)

.Format("{0:n)}")

.Width(75)

.Title("Add to Order")

.ClientTemplate(Html.Kendo().NumericTextBox<int>()

.Name("increment_#=Increments#").Value(0)

.Min(0)

.Max(100) // .Max("#=MaxValue#") does not work

.Step(1)

.Events(ev => ev.Change("incrementsChanged"))

.ToClientTemplate().ToHtmlString());

})

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

model.Id(p => p.ID);

model.Field(p => p.ID).Editable(false);

model.Field(p => p.WebFormattedName).Editable(false);

model.Field(p => p.Description).Editable(false);

model.Field(p => p.IncrementAmount).Editable(false);

model.Field(p => p.Available).Editable(false);

model.Field(p => p.Increments).Editable(true).DefaultValue(0);

})

.Read(read => read.Action("GetAvailableItems", "Admin").Data("additionalData"))

.Update(update => update.Action("UpdateOrders", "Admin").Data("extraData"))

)

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Sortable()

.Navigatable()

.Resizable(resize => resize.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

)

Grid

answered on 19 Sep 2014

2 answers

311 views

Default Values of Model Post as NULL

Hi everyone

I am pretty new to MVC and Kendo. I have a ViewModel containing List<> Items I am using to create drop downs etc.

When I submit the form to the controller, the fields I specify "@(Html.Kendo().DatePickerFor(m => m.ReportCriteria.DateEnd)" etc returns a value via the model.

But the List<> items etc are passed as empty?

I would have though that the values begin passed in initially would stay preserved in the model on a post?

Any advice?

Thank you.

General Discussions

answered on 19 Sep 2014

4 answers

809 views

[Solved] Manually trigger the resize event of the toolbar

How do I trigger the resize event of the toolbar after hiding buttons or Template type items in the toolbar?

This does not seem to work:

$("#TheToolBar").data("kendoToolBar").resize();

The only way to trigger the overflow items to show up is to size the window manually

Toolbar

answered on 19 Sep 2014

5 answers

408 views

kendoui grid header filtering like devexpress filtering (and like excel)

hi, we're evaluating the MVC kendoUI against devexpress mvc components and we're leaning towards the kendoUI set, apart from one thing...

The filtering of data in deveexpress example here is a drop down with checkboxes for which items to filter on per column:
http://mvc.devexpress.com/GridView/Filtering

I can't see that this is possible currently with kendoUI? you have the option to filter outside of the table here:
http://demos.kendoui.com/web/grid/toolbar-template.html

but really we need this in the column headers, as checkboxes (like excel)

Any pointers? is there a hack to do this, or plans to implement? It's frustrating as its the one thing stopping us jumping in head first!

thanks

nathan

Grid

answered on 19 Sep 2014