Page 1 of 2 12 LastLast
Results 1 to 40 of 45

Thread: Help with jQuery SlickGrid

  1. #1

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

    Help with jQuery SlickGrid

    Hi Guys,

    I'm trying to populate the slickGrid with an ajax call.

    Code:
    <script type="text/javascript" >
             $(document).ready(function() {
    		 var params = {};
    
    		    params.strMeetingID = '3';
    		   		    
    		     $.ajax({
    		          type: "POST",
                      url: "TopicsGrid.aspx/GetTopicsTable",
                      data: $.toJSON(params),
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function(message){
                        
                                                               
                      },
                      error: function(errormessage){
                        alert(errormessage.statusText);
                      }
                    });
    	
    		});
    my function returns a datatable. But I need to convert the datatable to JSON. please help.

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

    Re: Help with jQuery SlickGrid

    You need to make the JSON on the server side - that's what you transmit from your webservice.

    When a button is clicked to load the grid

    Code:
    function update(webParam, sender) {
        var senderddtype = $(sender).data("ddtype");
        var lastddtype = $(window).data("lastddtype");
        webParam.fromddtype = lastddtype;
        webParam.fromwho = $(window).data("ddtype" + lastddtype);
        var xyz = $.toJSON(webParam);
        $.ajax({
            type: "POST",
            url: "WebService.asmx/HelloWorld",
            dataType: "json",
            data: xyz, //$.toJSON(webParam), //"{ObText:'" + webParam + "'}",
            contentType: "application/json; charset=utf-8",
            success: function(msg) {
                updateFinished(msg, sender);
            },
            failure: function(msg) {
                updateFinished(msg, "failure");
            },
            error: function(msg) {
                updateFinished(msg, "error");
            }
        });
    }
    That webservice spits out this JSON string

    Code:
    {
        "StuName": "xxxxx, Anne",
        "rowcount": "2",
        "source": [
            {
                "VisitDate": "11/30/2009",
                "VisitTime": "0117",
                "PrimaryComplaint": "General malaise "
            },
            {
                "VisitDate": "02/08/2010",
                "VisitTime": "0930",
                "PrimaryComplaint": "General malaise "
            }
        ]
    }
    And that is eaten up by the updateFinished call just like this

    Code:
    function updateFinished(msg, sender) {
        returnObj = $.parseJSON(msg.d);
        if (sender === "bootpage") {
            var didbootbln = false;
    .
    .
    .
        } else {
            $("#acs-info").html("");
            if (sender == "error") {
                $("#acs-info").html("Error:");
            } else if (sender == "failure") {
                $("#acs-info").html("Failure:");
            }
            $("#acs-info").html($("#acs-info").html() + returnObj.StuName);
            var grid;
    
            var columns = [
    	    { id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: TextCellEditor },
            { id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: TextCellEditor },
            { id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, editor: TextCellEditor },
    		];
    
            var options = {
            editable: false,
            enableAddRow: false,
                enableCellNavigation: true,
                asyncEditorLoading: false
            };
    ...
    And that returnObj object actually contains all those arrays and objects and works right into the JS code

    Code:
    ...
            var $tabs = $('#tabset').tabs();
            var selected = $tabs.tabs('option', 'selected') + 1; // => 0[edit]
            var panelstr = "#panel" + selected;
            grid = new Slick.Grid($(panelstr), returnObj.source, columns, options);
            grid.onCellChange = function(currentRow, currentCell, item) {
            alert(currentRow + ":" + currentCell + "> key=" + item['VisitDate'] + ", value=" + item['VisitTime']); 
            };

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

  3. #3

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

    Re: Help with jQuery SlickGrid

    Thanks. please tell me what i'm doing wrong.

    Code:
    <script type="text/javascript" >
             $(document).ready(function() {
                    
                     var params = {};
    
    		    params.strMeetingID = '3';
    		   		    
    		     $.ajax({
    		          type: "POST",
                      url: "TopicsGrid.aspx/GetTopicsTable",
                      data: $.toJSON(params),
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function(message){
                        
                         updateFinished(message);                    
                                                                       
                      },
                      error: function(errormessage){
                        alert(errormessage.statusText);
                      }
                    });
                
    		}); 
    		
    		function updateFinished(msg) {
            returnObj = $.parseJSON(msg.d);
           
                  alert(returnObj); 
                var grid;
    
                	var columns = [
    			{id:"sel", name:"#", field:"MeetingID", behavior:"select", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, selectable:false },
    			{id:"Topic", name:"Topic", field:"Topic", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, sortable:true},
    			{id:"Task", name:"Task", field:"Task", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor,  sortable:true},
    			{id:"Required", name:"Required", field:"Required", minWidth:60, editor:DateCellEditor, sortable:true},
    		];
    
    		var options = {
    			editable: false,
    			enableAddRow: false,
    			enableCellNavigation: false,
    			asyncEditorLoading: true,
    			forceFitColumns: false,
                topPanelHeight: 25,
                enableColumnReorder: false
    		};
    
             grid = new Slick.Grid("#myGrid", returnObj.source, columns, options);
            
            $("#myGrid").show();
    
    }
    		
            </script> 
    </head>
    Here is my PageMethod:

    Code:
    <WebMethod(True)> _
        Public Shared Function GetTopicsTable(ByVal strMeetingID As String) As String
            Dim strCon As String = System.Configuration.ConfigurationManager.ConnectionStrings("ITDB").ConnectionString
            Dim dt As New DataTable
            Dim jsonString As String = String.Empty
            Try
    
                Using con As New SqlConnection(strCon)
    
                    If Not String.IsNullOrEmpty(strMeetingID) Then
    
                        Dim cmd As New SqlCommand("SELECT MeetingID, Topic, Task, DateRequired FROM [v_Meeting_Topics_Tasks] WHERE MeetingID = @MeetingID")
                        cmd.Connection = con
                        cmd.Parameters.AddWithValue("@MeetingID", strMeetingID)
    
                        con.Open()
                        Dim reader As SqlDataReader = cmd.ExecuteReader
    
                        dt.Load(reader)
    
                        Dim TopicList = (From row In dt.AsEnumerable() _
                                Let MeetingID = row.Field(Of Long)("MeetingID") _
                                Let Topic = row.Field(Of String)("Topic") _
                                Let Task = row.Field(Of String)("Task") _
                                Let Required = row.Field(Of DateTime?)("DateRequired") _
                                Select New Meeting(MeetingID, Topic, Task, Required) _
                         With {.MeetingID = MeetingID, .Topic = Topic, .Task = Task, _
                         .DateRequired = Required}).ToList()
    
                        jsonString = JsonConvert.SerializeObject(TopicList)
    
    
                        con.Close()
                        reader.Close()
                        cmd.Dispose()
    
                    End If
    
                End Using
    
            Catch ex As Exception
                dt = Nothing
            End Try
    
            Return jsonString
        End Function
    the data returned is this:

    Code:
    [{"MeetingID":3,"Topic":"test","Task":"Task 1 dfgd","DateRequired":"\/Date(1276812000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 2","DateRequired":"\/Date(1276812000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 4","DateRequired":"\/Date(1277244000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 5","DateRequired":"\/Date(1277244000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 11","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Test 12","DateRequired":"\/Date(1277848800000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"sss","DateRequired":"\/Date(1278367200000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"ssssss","DateRequired":"\/Date(1278367200000+0200)\/"},{"MeetingID":3,"Topic":"ww","Task":"Task 3","DateRequired":"\/Date(1276812000000+0200)\/"},{"MeetingID":3,"Topic":"ww","Task":"Task 6","DateRequired":"\/Date(1277330400000+0200)\/"},{"MeetingID":3,"Topic":"ww","Task":"Task 13","DateRequired":"\/Date(1277848800000+0200)\/"},{"MeetingID":3,"Topic":"dwsds","Task":"Test 10","DateRequired":"\/Date(1277676000000+0200)\/"},{"MeetingID":3,"Topic":"dwsds","Task":"Test 12","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"dwsds","Task":"sdfdf","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"Test New","Task":"vfvfb","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"hmm","Task":"dsss","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"hmm","Task":"gf bf","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"patpoo","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"byronpoo","Task":"dfdf","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"byronpoo","Task":"xc","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"GaryPoo","Task":"Task 7","DateRequired":"\/Date(1277416800000+0200)\/"},{"MeetingID":3,"Topic":"NicPoo","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"Poo","Task":"sda","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"dssd","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"dsdsddsew","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"sss","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"ew","Task":"cscs","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"ew","Task":"dsds","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"ffdfdf","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"q","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"a","Task":"sss","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"a","Task":"qqqq","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"www","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"we","Task":"ww","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"eee","Task":"sss","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"ssss","Task":"trt","DateRequired":"\/Date(1278367200000+0200)\/"},{"MeetingID":3,"Topic":"ssss","Task":"dsddsds","DateRequired":"\/Date(1278453600000+0200)\/"}]
    I get an error saying data is undefined in slick.grid.js

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

    Re: Help with jQuery SlickGrid

    Seems you are missing some dependencies - what error are you seeing in the Firebug CONSOLE window?

    Lots of css and lib files are required - and it's poorly documented.

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

    hey szlamany,

    I think I've added all the dependencies. I'm able to add columns etc. Just the population part is throwing the error. When I alert(returnObj) I get this:

    Code:
    [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
    I think that's where the problem is. How do i get to the actual values?

    my returned JSON is this:

    Code:
    {"d":"[{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 1 dfgd\",\"DateRequired\":\"\\/Date(1276812000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 2\",\"DateRequired\":\"\\/Date(1276812000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 4\",\"DateRequired\":\"\\/Date(1277244000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 5\",\"DateRequired\":\"\\/Date(1277244000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 11\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Test 12\",\"DateRequired\":\"\\/Date(1277848800000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"sss\",\"DateRequired\":\"\\/Date(1278367200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"ssssss\",\"DateRequired\":\"\\/Date(1278367200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ww\",\"Task\":\"Task 3\",\"DateRequired\":\"\\/Date(1276812000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ww\",\"Task\":\"Task 6\",\"DateRequired\":\"\\/Date(1277330400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ww\",\"Task\":\"Task 13\",\"DateRequired\":\"\\/Date(1277848800000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dwsds\",\"Task\":\"Test 10\",\"DateRequired\":\"\\/Date(1277676000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dwsds\",\"Task\":\"Test 12\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dwsds\",\"Task\":\"sdfdf\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"Test New\",\"Task\":\"vfvfb\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"hmm\",\"Task\":\"dsss\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"hmm\",\"Task\":\"gf bf\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"poo\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"poo\",\"Task\":\"dfdf\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"poo\",\"Task\":\"xc\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"GPoo\",\"Task\":\"Task 7\",\"DateRequired\":\"\\/Date(1277416800000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"Poo\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"Poo\",\"Task\":\"sda\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dssd\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"dsdsddsew\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"sss\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"ew\",\"Task\":\"cscs\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ew\",\"Task\":\"dsds\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ffdfdf\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"q\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"a\",\"Task\":\"sss\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"a\",\"Task\":\"qqqq\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"www\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"we\",\"Task\":\"ww\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"eee\",\"Task\":\"sss\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ssss\",\"Task\":\"trt\",\"DateRequired\":\"\\/Date(1278367200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ssss\",\"Task\":\"dsddsds\",\"DateRequired\":\"\\/Date(1278453600000+0200)\\/\"}]"}
    does my JSON format look correct?

    Firebugs console gives me this error:

    Code:
    data is undefined
    http://localhost:50643/VB.Net/Javascript/slick.grid.js
    Line 976

  6. #6

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

    Re: Help with jQuery SlickGrid

    oops my bad

    I had:

    grid = new Slick.Grid("#myGrid", returnObj.source, columns, options);

    .source is in your JSOn and not mine. Sorry.

    My grid is populated now. but the date values aint pulling through

    Still a long way to go in terms of what I need but I'm getting there slowly. thanks for all your help

    also, howcome I can't do thsi:

    Code:
    alert(returnObj.MeetingID);
    I get undefined

    I guess I have to loop through the values because it's an array.

    Also, what's the Dataview for? I've seen the example but can't make sense of it. How will I be able to propogate changes in the grid through to my datatbase??

    oh no my grid gets populates in FireFox but in IE 8 I get an error seems IE doesn't like my JSON formatting. Do you see any issues with my format?
    Last edited by Nitesh; Mar 31st, 2011 at 03:14 AM.

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

    Re: Help with jQuery SlickGrid

    Notice where you have double quotes around your values that should be arrays - that's a problem

    Notice in my JSON I do not have those quotes.

    The JSON is an actual representation of the JS object - so quoting will turn what should be an {} object or an [] array into a string.

    Code:
    {
        "StuName": "xxxxx, Anne",
        "rowcount": "2",
        "source": [
            {
                "VisitDate": "11/30/2009",
                "VisitTime": "0117",
                "PrimaryComplaint": "General malaise "
            },
            {
                "VisitDate": "02/08/2010",
                "VisitTime": "0930",
                "PrimaryComplaint": "General malaise "
            }
        ]
    }
    When in firebug you hover over the object and you can see if it's looking stringy or object/array-like.

    The edit example from the slickgrid site has dates - look how he does the json for those.

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

  8. #8

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

    Re: Help with jQuery SlickGrid

    good spot. I'm not sure how I fix this though. My function returns a string. I use a dll called Newtonsoft to serialise the JSON:
    Code:
     <WebMethod(True)> _
        Public Shared Function GetTopicsTable(ByVal strMeetingID As String) As String
            Dim strCon As String = System.Configuration.ConfigurationManager.ConnectionStrings("ITDB").ConnectionString
            Dim dt As New DataTable
            Dim jsonString As String = String.Empty
            Try
    
                Using con As New SqlConnection(strCon)
    
                    If Not String.IsNullOrEmpty(strMeetingID) Then
    
                        Dim cmd As New SqlCommand("SELECT MeetingID, Topic, Task, DateRequired FROM [v_Meeting_Topics_Tasks] WHERE MeetingID = @MeetingID")
                        cmd.Connection = con
                        cmd.Parameters.AddWithValue("@MeetingID", strMeetingID)
    
                        con.Open()
                        Dim reader As SqlDataReader = cmd.ExecuteReader
    
                        dt.Load(reader)
    
                        Dim TopicList = (From row In dt.AsEnumerable() _
                                Let MeetingID = row.Field(Of Long)("MeetingID") _
                                Let Topic = row.Field(Of String)("Topic") _
                                Let Task = row.Field(Of String)("Task") _
                                Let Required = row.Field(Of DateTime?)("DateRequired") _
                                Select New Meeting(MeetingID, Topic, Task, Required) _
                         With {.MeetingID = MeetingID, .Topic = Topic, .Task = Task, _
                         .DateRequired = Required}).ToList()
    
                        jsonString = JsonConvert.SerializeObject(TopicList)
    
    
                        con.Close()
                        reader.Close()
                        cmd.Dispose()
    
                    End If
    
                End Using
    
            Catch ex As Exception
                dt = Nothing
            End Try
    
            Return jsonString
        End Function
    when I hover over the jsonString variable it has those outer quotes what do you use to generate your JSON string?

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

    Re: Help with jQuery SlickGrid

    Wrote my own json builder. Actually someone who works for me created it and I've been hacking it to make the [] and {} objects work.

    Google for jsonwriter - you will find lots of source examples.

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

  10. #10

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

    Re: Help with jQuery SlickGrid

    this is turning into a nightmare. I even tried this function to convert a datatable to JSON but I'm having the same issues:
    Code:
     Public Shared Function datatableToJSON(ByVal dt As DataTable) As String
            Dim jsonStringBuilder As New StringBuilder()
            Dim jsonStringWriter As New StringWriter(jsonStringBuilder)
    
            Dim jsonWriter As JsonWriter = New JsonTextWriter(jsonStringWriter)
    
            If dt IsNot Nothing AndAlso dt.Rows.Count > 0 Then
                jsonWriter.Formatting = Formatting.None
    
                jsonWriter.WriteStartArray()
                For i As Integer = 0 To dt.Rows.Count - 1
                    jsonWriter.WriteStartObject()
                    For j As Integer = 0 To dt.Columns.Count - 1
                        jsonWriter.WritePropertyName(dt.Columns(j).ColumnName.ToString().ToLower())
                        jsonWriter.WriteValue(dt.Rows(i)(j).ToString())
                    Next
                    jsonWriter.WriteEndObject()
                Next
                jsonWriter.WriteEndArray()
    
                Return jsonStringBuilder.ToString()
            Else
                Return Nothing
            End If
        End Function

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

    Re: Help with jQuery SlickGrid

    I'm using this - it's hacked a bit but it's working for me

    Code:
    Imports Microsoft.VisualBasic
    
    Public Class JsonWriter
    
        Dim JsonString As String = ""
        Dim DidStartArray As Boolean = False
    
        'There are objects and arrays
        'object has this format "Name":"Value"
        'an object can have an array of values, ie ["Val1","Val2","Val3"]
        'this function should generate all that
        Public Sub StartObject()
            JsonString = JsonString + "{"
        End Sub
        Public Sub EndObject()
            JsonString = JsonString + "}"
        End Sub
        Public Sub StartArray()
            JsonString = JsonString + "["
            DidStartArray = True
        End Sub
        Public Sub EndArray()
            JsonString = JsonString + "]"
        End Sub
    
    
        Public Sub NameObject(ByVal Name As String)
            JsonString = JsonString + Chr(34) + Name + Chr(34) + ":"
        End Sub
        Public Sub ValueObject(ByVal Value As String)
            JsonString = JsonString + Value
        End Sub
    
    
        Public Sub NewObject(ByVal Name As String, ByVal Value As String)
            If (Value.ToString.StartsWith("{") And Value.ToString.EndsWith("}")) Or (Value.ToString.StartsWith("[") And Value.ToString.EndsWith("]")) Then
                JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Value.ToString()
            Else
                JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Chr(34) + Value.ToString() + Chr(34)
            End If
        End Sub
        Public Sub NewObject(ByVal Name As String, ByVal Value As Object, ByVal UseQuotes As Boolean)
            If UseQuotes = False Then
                JsonString = JsonString + Name + ":" + Value.ToString()
            ElseIf UseQuotes = True Then
                If Value.ToString.StartsWith("{") And Value.ToString.EndsWith("}") Then
                    JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Value.ToString()
                Else
                    JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Chr(34) + Value.ToString() + Chr(34)
                End If
            End If
        End Sub
    
        Public Sub NewArray(ByVal Name As String, ByVal Value As Array)
            NewArray(Name, Value, True)
        End Sub
        Public Sub NewArray(ByVal Name As String, ByVal Value As Array, ByVal UseQuotes As Boolean)
            NameObject(Name)
            StartArray()
            For i As Integer = 0 To Value.Length - 1
                If i > 0 Then
                    JsonString = JsonString + ","
                End If
                If UseQuotes = False Or (Value(i).ToString.StartsWith("{") And Value(i).ToString.EndsWith("}")) Then
                    JsonString = JsonString + Value(i).ToString()
                ElseIf UseQuotes = True Then
                    JsonString = JsonString + Chr(34) + Value(i).ToString() + Chr(34)
                End If
            Next
            EndArray()
        End Sub
        Public Sub PushArray(ByVal Value As String, ByVal UseQuotes As Boolean)
            If DidStartArray Then
                DidStartArray = False
            Else
                JsonString = JsonString + ","
            End If
            If UseQuotes = False Then
                JsonString = JsonString + Value.ToString()
            ElseIf UseQuotes = True Then
                JsonString = JsonString + Chr(34) + Value.ToString() + Chr(34)
            End If
        End Sub
        Public Sub Seperate()
            JsonString = JsonString + ","
        End Sub
    
        Public Function GetJson() As String
            Return JsonString
        End Function
    
        Public Sub ResetJson()
            JsonString = ""
        End Sub
    
    End Class
    It's filled like this

    Code:
        <WebMethod()> _
        <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False)> _
        Public Function OperatorService(ByVal toddtype As String, ByVal fromddtype As String, ByVal fromwho As String) As String
            'Return "<b>This is the content of resource <tt>someResource</tt></b>"
            Dim JsonMaker As JsonWriter = New JsonWriter
    
            With JsonMaker
                .StartObject()
                Dim NeedColsBln As Boolean = True
                Dim NeedNameBln As Boolean = True
                Dim SettingColsBln As Boolean = False
                Try
                    Using dcn As New SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings("LocalSQLServer").ToString)
                        Using cmd As New SqlCommand
                            cmd.CommandType = CommandType.StoredProcedure
                            cmd.CommandText = "dbo.awc_StudentVisits"
                            cmd.Connection = dcn
                            cmd.Parameters.AddWithValue("@StuId", fromwho)
                            dcn.Open()
                            Using readerSDR As SqlDataReader = cmd.ExecuteReader
                                Dim RowCounterInt As Integer = 0
                                Do
                                    Dim JsonMaker2 As JsonWriter = New JsonWriter
                                    While readerSDR.Read
                                        If readerSDR.GetName(0).StartsWith("acs-") Then
                                            SettingColsBln = True
                                            If NeedColsBln Then
                                                .NewObject(readerSDR.GetName(0), readerSDR(0).ToString)
                                                .Seperate()
                                                NeedColsBln = False
                                                .NameObject("cols")
                                                .StartArray()
                                            Else
                                                .PushArray(readerSDR(1).ToString, False)
                                            End If
                                        Else
                                            SettingColsBln = False
                                            If NeedNameBln Then
                                                .NewObject(readerSDR.GetName(0), readerSDR(0).ToString)
                                                .Seperate()
                                                NeedNameBln = False
                                            End If
    
                                            With JsonMaker2
                                                If RowCounterInt = 0 Then
                                                    .StartArray()
                                                Else
                                                    .Seperate()
                                                End If
                                                .StartObject()
                                                For i As Integer = 0 To readerSDR.FieldCount - 1
                                                    .NewObject(readerSDR.GetName(i), readerSDR(i).ToString)
                                                    If i < readerSDR.FieldCount - 1 Then .Seperate()
                                                Next
                                                .EndObject()
                                                RowCounterInt += 1
                                            End With
                                        End If
                                    End While
                                    If SettingColsBln Then
                                        .EndArray()
                                        .Seperate()
                                    Else
                                        JsonMaker2.EndArray()
    
                                        .NewObject("rowcount", RowCounterInt.ToString)
                                        .Seperate()
                                        .NewObject("source", JsonMaker2.GetJson())
                                    End If
                                Loop While readerSDR.NextResult
                            End Using
                        End Using
                    End Using
                Catch ex As Exception
                    .ResetJson()
                    .StartObject()
                    .NewObject("%%dalerror%%", ex.Message)
                End Try
                .EndObject()
            End With
    
            Return JsonMaker.GetJson()
    
        End Function
    And you spend a lot of time validating the JSON here

    http://www.jsonlint.com/

    before wasting your time seeing if the JS will eat it up...

    This code is currently being worked on by me - but it created this JSON very nicely for me just a moment ago

    Code:
    {
        "acs-work": "slickgrid",
        "cols": [
            {
                "id": "VisitDate",
                "name": "VisitDate",
                "field": "VisitDate",
                "width": "120",
                "cssClass": "cell-title",
                "editor": "TextCellEditor" 
            },
            {
                "id": "VisitTime",
                "name": "VisitTime",
                "field": "VisitTime",
                "width": "100",
                "editor": "TextCellEditor" 
            },
            {
                "id": "PrimaryComplaint",
                "name": "PrimaryComplaint",
                "field": "PrimaryComplaint",
                "width": "100",
                "editor": "TextCellEditor" 
            }
        ],
        "StuName": "xxxxx",
        "rowcount": "2",
        "source": [
            {
                "StuName": "xxxxxx",
                "VisitDate": "11/30/2009",
                "VisitTimeIn": "0117",
                "PrimaryComplaint": "General malaise "
            },
            {
                "StuName": "xxxxxx",
                "VisitDate": "02/08/2010",
                "VisitTimeIn": "0930",
                "PrimaryComplaint": "General malaise "
            }
        ]
    }
    Of course this is what it looks like after the JSON validator website both VALIDATES it and RE-FORMATS it for visual review.

    Use the link to validate - it saves lots of time.

    Keep in mind that I'm crazy - I'm actually passing all the slickgrid info - column names and everything - from my DATABASE. I like to create "extensible" applications - ones that can change with just a tweak to a control table in my DB.

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

  12. #12
    PowerPoster gep13's Avatar
    Join Date
    Nov 2004
    Location
    The Granite City
    Posts
    21,963

    Re: Help with jQuery SlickGrid

    So, not to hijack the thread too much, but szlamany how are you finding this approach working out for you, rather than using the standard ASP.Net Controls?

    Nitesh, from the link I posted in your other thread, here is a complete sample application that might help you:

    http://archive.msdn.microsoft.com/JSONSampleDotNet

    Gary

  13. #13

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

    Re: Help with jQuery SlickGrid

    thanks szlamany and Gary szlamany you have been a great help

    guys, my JSON format wasn't the issue. It was actually a slickGrid bug. The last column created has an id attribute which is null. This is in slick.grid.js:

    Code:
     var header = $("<div class='ui-state-default slick-header-column' id='" + uid + m.id + "' />")
                        .html("<span class='slick-column-name'>" + m.name + "</span>")
                        .width(m.width - headerColumnWidthDiff)
                        .attr("title", m.toolTip || m.name || "")
                        .data("fieldId", m.id || -1)
                        .addClass(m.headerCssClass || "")
                        .appendTo($headers);
    In IE i was getting a js error saying .html.width.attr.data is null or not an object.

    this line used to be:

    Code:
    .data("fieldId", m.id)
    when the id was null I got the error. I changed it to:

    Code:
    .data("fieldId", m.id || -1)
    and it worked.

    Now i'm having a problem with dates. The JSON serializer makes my dates look like this:

    Code:
    /Date(1276812000000+0200)/
    i found this post with the exact same problem:

    http://www.joe-stevens.com/2010/06/2...t-date-object/

    but I get an error saying Invalid Date how can i fix this

  14. #14

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

    Re: Help with jQuery SlickGrid

    ok i found this:

    http://james.newtonking.com/archive/...-json-net.aspx

    it works. The dates are sent back like this:

    Code:
    \"DateRequired\":\"2010-07-01T00:00:00\"
    in my js I do this:

    Code:
    var dateString = returnObj[i].DateRequired;
    				
    				if (dateString == null)
    				{
    				    date = '';
    				}else{
    				    date = isoDateReviver(dateString).toLocaleString();
    				}			
    			
    				d["Required"] =date;
    the only drawback is, I have to use LINQ and then I am able to do this because the SerializeObject Function accepts a converter:

    Code:
                        dt.Load(reader)
    
                        Dim TopicList = (From row In dt.AsEnumerable() _
                                Let MeetingID = row.Field(Of Long)("MeetingID") _
                                Let Topic = row.Field(Of String)("Topic") _
                                Let Task = row.Field(Of String)("Task") _
                                Let Required = row.Field(Of DateTime?)("DateRequired") _
                                Select New Meeting(MeetingID, Topic, Task, Required) _
                         With {.MeetingID = MeetingID, .Topic = Topic, .Task = Task, _
                         .DateRequired = Required}).ToList()
    
                        jsonString = JsonConvert.SerializeObject(TopicList, New IsoDateTimeConverter())
    
                        con.Close()
    I had a the following function to directly convert a datatable to JSON, but I don't know how I can set an ISODateConverter anywhere here as it doesn't use the SerializeObject function

    Code:
    Public Shared Function Serialize(ByVal value As Object) As String
            Dim type As Type = value.[GetType]()
    
            Dim json As New Newtonsoft.Json.JsonSerializer()
    
            json.NullValueHandling = NullValueHandling.Include
    
            json.ObjectCreationHandling = Newtonsoft.Json.ObjectCreationHandling.Replace
            json.MissingMemberHandling = Newtonsoft.Json.MissingMemberHandling.Ignore
            json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore
    
            If type Is GetType(DataRow) Then
                json.Converters.Add(New DataSetConverter())
            ElseIf type Is GetType(DataTable) Then
                json.Converters.Add(New DataTableConverter())
            ElseIf type Is GetType(DataSet) Then
                json.Converters.Add(New DataSetConverter())
            End If
    
            Dim sw As New StringWriter()
            Dim writer As Newtonsoft.Json.JsonTextWriter = New JsonTextWriter(sw)
            'If FormatJsonOutput Then
            writer.Formatting = Formatting.Indented
    
            'Else
            'writer.Formatting = Formatting.None
            'End If
    
            writer.QuoteChar = """"c
            json.Serialize(writer, value)
    
            Dim output As String = sw.ToString()
            writer.Close()
            sw.Close()
    
            Return output
        End Function

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

    Re: Help with jQuery SlickGrid

    Quote Originally Posted by gep13 View Post
    So, not to hijack the thread too much, but szlamany how are you finding this approach working out for you, rather than using the standard ASP.Net Controls?
    I believe it is the holy grail.

    My HTML is basically 4 divs - a binder, tracker, operator and work space - can't ask for a simpler HTML.

    They are empty.

    My database actually feeds a boot call to a web service that fills the tracker with an accordion and a variety of lookup panels.

    I attached an image of that data at the bottom of the post

    These are hidden in a 5th div - basically a repository of html segments that you might want to use. It clones objects from there as it reads the boot JSON that is returned.

    And JSON is truly magic - after I parse it into a JS object I can call EVAL() on the values in the text returned by my database and convert some of those values into JS functions - that is magic.

    Basically I can serialize both data and functionality in the JSON and have it expand in the DOM.

    Does that sound a bit like silverlight?

    At any rate the boot JSON also fills the OPERATOR div with a bunch of buttons - that will make calls to fill the WORK div with slickgrids and what not. All of these sitting in a tab panel that is effortless to use.

    jQuery has a really incredible drag and drop library that allows me to do things like drag kids names to buttons or drag kids names to existing grids to make that grid switch to a different kid.

    This seems to be like writing a winform in a browser - something I thought I would never achieve.

    Where exactly is the jQuery section of the forum??

    Look at the js code to make the accordion and fill the autocomplete textbox? That autocomplete textbox jQuery plugin doesn't do "tag" values for id - look how easy it was to "extend" it to do so. Just hijack the SELECT function - examples abound on the web. Plus I further "extended" it to do my "drag and drop" page-wide logic.

    Take a real close look at the LONG statements - jQuery chains that work the dom effortlessly. Magic!
    Code:
    case "acs-tracker":
        switch (value[0]) {
            case "accordion":
                $("#acs-panel").clone().appendTo("#acs-tracker").removeAttr("id").attr("id", value[1]).html("").addClass("acs-newaccordion");
                break;
        }
        break;
    case "acs-panels":
        var newaccordion = $(".acs-newaccordion").attr("id")
        for (var i = 0; i < value.length; i++) {
            $("#acs-subpanel").clone().appendTo("#" + newaccordion).removeAttr("id").attr("id", value[i].acsid).children().html(value[i].acspanelname);
            $("#acs-contentpanel").clone().appendTo("#" + newaccordion).removeAttr("id").attr("id", value[i].acsid).html(value[i].acspanelname).addClass("acs-emptyaccordion").data("ddtype", value[i].acsddtype);
        }
        break;
    case "acs-tracker:autocompleteid":
        var newaccordion = $(".acs-emptyaccordion:first").html("").attr("id") + "input"
        $("#acs-input").clone().appendTo(".acs-emptyaccordion:first").removeAttr("id").attr("id", newaccordion).parent().removeClass("acs-emptyaccordion");
        $('input.#' + newaccordion).attr("name", newaccordion);
        $('input.#' + newaccordion).each(function() {
            var autoCompleteElement = this;
            var formElementName = $(this).attr('name');
            var hiddenElementID = formElementName + '_autocomplete_hidden';
            /* change name of orig input */
            $(this).attr('name', formElementName + '_autocomplete_label');
            /* create new hidden input with name of orig input */
            $(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
            $(this).autocomplete({ source: value,
                select: function(event, ui) {
                    var selectedObj = ui.item;
                    $(autoCompleteElement).val(selectedObj.label);
                    $('#' + hiddenElementID).val(selectedObj.value);
                    var parentObj = $(this).parent().data("ddtype")
                    if (parentObj != "") {
                        $(window).data("ddtype" + parentObj, selectedObj.value);
                        $(window).data("lastddtype", parentObj);
                    }
                    return false;
                }
            });
        });
        $('#' + newaccordion)[0].focus();
        break;
    Attached Images Attached Images  

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

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

    Re: Help with jQuery SlickGrid

    I guess I should have included a screen shot.
    Attached Images Attached Images  

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

  17. #17
    PowerPoster gep13's Avatar
    Join Date
    Nov 2004
    Location
    The Granite City
    Posts
    21,963

    Re: Help with jQuery SlickGrid

    Quote Originally Posted by szlamany View Post
    I believe it is the holy grail.
    Noice!

    Quote Originally Posted by szlamany View Post
    Does that sound a bit like silverlight?
    Hmm, to an extent. This can certainly be achieved in Silverlight, although the technique would likely be implemented differently.

    Quote Originally Posted by szlamany View Post
    Where exactly is the jQuery section of the forum??
    I have actually thought about suggesting that. Perhaps as a Sub Forum of JavaScript, or perhaps as a forum in it's own right. Might be worth a suggestion in the Forum Feedback.

  18. #18

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

    Re: Help with jQuery SlickGrid

    wow. szlamany that looks brilliant. I like the look and feel of your site.

    I've figured out how to handle dates in my Convert Datatable to JSON function. I just added the line highlighted in red. Now I have to figure out how to format the date to YYYY/MM/DD on the js side. this is much cleaner now. this is a fragment of my json:

    Code:
    [
      {
        "MeetingID": 3,
        "Topic": "test",
        "Task": "Task 1 dfgd",
        "DateRequired": "2010-06-18T00:00:00"
      },
      {
        "MeetingID": 3,
        "Topic": "test",
        "Task": "Task 2",
        "DateRequired": "2010-06-18T00:00:00"
      },
    Code:
    Public Shared Function Serialize(ByVal value As Object) As String
            Dim type As Type = value.[GetType]()
    
            Dim json As New Newtonsoft.Json.JsonSerializer()
    
            json.NullValueHandling = NullValueHandling.Include
    
            json.ObjectCreationHandling = Newtonsoft.Json.ObjectCreationHandling.Replace
            json.MissingMemberHandling = Newtonsoft.Json.MissingMemberHandling.Ignore
            json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore
    
            'handle dates
            json.Converters.Add(New IsoDateTimeConverter())
    
            If type Is GetType(DataRow) Then
                json.Converters.Add(New DataSetConverter())
            ElseIf type Is GetType(DataTable) Then
                json.Converters.Add(New DataTableConverter())
            ElseIf type Is GetType(DataSet) Then
                json.Converters.Add(New DataSetConverter())
            End If
    
            Dim sw As New StringWriter()
            Dim writer As Newtonsoft.Json.JsonTextWriter = New JsonTextWriter(sw)
            'If FormatJsonOutput Then
            writer.Formatting = Formatting.Indented
    
            'Else
            'writer.Formatting = Formatting.None
            'End If
    
            writer.QuoteChar = """"c
            json.Serialize(writer, value)
    
            Dim output As String = sw.ToString()
            writer.Close()
            sw.Close()
    
            Return output
        End Function

  19. #19

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

    Re: Help with jQuery SlickGrid

    szlamany I need so help again please. I see in the grouping example they use a dataview. I ain't using one, can I still have grouping?

    Also, How can I edit a cell then save the information to my database?

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

    Re: Help with jQuery SlickGrid

    Quote Originally Posted by Nitesh View Post
    wow. szlamany that looks brilliant. I like the look and feel of your site.
    Remember that the "theme" of the site with jQuery is driven by a css that the jQuery community has produced.

    They have a dozen default themes and you can alter them with the themeroller.

    I had to make the font color for the ACTIVE state BLACK instead of WHITE because SLICKGRID used the "active" state to color a row that you are editing - and the background color didn't match with the WHITE font.

    I used the START theme as the base and then rolled my own change into that.

    Look at the GALLERY on this page

    http://jqueryui.com/themeroller/

    and then look at the roll your own tab...

    The nice thing about all this is that those BUTTONS and ACCORDIONS and TABS all use this theme CSS in a consistent fashion making your page coherent with "0 effort" - that is productivity handed to you on a silver platter.

    Quote Originally Posted by Nitesh View Post
    szlamany I need so help again please. I see in the grouping example they use a dataview. I ain't using one, can I still have grouping?

    Also, How can I edit a cell then save the information to my database?
    I'm as new to the slickgrid as you - so your grouping / dataview question I cannot address...

    As for the SAVE info - back in post #2 you can see the onCellChange event that I put in that would eventually lead to a DB update call...
    Last edited by szlamany; Apr 1st, 2011 at 04:06 AM.

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

  21. #21

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

    Re: Help with jQuery SlickGrid

    thanks for the link. definetely will use it in future. ok cool i understand I noticed the onCellChanged event. I tried adding it in my project and I get this error:

    Code:
    evt.notify is not a function
    http://localhost:50646/OscarVB.Net/Javascript/slick.grid.js
    Line 789
    I'm sure I've included all the necessary js files:

    Code:
     <script src="Javascript/firebugx.js"></script>
    
            
            <script src="Javascript/jquery-1.5.js" type="text/javascript"></script>
            <script src="Javascript/jquery.json-2.2.min.js" type="text/javascript"></script> 
            <script src="Javascript/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
    
    		<script src="Javascript/jquery.event.drag-2.0.min.js" type="text/javascript"></script>
    
            <script src="Javascript/slick.core.js" type="text/javascript"></script>
            <script src="Javascript/slick.grid.js" type="text/javascript"></script>
            
    		<script src="Javascript/slick.cellrangeselector.js" type="text/javascript"></script>
    		<script src="Javascript/slick.cellselectionmodel.js" type="text/javascript"></script>
    		<script src="Javascript/slick.editors.js" type="text/javascript" ></script>
    		<script src="Javascript/slick.rowselectionmodel.js" type="text/javascript"></script>
    		<script src="Javascript/slick.dataview.js" type="text/javascript"></script>
    		<script src="Javascript/slick.pager.js" type="text/javascript"></script>
    		<script src="Javascript/slick.columnpicker.js" type="text/javascript"></script>
    Last edited by Nitesh; Apr 1st, 2011 at 04:45 AM.

  22. #22

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

    Re: Help with jQuery SlickGrid

    i think i'm onto something. This works:

    Code:
     grid.onCellChange.subscribe(function(e,args) {
                    alert(args.item.MeetingID);
                    console.log(args.item);
                });
    the other method doesn't though.

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

  24. #24

    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

  25. #25

    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

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

  27. #27

    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

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

  29. #29

    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

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

    Re: Help with jQuery SlickGrid

    So tell me - how do you manage the editing and saving? Can they make changes to lots of rows and you wait till they click SAVE?

    Do you allow them to initialize the EDIT by simply clicking the cell?

    How about disabling buttons and other screen action while the EDIT is in place?

    Just curious what you have done so that I don't drag my old mainframe-VB6-VB.Net-ASP.Net mind into it with preconceived notions.

    Thanks!

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

  31. #31

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

    Re: Help with jQuery SlickGrid

    hey szlamany,

    I'm afraid I haven't done any work on this since last week. At the moment I only edit a single row at a time. No disabling buttons etc either. sorry

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

    Re: Help with jQuery SlickGrid

    Well - I've got ADD and EDIT started in my app - pop-up a DIV that "covers" the grid so you have to work the ADD/EDIT until done - then I'll return you to the grid.

    Either full grid data refresh or I'll try to surgically get the new row into the grid.

    Not sure I'm going to allow "grid edit" - I might leave the grid read-only - or at least maybe the most complicated grids. The will need the "edit" DIV-cover...

    At any rate I've got my add and edit webservices functioning and I'm auto-binding the "sql columns" based on the column name matching a "class" I put on the edit fields...

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

  33. #33

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

    Re: Help with jQuery SlickGrid

    that sounds good do you know how to Remove All rows in the grid. I have a parent grid and a child grid. When I click the parent row I do an ajax call and then populate the child grid. I need to clear the child grid each time before it populates again. any idea

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

    Re: Help with jQuery SlickGrid

    Sorry - not at that point yet - will be managing exising grid rows in a day or so.

    Post with what you find if you get their first

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

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

    Re: Help with jQuery SlickGrid

    I have been having a nightmare of a time accessing cell values in an existing grid from code.

    Have you done this yet?

    Any code snippets I can look at?

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

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

    Re: Help with jQuery SlickGrid

    nvm - I discovered that the slickgrid really just maintains the data source object and such that you bring in initially.

    With that said those objects needed to become global arrays in the javascript so that I could refer to them properly in events and what not.

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

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

    Re: Help with jQuery SlickGrid


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

  38. #38

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

    Re: Help with jQuery SlickGrid

    hey szlamany,

    I'm afarid I've had to abandon this approach. I did everything I needed to like save data oncellchange etc, until I got to the grouping part.

    I grouped the data by a field and the grid looked great, until I started clicking on a row and trying to get the row data. The grid was giving me Row 5 data for example if I clicked on Row 1.

    And I realised it ain't my mistake cos I even tried it on the slickgrid example and got the same result

    I'm afaid I wasted 2 weeks of development and I now have to look for an alternative approach. I did learn quite a bit about JSON though so I guess all is not lost

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

    Re: Help with jQuery SlickGrid

    @nitesh - did you ever go back to the jQuery SlickGrid? I'm having some really good success with this myself and was wondering if you had time to re-look at your approach?

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

  40. #40
    PowerPoster gep13's Avatar
    Join Date
    Nov 2004
    Location
    The Granite City
    Posts
    21,963

    Re: Help with jQuery SlickGrid

    By the way szlamany, is the site you are creating public facing so that we could take a look at the fruits of your labour? Would be interesting to see.

    Gary

Page 1 of 2 12 LastLast

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