Results 1 to 40 of 45

Thread: Help with jQuery SlickGrid

Hybrid View

  1. #1
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Help with jQuery SlickGrid

    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>

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  2. #2

    Thread Starter
    PowerPoster Nitesh's Avatar
    Join Date
    Mar 2007
    Location
    Death Valley
    Posts
    2,556

    Re: Help with jQuery SlickGrid

    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

  3. #3

    Thread Starter
    PowerPoster Nitesh's Avatar
    Join Date
    Mar 2007
    Location
    Death Valley
    Posts
    2,556

    Re: Help with jQuery SlickGrid

    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

  4. #4
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Help with jQuery SlickGrid

    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...

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5

    Thread Starter
    PowerPoster Nitesh's Avatar
    Join Date
    Mar 2007
    Location
    Death Valley
    Posts
    2,556

    Re: Help with jQuery SlickGrid

    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

  6. #6
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Help with jQuery SlickGrid

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

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  7. #7

    Thread Starter
    PowerPoster Nitesh's Avatar
    Join Date
    Mar 2007
    Location
    Death Valley
    Posts
    2,556

    Re: Help with jQuery SlickGrid

    thanks. I will look into it

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width