Help with jQuery SlickGrid

**szlamany** · Apr 1st, 2011, 05:23 AM

Well - I just spent an hour trying to "re-do" all of yesterdays work - argh!!

All of a sudden my rows stopped showing - I tried to step into the slick grid and debug it - seeing that one row had made it into the HTML but for some reason not showing...

I usually save "full copies" of the web folder several times a day so that if I break something I can simply revert back and WINDIF my way back to a working app.

Didn't do that all day yesterday and needed to slowly re-do each edit - argh!!

You and I are pretty much at the same point - I'm not ready to do save logic because my build logic needs to mature further...

At any rate - here's the top of my page if you need to see my dep's. The slickgrid css files are required as well...

Code:

<head runat="server">
    <title></title>
<&#37;--    <link href="themes/start/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />--%>
    
    <link href="themes/custom-theme/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
    <link href="slick.grid.css" rel="stylesheet" type="text/css" />
    <link href="examples.css" rel="stylesheet" type="text/css" />
    <link href="slick-default-theme.css" rel="stylesheet" type="text/css" />
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<%--    <link href="themes/cupertino/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.5.js"></script>
    <script src="Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
--%>
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
    
    <script src="Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jqia2.support.js" type="text/javascript"></script>

    <script src="Scripts/jquery.event.drag-2.0.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.event.drop-2.0.min.js" type="text/javascript"></script>
    
    <script src="Scripts/slick.editors.js" type="text/javascript"></script>

    <script src="Scripts/slick.grid.js" type="text/javascript"></script>

**Nitesh** · Apr 1st, 2011, 06:00 AM

sorry you lost your progress

that suck big time. I'll post my progress as I go along so we can help each other out since we are at the same point

**Nitesh** · Apr 6th, 2011, 04:49 AM

hey szlamany,

I've been making steady progress so far. I needed a dropdownlist column and I noticed it wan't built into the grid. So I edited slick.editors.js.

I'm no js guru, but this might help you

Code:

DropdownCellEditor : function(args) {
            var $select;
            var defaultValue;
            var scope = this;
           
            //alert(args);
            var dataObj = $.parseJSON(args.column.data);
             //console.log(dataObj);
             
           
            this.init = function() {
                $select = $("<SELECT tabIndex='0' class='editor-dropdown'></SELECT>");
                var objCombo = $select; 
                
                              
                 for (var i = 0; i < dataObj.length; i++)
                    {
                    
                    //alert(dataObj[i].id);
              		//objCombo.append(new Option(dataObj[i].value.toString(), dataObj[i].id));
                     objCombo.append($('<option></option>').attr('value', dataObj[i].ID.toString()).text(dataObj[i].Value.toString()) )
   
                    }
             
                $select.appendTo(args.container);
                $select.focus();
            };

            this.destroy = function() {
                $select.remove();
            };

            this.focus = function() {
                $select.focus();
            };

            this.loadValue = function(item) {
            //console.log(item[args.column.field]); 
                $select.val((defaultValue = item[args.column.field]));
                $select.select();
            };

            this.serializeValue = function() {
                return ($select.val() == "yes");
            };

            this.applyValue = function(item,state) {
       
                item[args.column.field] = $select.find(':selected').text();
            };
           
            this.isValueChanged = function() {
                return ($select.val() != defaultValue);
            };

            this.validate = function() {
                return {
                    valid: true,
                    msg: null
                };
            };

            this.init();
        },

then when you specify the columns in the grid you do this:

Code:

			{id:"priority", name:"Priority", field:"priority", width:80, selectable:false, editor: DropdownCellEditor, data: $.toJSON(ddlData), resizable:false},

I added a data property above. ddlData is an array of data in JSON format which is passed to the DropdownCellEditor.

To populate the ddlDataArray from my database I did this:

Code:

$.when(combo()).done(function (combo_data) {
//                 console.log(grid_data);
                 ddlData = combo_data.d;
                     
                     });   
                     
                     
                           
            function combo() {               
             return $.ajax({                    
                  type: "POST",
                  url: "TopicsGrid.aspx/GetPriorities",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",                   
                        success: function (combo_data) {                    
                        }                
                        });            
                     }

the ajax call is made to a PageMethod which looks like this:

Code:

<WebMethod()> _
Public Shared Function GetPriorities() As List(Of Priorities)

        Dim dt As New DataTable
        Dim strCon As String = System.Configuration.ConfigurationManager.ConnectionStrings("DB").ConnectionString
        Dim PriorityList

        Try

            Using con As New SqlConnection(strCon)


                Dim cmd As New SqlCommand("SELECT ID, Description FROM [Task_Priority] WHERE Active = 1")
                cmd.Connection = con

                con.Open()
                Dim reader As SqlDataReader = cmd.ExecuteReader

                dt.Load(reader)

                PriorityList = (From row In dt.AsEnumerable() _
                       Let Id = row.Field(Of Integer)("ID") _
                       Let value = row.Field(Of String)("Description") _
                       Select New Priorities(Id, value) _
                With {.ID = Id, .Value = value}).ToList()

                con.Close()
                reader.Close()
                cmd.Dispose()



            End Using

        Catch ex As Exception
            dt = Nothing
        End Try


        Return PriorityList
    End Function

**szlamany** · Apr 6th, 2011, 04:59 AM

Thank you so much - that is something I'm going to need in the next day or two.

I've spent the past few days getting the "source", "options" and "columns" of my slickgrids to be read from my webservice/json feed. Working nicely.

I am putting several slickgrids in different TAB's. I'm going to have to disable buttons and tabs when in edit mode - seems you can leave grids in a bad state in other tabs - just starting to work through these issues.

Not sure if I want EDIT and SAVE buttons...

**Nitesh** · Apr 6th, 2011, 05:34 AM

no prob

let me know if you hit any snags with the dropdownlist code. Glad to hear you are making progress. I've got my grid displaying, also I grouped the data and I implemented the composite editor like in the composite_editor example.

I've done an AJAX call to save the data as well.

So my rows contain Tasks grouped by Topic. I am able to edit each task. Now I need to be able to add a New Topic. I'm still trying to figure out the best possible route

**szlamany** · Apr 6th, 2011, 05:37 AM

jQuery does modal pop-ups nicely - if you have just a couple of fields to ask for to do your add that could work.

**Nitesh** · Apr 6th, 2011, 05:46 AM

thanks. I will look into it

Thread: Help with jQuery SlickGrid

Thread Tools

Display

Hybrid View

Re: Help with jQuery SlickGrid

Re: Help with jQuery SlickGrid

Re: Help with jQuery SlickGrid

Re: Help with jQuery SlickGrid

Re: Help with jQuery SlickGrid

Re: Help with jQuery SlickGrid

Re: Help with jQuery SlickGrid

Posting Permissions