Scheduler on .NET MVC is not working

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

    Posted 04 Oct 2017 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
    796 posts

    Posted 06 Oct 2017 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 2017 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
    796 posts

    Posted 10 Oct 2017 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 2017 in reply to Dimitar Link to this post

    Thank you, I needed this.
  6. Fevzi
    Fevzi avatar
    3 posts
    Member since:
    Jun 2012

    Posted 18 Mar 2019 in reply to Dimitar Link to this post

    Hi,

    In the example here, you talk about a request made to Read method, which is not a big deal.

    However, when I do a post request to a method in my local web api aster filling in the scheduler data, the request finds the method but the data I get is "null".  I am using asp.net core. How can I get the "options.models" data which seems to be stringfied. It is all null for me. What might be the problem?

    Frank.

  7. Dante Marcuccio
    Dante Marcuccio avatar
    12 posts
    Member since:
    Jun 2004

    Posted 19 Mar 2019 in reply to Fevzi Link to this post

    public JsonResult Create([Bind(Prefix = "models")]string data){
       var items = JsonConvert.DeserializeObject<List<model>>(data);
    }

     

    This should give you your data from the stringify data to a list of models

  8. Fevzi
    Fevzi avatar
    3 posts
    Member since:
    Jun 2012

    Posted 19 Mar 2019 in reply to Dante Marcuccio Link to this post

    Hi Dante,

    Thank  you for your reply.

    I have not tried your solution yet but I did yesterday something similar and It also worked.

    What I did: I  first figured out I would bind the data posted to a string type variable  and cast it to a generic list of my model class as in your solution when deserializing. However,  as the model binding attribute I used "[FromForm]...  "create( [FromForm] string data)" ; no other attribute would work. I will also use your suggestion of [Bind(Prefix="models")]  and see what happens.

    Thanks

    Fevzi

     

  9. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 19 Mar 2019 Link to this post

    Hello Fevzi,

    Dante is indeed correct that you should be able to use the [Bind(Prefix="models")] to bind the incoming form to an instance of your model. Refer to the following StackOverflow thread for additional information on the same topic:


    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top