Questions on Kendo UI for jQuery Forum

1 answer

345 views

Calling Asp.Net Web Api in Kendo UI html page

Dear All,

I have created the web api and deployed it.in the html page using the kendo Ui

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

    
    <script src="js/jquery.min.js"></script>
    
    <script src="js/kendo.all.min.js"></script>

    <title>Dashboard</title>
</head>
<body>

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

        <div class="grid-wrapper">

            <div id="grid"></div>

            <script>
                var remoteDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:2704/api/employee",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                FirstName: { type: "string" },
                                LastName: { type: "string" }
                            }
                        }
                    }

                });

                $("#grid").kendoGrid({
                    dataSource: remoteDataSource,
                    height: 200
                });

            </script>
        </div>

        <div class="table-wrapper">
            <div id="divResult">

                <script>
                    function GetAllProducts() {
                        jQuery.support.cors = true;
                        $.ajax({
                            url: 'http://localhost:2704/api/employee',
                            dataType: 'jsonp',
                            success: function (data) {
                                WriteResponse(data);
                            },
                        });
                    }
                    function WriteResponse(products) {
                        var strResult = "<table><th>ID</th><th>FirstName</th><th>LastName</th>";
                        $.each(products, function (index, product) {
                            strResult += "<tr><td>" + product.Id + "</td><td> " + product.FirstName + "</td><td>" + product.LastName + "</td></tr>";
                        });
                        strResult += "</table>";
                        $("#divResult").html(strResult);
                    }

                    $(document).ready(function () {
                        GetAllProducts();
                    });
                </script>
            </div>
        </div>
    </div>

</body>"

im calling the the api the response headers are empty.when i access the api it is working fine.Can anyone help how to intergerate the web api with the Kendo UI html pages.

General Discussions

answered on 30 Oct 2013

3 answers

113 views

IE tries to download Json result

Hi,
I convert my MVC project to use Kendo UI. I have action result return simple Json object status with message if there is an error. It was working fine before I convert.
now it tries IE tries to download the Json, Firefox and Chrome will show it as text.

here is my code. I add ("text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet) I was hoping it will fix it but it didn't

return Json(new { Success = true }, "text/html", System.Text.Encoding.UTF8,
JsonRequestBehavior.AllowGet);

return Json(new { Success = false, Message = formPost.Message }, "text/html", System.Text.Encoding.UTF8,
JsonRequestBehavior.AllowGet);

form

Ajax.BeginForm(new AjaxOptions { OnSuccess = "handleModalSubmit" })

JS

function handleModalSubmit(result) {

if (result.Success) {
alert("Your request was sent Successfully");

}
else {
alert("There was problem sending your request");

}
}

Here is my Kendo include files

<link href="@Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/kendo/2013.2.918/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

General Discussions

answered on 30 Oct 2013

1 answer

62 views

Event is incorrectly displayed, when showing business hours

Hi,
There's a bug in scheduler, which can be easily reproduced with your online demos.
- Choose the basic usage demo.
- Doubleclick an event, to get into edit mode
- Change the start Time to 5pm and the end Time to 7pm.
- Save the event.
- Click "show business hours"
As a result, the event is displayed throughout the whole day.
Any chance, to get a fix for that?

Scheduler

answered on 30 Oct 2013

2 answers

425 views

Cannot get MultiSelect to retain values with MVVM

I am using the Multiselect widget along with Kendo MVVM. The tags are stored in an object that is saved to the database, this works fine when creating things.

But when retrieving them is a different story. I can add tags again, that is also fine, but when the item loads in from the database, it won't properly show the existing tag items that belong in the multiselect. So let's say I pull up an item with two tags. . { "Id": "tags/1", "Name" : "C#" }{ "Id" : "tags/2", "Name" : "Kendo UI" } .. these are not persisted into the multi-select box.

$widget = $element.kendoMultiSelect({

dataTextField: "Name",

dataValueField: "Id",

// define a custom template

dataSource: {

transport: {

read: {

dataType: "json",

url: $url

}

},

open: function (e) {

this.list.addClass("tag-cloud");

},

close: function (e) {

//e.preventDefault();

},

value: viewModel.get("Tags")

}).data("kendoMultiSelect");

<div style="width: 500px;">

<h2 class="fg-color-blueDeep">Tags</h2>

<div class="input-control" data-for="tags">

<select id="tags" multiple="multiple"

data-placeholder="Select Tags..."

class="dark tag-cloud"

data-bind="value: Tags"

style="width: 500px;"></select>

</div>

MultiSelect

answered on 29 Oct 2013

1 answer

120 views

Custom Editor with Inline Editing

Hi,

I am building a grid with inline editing and custom editors. I am wondering how to set the value of a field in this scenario. I don't think I want to use model.set in the change handler of my control, because I don't want to commit the data until the user clicks the "Save" button. Do I have to handle the save and cancel events myself to commit the entered data to the model (or not in the case of a cancel)? Or is there a built-in way to do this?

Thanks,
Steve

Grid

answered on 29 Oct 2013

2 answers

1.7K+ views

e.model.isNew()

Hi,

I am using the e.model.isNew() to change the Title of the popup depending on whether Edit or Save is pressed.
That's working fine, I am however having an issue with then pressing the edit button to the added item.
The pop up is shown but with "Add", not "Edit" as the title.

If I refresh the page then it works as expected.

Code:
function onEdit(e) {
if (e.model.isNew()) {
// add
$(".k-window-title").text("Add");
} else {
// edit
$(".k-window-title").text("Edit");
}

}

Is there a way on the save event to specify that the model is no longer new?

function onSave(e) {
// set the model no longer as new ??

}

Grid

answered on 29 Oct 2013

3 answers

1.8K+ views

Remove grouping programmatically ?

Is it possible to remove the grid grouping programmatically?

Grid

answered on 29 Oct 2013

5 answers

384 views

CRUD Create and Update Firing Twice

I'm using CRUD for my scheduler with an aspx web service. For the create and update event I am returning the created/updated event with the identifier in the json response, yet it is firing a second time as though something failed. The response from the service is OK, so I'm not sure what could be causing this.

What can I look at in the create/update complete event to tell if it added/updated the event? Or is there a check somewhere in the javascript that if failed will cause it to fire again where I can put a break point and see what is happening?

Thanks.

Scheduler

answered on 29 Oct 2013

1 answer

772 views

Show all columns programmatically?

I have a grid that I have added the ColumnMenu to that allows the user to pick which columns they would like to see. I am creating a "Reset" button that will restore the grid to its original state. How do I reshow ALL of the columns that are part of the datasource?

I need to somehow have an "ALL" because this grid is being built dynamically and different users will have different columns so I can't hard code the values in here...

Basically I just need to have something like this...

...
var grid = $('#ListAccountsGrid').data('kendoGrid');
grid.showColumn('ALL or *');
...

Anyone have any ideas?

Grid

answered on 29 Oct 2013

2 answers

32 views

How to find the grid in which the event occured

Hi,
I have multiple grids on a page which share the same change function. Is there a way to find which grid has triggered the event. I need to get the id of that grid and I am using plain HTML and jquery to implement all the grids.
Regards,
Vijay

Grid

answered on 29 Oct 2013