Grid data source and handling columns

[Benjamin Foord]

Evening,

I am new to Lightswitch and Syncfusion (and javascript, oh my :) ), and have been trying to get the Grid working for Lightswitch HTML. I have a SQL Server database set up as an external data source, and I am trying to figure out how to work with some of the other Syncfusion features, such as the DatePicker. The application is very simple so far, just a Screen with a editable Grid for data entry and some of the toolbar buttons enabled.

Firstly: I was wondering if the way I have hooked up the data is the preferred way when dealing with an application like this one, or is it too much trouble working with a collection in that way?

and also related to this: How do I go about inserting a DatePicker into an existing column inside a Grid? I can make the Grid work, and I can make the DatePicker work, but not together. 

I can display the columns and the data with "columns: fieldname", but I am not sure how to deal with each individual column within the collection without breaking that link. I can do something like "columns: [ { field: "startDate", headerText: "Start Date" } ]", but that appears to create new columns rather than using the ones I already have in the collection from the SQL database. I am missing something obvious I am sure, any advice in the right direction would be much appreciated. 

Here is the code in my lsml.js code for my Screen:

/// <reference path="~/GeneratedArtifacts/viewModel.js" />

myapp.ProjectsGridTemplate.Timesheets_render = function (element, contentItem) {

    // Write code here.

    var itemTemplate = $("<div></div>").attr('id', 'Timesheets')

 

    // Append the div element to screen

    itemTemplate.appendTo($(element));

 

    contentItem.value.oncollectionchange = function () {

 

        if (itemTemplate.hasClass('e-grid')) {

            itemTemplate.ejGrid('destroy');

        }

        var first = contentItem.children[0], fieldname = [];

        for (i = 0; i < first.children.length; i++) {

            fieldname[i] = { field: first.children[i].valueModel.name };

        }

 

        //Rendering the Grid Control

        itemTemplate.ejGrid(

            {

                dataSource: contentItem.value.data,

 

                actionComplete: function (args) {

 

                    if (args.requestType == "save")

 

                        myapp.applyChanges();

 

                },

 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" },

 

                allowPaging: true,

 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

 

                columns: fieldname

            }

                               

        );

    }

}

Thanks very much,

Benjamin

[Benjamin Foord]

Hi again,

Making a little progress, my 'columns:' code now looks like this. I can now see the DatePicker when I click into the cell, but I have no actual DatePicker button on the right hand side of the cell. Also, when I select a Date from the DatePicker, the cell then goes blank when I click away from it. If I save changes using the toolbar button, the newly selected Date will reappear in the cell.

The other issue I have found was 'args.requestType == "save"' had to be changed to "batchsave" in order to save changes I have made to existing rows. However, if I add a new row and enter data, it will save quite happily, but does not actually make it into the database. And next time I run the application, the newly entered rows are gone

