Scheduler on .NET MVC is not working

5 posts, 0 answers
  1. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 04 Oct Link to this post

    Hi, I'm implementing a Scheduler in .NET using MVC. The scheduler runs on top of Jquery. But my code is not working. I needed to try if I can use my own data, so I wrote my own controller method to retrieve data from a database and return it in JSON and not JSONP since it's all running on the same host. My view is as follows.

    Index.cshtml
    @{
        ViewBag.Title = "Index";
    }
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.timezones.min.js"></script>
    <h2>Index</h2>
    <div id="example">
        <div id="team-schedule">
            <div id="orders">
                <input checked type="checkbox" id="order1" aria-label="Order 1" value="200023">
                <input checked type="checkbox" id="order2" aria-label="Order 2" value="200027">
                <input type="checkbox" id="order3" aria-label="Order 3" value="200033">
            </div>
        </div>
        <div id="scheduler"></div>
    </div>
    @section SchedulerScripts{
       
            <script>
                $(document).ready(function() {
                    $("#scheduler").kendoScheduler({
                        date: new Date("2013/6/13"),
                        startTime: new Date("2013/6/13 07:00 AM"),
                        height: 600,
                        views: [
                            "day",
                            { type: "workWeek", selected: true },
                            "week",
                            "month",
                            "agenda",
                            { type: "timeline", eventHeight: 50}
                        ],
                        timezone: "Etc/UTC",
                        dataSource: {
                            batch: true,
                            transport: {
                                read: {
                                    url: "http://localhost:51329/Scheduler/SchedulerJSONData",               //This is the URL to retrieve my JSON data. Scheduler is the //controller where the SchedulerJSONData method is implemented.
                                    dataType: "json"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            schema: {
                                model: {
                                    id: "orderId",
                                    fields: {
                                        orderNo: { from: "ORDER_NO" },
                                        releaseNo: { from: "RELEASE_NO" },
                                        operationNo: { from: "OPERATION_NO" },
                                        start: { type: "date", from: "OP_START_DATE" },
                                        end: { type: "date", from: "OP_FINISH_DATE" },
                                        description: { from: "OPERATION_DESCRIPTION" },
                                    }
                                }
                            },
                            filter: {
                                logic: "or",
                                filters: [
                                    { field: "orderNo", operator: "eq", value: '200023' },
                                    { field: "orderNo", operator: "eq", value: '200027' },
                                    { field: "orderNo", operator: "eq", value: '200033' },
                                ]
                            }
                        },
                        resources: [
                            {
                                field: "orderNo",
                                title: "Order",
                                dataSource: [
                                    { text: "Order 1", value: '200023', color: "#f8a398" },
                                    { text: "Order 2", value: '200027', color: "#51a0ed" },
                                    { text: "Order 3", value: '200033', color: "#56ca85" }
                                ]
                            }
                        ]
                    });
                    $("#orders :checkbox").change(function(e) {
                        var checked = $.map($("#orders :checked"), function(checkbox) {
                            return parseInt($(checkbox).val());
                        });
                        var scheduler = $("#scheduler").data("kendoScheduler");
                        scheduler.dataSource.filter({
                            operator: function(task) {
                                return $.inArray(task.orderNo, checked) >= 0;
                            }
                        });
                    });
                });
            </script>
       
        }

    My controller method to retrieve data from the database is as follows.

    public ActionResult SchedulerJSONData() {
                con.Open();                                                         //con is my database connection string.
                OleDbDataAdapter oda = new OleDbDataAdapter("SELECT ORDER_NO, RELEASE_NO, OPERATION_NO, OP_START_DATE, OP_FINISH_DATE, OPERATION_DESCRIPTION FROM SHOP_ORDER_OPERATION_TAB where ORDER_NO='200023' OR ORDER_NO='200027' OR ORDER_NO='200033'", con);
                DataTable dt = new DataTable();
                oda.Fill(dt);
                string JSONString = string.Empty;
                JSONString = JsonConvert.SerializeObject(dt);
                return Json(JSONString, JsonRequestBehavior.AllowGet);
            }

    This method returns the JSON data correctly, but when I plug the URL in bold above to retrieve the JSON in the scheduler, it doesn't work. Can anyone figure out what I have done wrong?

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 06 Oct Link to this post

    Hello Mohomed,

    I have used the provided code sample to prepare a sample ASP.NET MVC solution, which you can find as an attached file. 

    With it, the Scheduler initializes as expected and is properly populated with the server data. Important to note is that in this case the received data from the server is in the format: {"Data":[ {}, {}, {} ]}. If this is the case, then we need to specify the field from the server response which contains the data items in the Scheduler configuration through the schema.data() option:
    schema: {
      model: {                     
        id: "taskId",
        fields: {
          taskId: { from: "TaskID", type: "number" },
          title: { from: "Title"
          start: { type: "date", from: "Start" },
          end: { type: "date", from: "End" },                          
          ownerId: { from: "OwnerID" }                                                  
        }
      },
      data: "Data"
    }

    Please inspect the solution and try to integrate it in your project. In case the issue continues to persist, you can modify the solution, so that the problem is reproduced and then send it back to us for a review.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 09 Oct in reply to Dimitar Link to this post

    Thank you, my scheduler is working without any errors.

    Also, can you please explain how options like update, create, destroy work. My issue is whether they edit the data all the way up to the data source, i.e. the database or do they just edit a data structure like a JSON array in the memory. I came across a demo in your documentation but they don't clarify how they work.

    update: {
         url: "https://demos.telerik.com/kendo-ui/service/tasks/update",                            
         dataType: "jsonp"
     },
     create: {
         dataType: "jsonp"
     },
     destroy: {
         dataType: "jsonp"
     },
  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 10 Oct Link to this post

    Hello Mohomed,

    The DataSource component can work with local data or remote data. In both cases the CRUD operations are managed by the Kendo UI DataSource transport. This is a JavaScript object that can be configured to make requests to predefined URLs.

    CRUD operations with remote data rely on server code to perform the read, update, create and destroy actions. Instead of configuring client functions, the dataSource transport defines remote service URLs and the expected format in which data should be sent and received. For example, the read transport configuration sends an ajax request to the server to retrieve the data that is needed to populate the widget. 

    More information and examples can be found in the CRUD Data Operations Article.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 10 Oct in reply to Dimitar Link to this post

    Thank you, I needed this.
Back to Top