columns: [

     { field: "TimeID" },

     { field: "Project_Detail_ID" },

     { field: "c_Date", headerText: "Date", editType: ej.Grid.EditingType.DatePicker },

     { field: "Hours" },

     { field: "Work_Detail", headerText: "Work Detail"}

[Madhu Sudhanan P]

Hi Benjamin,

Thanks for using Syncfusion products.

Please find the response.

Query #1: “I was wondering if the way I have hooked up the data is the preferred way when dealing with an application like this one”

Essential Grid will works well with either JSON collection or remote datasource. And it`s our choice to select the mode of data source to the ejGrid. If you want to deal with large number of records then we will suggest you to use the load on demand concept for improved performance using pagination or virtual scrolling in grid in which current page data will be queried.

Please refer the below link for using Databinding in grid.

http://help.syncfusion.com/ug/lightswitch/index.html#!Documents/databinding2.htm

Query #2: “I can display the columns and the data with "columns: fieldname", but I am not sure how to deal with each individual column within the collection without breaking that link.”

In our grid`s screen template, we will generate the column collection from the contentItem of the screen and provided it to the grid. You can also provide the columns to the grid directly if they are predefined.  And you can use the following way to customize the column at the generation time itself.

for (i = 0; i < first.children.length; i++) {

       

        var fieldName = first.children[i].valueModel.name;

        fieldname[i] = { field: fieldName };

       

        if (fieldName == "c_Date")

         $.extend(fieldname[i], { headerText:"Date", editType:ej.Grid.EditingType.DatePicker, width: 70 });

    }

Query #3: “I have no actual DatePicker button on the right hand side of the cell”

By default, the pop up button will be disabled in DatePicker that appear while editing. To enable this, we can set the showPopupButton button of the DatePciker  and it can be done using editParams property of the column as follows.

columns: [

         . . . . .

{ field: "c_Date", headerText: "Date", editType: ej.Grid.EditingType.DatePicker, editParams: { showPopupButton: true } },

],

Query #4: “when I select a Date from the DatePicker, the cell then goes blank when I click away from it. If I save changes using the toolbar button, the newly selected Date will reappear in the cell”

We have analyzed the reported issue and we are unable to reproduce the issue. And we have checked the issue against our Essential Studio v13.2.0.29  and its working fine at our end. And so could you please provide us more information regarding the issue such as screenshot or video.

Query #5: “The other issue I have found was 'args.requestType == "save"' had to be changed to "batchsave" in order to save changes”

In the code snippet provided, you have enabled batch editing and the requestType will be batchsave in the actionComplete event on batch save operation completed.
 

actionComplete: function(args) {

                    if(args.requestType == "batchsave"){

                    //Do something

                    }                   
                }

Please refer the below link for the events that are associated with grid.

http://helpjs.syncfusion.com/js/api/ejgrid#events

Query #6: “if I add a new row and enter data, it will save quite happily, but does not actually make it into the database”

In the code snippet you have bound the grid with the visual collection and we cannot directly add item to the visual collection through grid since values from the grid editing are just JSON object and not visual collection. To achieve this, we can use the following way to add the item in visual collection during grid add opertion.

myapp.OrdersGridEditingTemplate.Order_render = function (element, contentItem) {

    // Write code here.

    var itemTemplate = $("<div></div>").attr('id', 'Order');

    //Have a global flag for add

    window.isAdd = false;

   

    // Append the div element to screen

    itemTemplate.appendTo($(element));

  

    var first = contentItem.children[0], fieldname = [];

    for (i = 0; i < first.children.length; i++) {

        fieldname[i] = { field: first.children[i].valueModel.name };

    }

    fieldname[0].isPrimaryKey = true;

    //Rendering the Grid Control

    itemTemplate.ejGrid(

        {

            dataSource:contentItem.value.data,

            editSettings: { allowEditing: true, allowAdding: true, editMode:"batch" },

            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add,"edit", ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

            columns: fieldname,

            beforeBatchAdd: function (args) {

                window.isAdd = true;

            },

            actionComplete: function (args) {

                

                if (args.requestType == "batchsave") {

                    if (window.isAdd)

                        window.isAdd = false;

                    myapp.activeDataWorkspace.ApplicationData.saveChanges().then($.proxy(function () {

                        this.refreshContent();

                    }, this));

                 

                    myapp.applyChanges();

                }

            },

            beforeBatchSave: function (args) {

                /*Creating a new entity while adding new records and map the value

                 * Example Shown for one added data only*/

                if (window.isAdd) {                  

                    var data = new myapp.Order();

                    data.CustomerID = args.batchChanges.added[0]["CustomerID"];

                    data["EmployeeID"] = args.batchChanges.added[0]["EmployeeID"];

                    args.batchChanges.added[0] = data;

                }

            },

           

        });

    contentItem.value.oncollectionchange = function () {

        var gridObj;

        /*Important - Used to prevent the oncollectionchange

           action on adding new record to vs collection*/

        if (window.isAdd) return;

        if (itemTemplate.hasClass('e-grid')) {

            gridObj = itemTemplate.ejGrid('instance');

        }

       

        var first = contentItem.children[0], fieldname=[];

        for (i = 0; i < first.children.length; i++) {

            fieldname[i] = { field: first.children[i].valueModel.name };

        }

        fieldname[0].isPrimaryKey = true;

       if(gridObj) { /*Public method to update columns and dataSource*/

           gridObj.columns(fieldname);

           gridObj.dataSource(contentItem.value.data);                     

         }

    }
}

Please refer the highlighted section from the above code in which the record is added to the visual collection manually and saved the changes in actionComplete event using applyChanges. Now the added data from the grid will be persisted in database.

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P